-->事件冒泡和捕获
-->事件监听
-->阻止事件传播

一、事件冒泡和捕获

1、概念：当给子元素和父元素定义了相同的事件，比如都定义了onclick事件，点击子元素时，父元素的onclick事件也会被触发。js里称这种事件连续发生的机制为事件冒泡或者事件捕获。
IE浏览器：事件从里向外发生，事件从最精确对象(target)开始触发，然后到最不精确的对象(document)触发，即事件冒泡

Netscape：事件从外向里发生，事件从最不精确的对象(document)开始触发，然后到最精确对象(target)触发，
即事件捕获

2、W3C标准将两者进行中和，在任何的W3C的事件模型中，
事件先进入捕获阶段，再进入冒泡阶段

3、一般的绑定事件方式
div1.onclick=function () {
alert('div被点击');
};
在一个支持W3C DOM的浏览器中，一般的绑定事件方式，采用的是事件冒泡方式

程序员可以选择绑定事件时采用事件捕获还是事件冒泡，
办法就是绑定事件时通过addEventListener( )方法

二、事件监听

1、支持W3C标准的浏览器在绑定事件时可以用addEventListener(type,fn,useCapture) 方法
参数：type----------事件类型，例：click
　　　fn--------------事件处理函数
　　　useCapture----布尔值true或false
( true表示事件捕获，false表示事件冒泡 )
为了兼容浏览器，第三个参数一般设置为false

事件监听：addEventListener(type,fn,useCapture) 

事件移除：removeEventListener(type, fn, useCapture)

2、因为IE678只支持事件冒泡，不支持事件捕获，所以它也不支持addEventListener( )方法，IE提供了另一个函数:

attachEvent( type , fn )
参数：type---------事件类型，例：onclick
　　　fn-------------事件处理函数
没有第三个参数

事件监听：attachEvent( type , fn )

事件移除：detachEvent( type , fn )

三、阻止事件传播

事件冒泡或事件捕获都有传播的特征
阻止事件传播的方法：
在W3C中使用 Event.stopPropagation();
在IE中使用 Event.cancelBubble=true;

var Event=ev||window.event;
if (Event.stopPropagation){
Event.stopPropagation();//非IE阻止事件传播
}else{
Event.cancelBubble=true;//IE阻止事件冒泡
}

四、阻止默认事件

var Event=ev||event;
if (Event.preventDefault) {
Event.preventDefault(); //非IE阻止默认事件
} else{
Event.returnValue=false; //IE阻止默认事件
};

return false; 代码中遇到立即停止执行，跳出正在执行的函数，相当于终止符，可以用来阻止默认事件
PS：注意使用位置，不能滥用

五、代码

