<!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. 图表制作工具之ECharts

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  2. netty学习记录2

    昨天晚上在看到7.2章MessagePack编码器和解码器开发这一章时,书里面没有贴出全部的代码,然后我按照我自己的想法把代码补全后,发现死活没有把代码跑通. 然后花了挺多时间在网上找,很多博客都贴出 ...

  3. GDB抓虫之旅（上篇）

    本文来自网易云社区. 作者:盛国存 前言 问: gdb是什么? 答: 强大的UNIX下命令行调试工具. 问: gdb能干什么? 答: 让你随心所欲的驾驭你的程序:Start.Stop.Examine. ...

  4. Bootstrap开发漂亮的前端界面之实现原理

    引:Bootstrap采用的是一个“响应式”设计.响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法.例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手 ...

  5. Java日志（二）：log4j与XML配置文件

    [Java日志(一):log4j与.properties配置文件]一文列举的几个案例以.properties文件作为log4j的配置文件,本文简单看一下log4j与XML配置文件 (1)XML配置文件 ...

  6. kindeditor 限制上传图片大小及宽高

    进入:/kindeditor/plugins/image/image.js,替换其中的 self.plugin.imageDialog = function (options)方法,代码为: self ...

  7. iOS-读写plist文件

    读写plist文件 问题,我有一个plist文件,表示56个民族的,但是里面保存的字典,我想转换成一个数组 好的,那么就先遍历这个plist,然后将结果保存到一个数组中,这里出现的一个问题就是C语言字 ...

  8. C#文件重命名的代码

    C#中没有重命名的方法,自己写了一个方法,来处理文件的重命名. /// <summary> /// 重命名文件夹内的所有子文件夹 /// </summary> /// < ...

  9. JAVA虚拟机（一）：内存区域

    根据<java虚拟机规范第二版>规定,现阶段的java内存区域总体如下图 其中,方法区和堆是所有线程共享区域. 虚拟机栈,本地方法栈,程序计数器是各线程独占. 概述一下各个区域 先说说线程 ...

  10. 调度器&负载均衡调度算法整理

    一.Linux 调度器   Linux中进程调度器已经经过很多次改进了,目前核心调度器是在CFS(Completely Fair Scheduler),从2.6.23开始被作为默认调度器.用作者Ing ...