<!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. git将本地项目上传到远程仓库

    1.cd mygit 打开项目文件夹 2.git init 初始化git 3.git remote add origin xxx(远程仓库地址)  添加远程库   git remote -v 查看远程 ...

  2. 【Leetcode】413. Arithmetic Slices

    Description A sequence of number is called arithmetic if it consists of at least three elements and ...

  3. 【转】谈谈 iOS 中图片的解压缩

    转自:http://blog.leichunfeng.com/blog/2017/02/20/talking-about-the-decompression-of-the-image-in-ios/ ...

  4. python的正则表达一

    一.常用的正则表达式 1.了解正则表达式 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种 ...

  5. shell -- for、while用法

    #数字段形式for i in {1..10}do   echo $idone #详细列出(字符且项数不多)for File in 1 2 3 4 5do    echo $Filedone #对存在的 ...

  6. spring读取properties和其他配置文件的几种方式

    1.因为spring容器的一些机制,在读取配置文件进行数据库的配置等等是很有必要的,所以我们要考虑配置文件的的读取方式以及各个方式的实用性 2.配置文件的读取方式我这里介绍2种,目的是掌握这2种就可以 ...

  7. 快速平方根算法的javascript实现

    前几天看见了一个来自雷神之槌的平方根源码,原理多方有介绍,不赘述. 源码是c语言写的,我思考后发现这样的算法在javascript中也是可以完成的. function InvSqrt(x){ var ...

  8. 今日Linux下安装部署禅道

    我的linux系统是在虚拟机上安装的Ubuntu,禅道在官网www.zentao.net下载安装的开源版的linux64位,采用一键安装包安装.安装前要求:系统上不能有自己安装的mysql .下载的安 ...

  9. 接口自动化测试框架Karate入门

    介绍 在这篇文章中,我们将介绍一下开源的Web-API自动化测试框架--Karate Karate是基于另一个BDD测试框架Cucumber来建立的,并且共用了一些相同的思想.其中之一就是使用Gher ...

  10. linux学习总结-----web前端①

    <html> <head> <title></title> <meta charset='utf-8'/> ... </head> ...