<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {
            width: 400px;
            height: 300px;
            background: #CCC;
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');
            oBtn.onclick = function (ev) {
                var oEvent = ev || event;//获取event对象的兼容性写法
                oDiv.style.display = 'block';
                oEvent.cancelBubble = true;//取消事件冒泡
            };
            document.onclick = function () {
                oDiv.style.display = 'none';
            };
        };
    </script>
</head>

<body>
<input id="btn1" type="button" value="显示"/>

<div id="div1">
</div>
</body>
</html>

运行结果（点击任意界面div消失）：
　　aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmYAAAGSCAIAAADGpZpPAAAL3klEQVR4nO3dy4psdwHF4XpQ4yWCl4mPYDSJ4OUVHDhQR3Fo1MSgTtSBszNxpOIRFSWKEZ15joOAyLGrzt/J6lqs72PT7NpUbZqCXj+aprsvzwGAA5fH/gQAoINkAsCRq8l88vTZt3/+/LGOJ0+fJd8FAHiph5P55Omzz33jg8989Sef/NIP88dnvvqTz33jA9UE4K48nMxv/ezZp778o38+nk9/5cff/Om/wu8FANxwNZmvvvnuPx7Pq2++K5kA3JWryfzEG+/8/fFIJgD35lYyP3g8kgnAvbmVzL9dd7nu5Jk37vyhT7zxjmQCcFeuJvPjr//gr9ddLpf/6/r/SzIBuDe3kvmX6258l3njVeckE4B7cyuZ7193uVxeev1GVj904/4ff/0HkgnAXbmazI998ft/vu5GCG+85MYNXyCZANybW8n808tcLpcHz1/65JeSTADuza1k/vGKy+Xywsm1iw9ef+EJD/rYF78vmQDclavJ/OgXvveH6y6Xy38+Xrvy39cffPINkgnAvbmVzN/f9OFPLq89/M/FB8//9+ELJBOAe3Mrmb97mcvl8uD5g1duP3zBR7/wPckE4K5cTeYrr7399IqX/vbItZdcu+H/kkwA7s2tZP728UgmAPfmVjJ/83heee1tyQTgrlxN5kc+/91fPx7JBODe3PpPJr96PP7GLAD35uFkPnn67LNff//VN9995bW388erb7772a+//+Tps/B7AQA3PJzM58+fv/XeL7/2nd891vHWe7/8BcCZ5Giy7GoyH/tLAOBUcjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WSZZAL1kqPJMskE6iVHk2WSCdRLjibLJBOolxxNlkkmUC85miyTTKBecjRZJplAveRoskwygXrJ0WTZ1WQCAP9NMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkARyQTAI5IJgAckUwAOCKZAHBEMgHgiGQCwBHJBIAjkgkAR/4N5qoG2NgEPLsAAAAASUVORK5CYII=" alt="" />

event对象和事件冒泡的更多相关文章

  1. Event对象的事件句柄

    <html> <!-- onresize 事件会在窗口或框架被调整大小时发生 --> <!--onresize="alert('窗口的大小得到变化就会执行我') ...

  2. event事件对象 兼容写法：var oEvent=ev||event;和取消事件冒泡

    要在整个页面添加事件要使用document,例如要捕抓鼠标位置 document.onclink=function(ev)  //FireFox Chrome默认都是有一个值传进来的 { var oE ...

  3. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

  4. Vue2学习笔记:事件对象、事件冒泡、默认行为

    1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  5. 第九课-1 事件的状态Event 对象 ，事件，元素，节点的关系，事件委托currentTarget与target的区别

    <ul> <li>1itme1</li> <li>2itme2</li> <li>3itme3</li> <l ...

  6. Javascript防冒泡事件与Event对象

    防冒泡 防冒泡用到的就是event的属性和方法 function add2shop(e) { if (!e) var e = window.event; e.cancelBubble = true; ...

  7. dom事件与event对象总结

    1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间.    tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序.        事件 ...

  8. event对象及各种事件

    事件(event) event对象 (1)什么是event对象? Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.事件通常与函数结合使用,函数不会 ...

  9. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

随机推荐

  1. System.Speech使用

    使用微软语音库 使用微软语音库可以很快速的制作一个小应用,比如一个唐诗的朗诵工具.本示例也是使用微软语音库,制作了一个唐诗宋词朗诵的应用,仅供加深学习印象 首先是要引入System.Speech库 然 ...

  2. 动态规划（DP）算法

    参考https://blog.csdn.net/libosbo/article/details/80038549 动态规划是求解决策过程最优化的数学方法.利用各个阶段之间的关系,逐个求解,最终求得全局 ...

  3. python2.7练习小例子（六）

        6):题目:斐波那契数列.     程序分析:斐波那契数列(Fibonacci sequence),又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.……. ...

  4. windows下subversion服务器搭建

    一.下载subversion服务器端和客户端软件 1.subversion下载地址:http://subversion.tigris.org/ 2.svn比较流行的客户端Tortoisesvn下载地址 ...

  5. CS229 1

    1.机器学习 机器学习是工具,具体应用到某个实际场景下,才是目的. 2.分类 a 监督学习,包括回归(regression),分类(classification).回归问题,数据可以是连续或者离散,分 ...

  6. tp5.0 模型查询数据的返回类型,分页

    一开始用painate()这个函数的时候,发现有的查询方式不能使用这个函数,由此了解到了模型查询和普通查询返回类型的不同 1.原生查询方法 Db::query("select * from ...

  7. 第一篇 Charles的配置及相关使用

    // Charles Proxy License // 适用于Charles任意版本的注册码,谁还会想要使用破解版呢. // Charles 4.2目前是最新版,可用.   Registered Na ...

  8. jmeter如何连接数据库

    大家都知道jmeter是java编写的,java/jmeter如果想连接数据库就要通过java database connector(JDBC)去连接,首先需先下载一个驱动 (mysql-connec ...

  9. 时间动态协同过滤（TimeSVD++）

    原作者 原论文地址 http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.379.1951&rep=rep1&type=pd ...

  10. [Node] Agenda 中文文档 定时任务调度系统[基础篇]

    Agenda简介 使用步骤概述 步骤详述 初始化 定义任务 参数说明: 配置任务 参数说明 设置监听 注意事项 Agenda简介 Agenda是一个定时任务管理模块,它将node中的定时任务存储在数据 ...