<!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. web视频播放

    webm.mp4/h264    video.js hevc libde265.js hls/m3u8 hls.js

  2. SIMD数据并行（三）——图形处理单元（GPU）

    在计算机体系中,数据并行有两种实现路径:MIMD(Multiple Instruction Multiple Data,多指令流多数据流)和SIMD(Single Instruction Multip ...

  3. python2.7入门---字符串

        这次咱们就来看一下python的字符串类型.首先我们要知道,字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串.创建字符串很简单,只要为变量分配一个值 ...

  4. 在WPF中自定义控件(3) CustomControl (下)

    原文:在WPF中自定义控件(3) CustomControl (下)   在WPF中自定义控件(3) CustomControl (下)                                 ...

  5. DDR分析与布线要求

    基本知识 Double Data Rate Synchronous Dynamic Random Access Memory 简称 DDR SDRAM 双倍数据率同步动态随机存取内存 DDR SDRA ...

  6. PIC32MZ 通过U盘在线升级 -- USB Host bootloader

    了解bootloader的实现,请加QQ: 1273623966(验证填bootloader); 欢迎咨询或定制bootloader; 我的博客主页 www.cnblogs.com/geekygeek ...

  7. 『AngularJS』理解$Scope

    理解$Scope 执行概要 在AngularJS,一个子scope通常原型继承于它的父scope.应用于这个规则的表达式是一个使用scope:{...}的指令,这将创建一个『孤岛』scope(非原型继 ...

  8. 近期准备发布我的asp.net框架

    此框架为超轻量级架构,适合做中小型的b/s项目

  9. Android2.2以上的版本HttpURLConnection.getContentLength()获取的size跟下载下来的file的legth不相等

    2.2以上的版本下载网络资源不完整无法更新.HttpURLConnection.getContentLength()获取的size跟下载下来的file的legth不等. 原因是:HttpURLConn ...

  10. Ubuntu18.04 + CUDA9.0 + cuDNN7.3 + Tensorflow-gpu-1.12 + Jupyter Notebook深度学习环境配置

    目录 一.Ubuntu18.04 LTS系统的安装 1. 安装文件下载 2. 制作U盘安装镜像文件 3. 开始安装 二.设置软件源的国内镜像 1. 设置方法 2.关于ubuntu镜像的小知识 三.Nv ...