js 事件监听  冒泡事件   的取消

  1. 【自己写框架时，才有可能用到】
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>事件编程</title>
  6.         <style type='text/css'>
  7.  
  8.         #div1 {
  9.             width:400px;
  10.             height:400px;
  11.             background:#ff0000;
  12.         }
  13.         #div2 {
  14.             width:300px;
  15.             height:300px;
  16.             background:blue;
  17.         }
  18.         #div3 {
  19.             width:200px;
  20.             height:200px;
  21.             background:yellow;
  22.         }
  23.         </style>
  24.  
  25.         <script>
  26.                              //取消事件冒泡           //自己写框架时，才有可能用到
  27.             function stopBubble(event) {
  28.                  if(window.event) {
  29.                      window.event.cancelBubble = true;
  30.                     } else {
  31.                       event.stopPropagation();
  32.                     }
  33.             }
  34.             window.onload = function() {
  35.                 addEvent($('div1'),'click',function(){
  36.                     alert('div1');
  37.                 })
  38.                 addEvent($('div2'),'click',function(event){
  39.                     alert('div2');
  40.                     stopBubble(event);
  41.                 })
  42.                 addEvent($('div3'),'click',function(event){
  43.                     alert('div3');
  44.                     stopBubble(event);
  45.                 })
  46.             }
  47.         </script>
  48.     </head>
  49.     <body>
  50.         <div id='div1'>
  51.             <div id='div2'>
  52.                 <div id='div3'></div>
  53.             </div>
  54.         </div>
  55.     </body>
  56. </html>

js 事件监听 冒泡事件的更多相关文章

  1. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  2. JS 中的事件绑定、事件监听、事件委托

    事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...

  3. JS 事件绑定、事件监听、事件委托详细介绍

    原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...

  4. JS 中的事件绑定、事件监听、事件委托是什么？

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...

  5. javascript事件监听与事件委托

      事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...

  6. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  7. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  8. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  9. js input监听兼容事件

    $('#phoneNumber').on('input',function() { var valueP = $(this).attr('value'); if(valueP.length == 11 ...

随机推荐

  1. tomcat8编码

    web工程,本机能跑的代码放到生产环境中后能跑但是得不到预期的结果,十有八九的原因是 编码问题

  2. --hdu 2570 迷瘴(贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2570 Ac code: #include<stdio.h> #include<std ...

  3. web后门排查与高效分析web日志技巧

    今年一直大大小小的事情忙,很少有时间能静下心写个文章,所以最近博客更新也越来越少了,公司现在安全团队在我这边,一直在玩命的招人.下个月8号有一个互联网金融的会,4月在qcon北京站,都以嘉宾的身份去分 ...

  4. WCF中的标准绑定

    使用过WCF的童鞋们都很清楚,绑定是必须的.我将这些绑定总结了下. 一.标准绑定简要说明 1.basicHttpBinding 基于WS-I Basic Profile 1.1 的web服务,所需的. ...

  5. linux服务器部署svn常见错误处理→转载

    转载地址→http://blog.seweal.com/post/2013-02-04/svn-errors [开放svn端口] iptables -I INPUT -p tcp --dport 36 ...

  6. iOS6.1完美越狱工具evasi0n1.3下载

    原地址:http://blog.sina.com.cn/s/blog_55f899fb0102ei49.html 标签: it 分类: MAC_OS_X evad3rs梦之队发布iOS6.1完美越狱工 ...

  7. HDU 1203 I NEED A OFFER （01背包&&概率dp）

    M - I NEED A OFFER! Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...

  8. android menu showAsAction属性

    app中有一个菜单(menu),showAsAction主要是针对这个菜单的显示起作用的,它有三个可选项:always:总是显示在界面上 never:不显示在界面上,只让出现在右边的三个点中 ifRo ...

  9. 【OpenStack】OpenStack系列1之Python虚拟环境搭建

    安装virtualenv相关软件包 安装:yum install python-virtualenv* -y 简介,安装包主要包括, python-virtualenv:virtualenv用于创建独 ...

  10. Mybatis 动态sql标签

    1.动态SQL片段 通过SQL片段达到代码复用         <!-- 动态条件分页查询 -->          <sql id="sql_count"> ...