<!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. Python tips（

    (此文是在实际工程中遇到的一些小问题,给予解决和整理.解决方法大多来自网上零散的文章.有一个系统化的Python问题解决方案,来自<Python 3 学习笔记>雨痕著,其中对Python的 ...

  2. JQuery中的load()、$.get()和$.post()详解 （转）

    load() 1.载入HTML文档 load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中. 它的结构为: load(url [,data][,callba ...

  3. ora-12154 TNS："无法处理服务名"的一个解决方法

    http://www.cnblogs.com/xh3/archive/2007/04/21/722217.html 很怪异的一个问题,在网络环境下配置客户端,竟然怎么也连不上主机了,看了不少帖子,大多 ...

  4. 掘金 Android 文章精选合集

    掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...

  5. js滚动及可视区域的相关的操作

    element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...

  6. 【廖雪峰老师python教程】——filter/sorted

    filter Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次作用于每个元素,然 ...

  7. 1013 Battle Over Cities （25 分）(图的遍历or并查集)

    这题用并查集或者dfs都可以做 dfs #include<bits/stdc++.h> using namespace std; ; bool mp[N][N]; int n,m,k; b ...

  8. LINQ学习笔记——（1）添加扩展方法

    目的:  对已存在类型的行为进行扩展 注意事项:    扩展方法是一种特殊的静态方法    扩展方法必须在静态类中定义    扩展方法的优先级低于同名的类方法    扩展方法只在特定的命名空间内有效 ...

  9. day02 智能合约

    上午 1>部署智能合约网络 语法 require 2>利用第三方的节点 同步到以太坊 3>智能合约部署的步骤: 1.查看区块 2.发布合约 deploy后台经历的事情:就是部署合约的 ...

  10. Redis--各个数据类型最大存储量

    原文地址:https://redis.io/topics/data-types Strings类型:一个String类型的value最大可以存储512M Lists类型:list的元素个数最多为2^3 ...