组织事件传播示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>阻止事件传播</title>

 <style>

 *{margin:0;padding:0;list-style: none;}

 ul{width:500px;height:300px;background: #ccc;}

 li{width:300px;height:150px;background: pink;}

 p{width:100px;height:100px;background:blue;}

 </style>

 </head>

 <body>

     <ul>

         <li>

             <p></p>

         </li>

     </ul>

 <script>

     var ul=document.getElementsByTagName('ul')[0];

     var li=document.getElementsByTagName('li')[0];

     var p=document.getElementsByTagName('p')[0];

     ul.onclick=function(){

         alert('我是ul');

     }

     li.onclick=function(ev){

         alert('我是li');

         var e=window.event||ev;

         if (e.stopPropagation) {//组织事件传播到父级

             e.stopPropagation();

             //非IE阻止事件传播(W3C)

         } else {

             e.cancelBubble=true;

             //IE阻止事件传播(IE)

         }

     }

     p.onclick=function(){

         alert('我是p');

     }

 </script>

 </body>

 </html>

自定义右击菜单练习：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title></title>

 <style>

 *{margin:0;padding:0;}

 div{width:150px;height:300px;background: pink;display:none;position: absolute;}

 span{color:red;}

 </style>

 </head>

 <body>

 <div>

     <span>第一页</span>

     <span>下一页</span>

     <span>刷新</span>

 </div>

 <script>

     var div=document.getElementsByTagName('div')[0];

     document.oncontextmenu=function(ev){//菜单右击事件

         div.style.display='block';

         var e=window.event||ev;

         if(e.preventDefault){//组织默认右击事件

             e.preventDefault();

         }else{

             e.returnValue=false;

         }

         var winH=document.documentElement.clientHeight;

         var winW=document.documentElement.clientWidth;

         var divH=div.offsetHeight;

         var divW=div.offsetWidth;

         var x=e.clientX;

         var y=e.clientY;

         if (winH-y<divH) {

             div.style.top=(y-divH)+'px';

         } else {

             div.style.top=y+'px';

         }

         if (winW-x<divW) {

             div.style.left=(x-divW)+'px';

         } else {

             div.style.left=x+'px';

         }

     }

 </script>

 </body>

 </html>

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播的更多相关文章

  1. JavaScript 详说事件机制之冒泡、捕获、传播、委托

    DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...

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

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

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

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

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

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

  5. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  6. 两种js监听滚轮事件的方式

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...

  7. 使用 JS 关闭警告框及监听自定义事件（amaze ui）

    使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...

  8. H5_0003：JS禁用调试，禁用右键，监听F12事件的方法

    1,禁用调试 // 这个方法是防止恶意调试的 (function () { console["log"]("=============================== ...

  9. js 监听后退事件及跳转页面

    //直接跳转 window.location.href="b.html"; //返回上一级页面 window.history.back(-1); //返回下一级页面 window. ...

随机推荐

  1. The transaction log for database 'tempdb' is full due to 'ACTIVE_TRANSACTION'

    今天早上,Dev跟我说,执行query statement时出现一个error,detail info是: “The transaction log for database 'tempdb' is ...

  2. VMware 中如何打开U盘弹出U盘或者移动硬盘的（两种方法）

    1.U盘如下,插入后都是直接在win里面显示的 2.选择连接u盘 3.u盘就可以在虚拟机里面显示了 4.弹出则选择断开连接 扩展:如果无效:请参考这种方法 (给虚拟机分配一个临时硬盘,然后设置这个临时 ...

  3. LinQ to entities 不能识别方法“system.string.ToString(system.String)”.因此该方法无法转换为存储表达式

    [我也是刚研究IEnumerable和IQueryable]以下都是个人理解,仅供参考,如有错误欢迎指出~ 在EF里面,使用IQueryable和IEnumerable可以延迟加载. IQueryba ...

  4. 学用MVC4做网站六后台管理:6.1.1管理员登录、6.1.2退出

    1.管理员登录 在6.1中已添加控制器[AdministratorController] 在控制器中添加[Login()]action,用来显示登录页面 /// <summary> /// ...

  5. 【开源】OSharp3.0框架解说系列：新版本说明及新功能规划预览

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  6. 通过配置http拦截器，来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  7. 弹窗层效果的实现（非jQuery实现）

    要想实现弹窗的效果,首先应该创建一个覆盖层maskLayer,以及一个显示层presentLayer. 其次,每次弹窗时(除首次弹窗外),maskLayer的显示以及隐藏不应该导致文档流的reflow ...

  8. (十三)WebGIS中工具栏的设计之命令模式

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 从这一章节开始我们将正式进入WebGIS的工具栏中相关功能的 ...

  9. （2）从实际项目谈起，基于MEF的插件框架之总体设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.MEF框架简介 MEF的全称是Managed Extensibil ...

  10. 【JUC】JUC线程池框架综述

    一.前言 在分析完了JUC的锁和集合框架后,下面进入JUC线程池框架的分析,下面给出JUC线程池的总体框架,之后再逐一进行分析. 二.JUC线程池框架图 说明:从上图可知,JUC线程池框架中的其他接口 ...