这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

时间:2022-09-16 22:39:50

哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记。。。醉了

这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

  首先要明白两个概念——事件和事件流

  事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等

  事件流指的是 从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流。

事件冒泡:

  从事件目标开始 一级级向上冒泡,到document为止——从里到外

  IE 5:div--body--document;

  IE6:div--body--html--document;

  mozilla:div--body--html--window

**值得注意的是,IE8-只能传播到document。

事件捕获:

  从最外层document开始触发,最后到最精确的事件目标——从外到里

**和事件冒泡相反,用意是在事件达到目标前就捕获它

DOM事件流:

  同时支持两种事件模型——事件冒泡和事件捕获,但是捕获会先发生。两种事件会触及dom中所有的对象,从document对象开始,也在document对象中结束。

  DOM标准规定,事件流有3个阶段:

  事件捕获阶段——处于目标阶段——事件冒泡阶段

一张图以蔽之:

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

绑定事件的时候可以自己选择是采用事件捕获还是事件冒泡:

通过addEventListener函数,它有第三个参数,如果设置为true,就是采用事件捕获,如果是false,则表示事件冒泡

true:捕获

false:冒泡

element.addEventListener('click',doSomething,true)

值得注意的是,IE只支持事件冒泡,不支持事件捕获,也不支持addEventListener,但是它可以使用另一个函数attachEvent来绑定

element.attachEvent('onclick',doSomething)

阻止事件传播!!!记了一辈子了都没记住的地方!!!

普通:

stopPropagation()

IE:

cancleBubble = true;

在捕获的过程中stopPropagation 后面的冒泡过程就不会发生了

        function stopBubble(){
if(e&& e.stopPropagation){
e.stopPropagation(); //非IE
}else{
window.event.cancleBubble = true;
}
}

阻止默认事件

普通:

preventDefault()

IE:

window.event.returnValue = false;

        function stopDefault(){
if(e&& e.preventDefault){
e.preventDefault(); //非IE
}else{
window.event.returnValue = false;
}
}                                       

总结:

事件冒泡——从里到外 从a-div-body-html-document-window(低版本IE到document)

事件捕获——从外到里 从window-html-body-div-a

阻止冒泡

普通——e.stopPropagation

IE——window.event.cancleBUbble=true;

阻止默认事件

普通——e.preventDefault

IE——window.event.returnValue = false;

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了的更多相关文章

  1. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  2. Javascript和jquery事件--阻止事件冒泡和阻止默认事件

    阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...

  3. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  4. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  5. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  6. javascript 停止事件冒泡以及阻止默认事件冒泡

    停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...

  7. 处理事件冒泡,阻止默认事件工具类,兼容IE

    //处理事件冒泡,阻止默认事件工具类,兼容IEvar eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ if(element ...

  8. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  9. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

随机推荐

  1. Hibdernate入门

    Hibernate中java对象的三种状态 瞬时状态(Transient):通过NEW创建对象后对象并没有立刻持久化他未与数据哭中的数据有任何关联 持久状态(Persistent):当对象与Sessi ...

  2. LoadRunner检查点学习实例

    LoadRunner只会检测脚本中事务的执行状态,而实际的事务执行结果则需要通过检查点来完成. 例如一个登录事务,LR只关心事务本身的执行状态,也就是说哪怕实际操作密码错误产生登录失败的业务操作,其事 ...

  3. &lbrack;转&rsqb;TortoiseSVN文件夹及文件图标不显示解决方法

    FROM : http://blog.csdn.net/lishehe/article/details/8257545 由于自己的电脑是win7(64位)的,系统安装TortoiseSVN之后,其他的 ...

  4. JS&lpar;截取字符串&comma;显示当前系统时间yyyy-MM-dd&comma;从文本框得到的数值计算&rpar;

    截取字符串: var str = "1234567890"; var a = str.substring(0,8);    //==str.substring(8)---结果:12 ...

  5. jstree级联查找树

    <script > obj=$.jstree.reference($('#plugins4')); function PP(obj,e,filename){ if (obj.get_par ...

  6. php5&period;3&period;3安装mongo扩展

    /usr/bin/phpize./configure --with-php-config=/usr/bin/php-configmake && make install/usr/sbi ...

  7. ARM体系结构&lowbar;DAY2

    程序状态寄存器(CPSR) Mode位[4:0]:处理器模式为 USER模式不能直接切换到特权模式,在特权模式下可以直接修改mode位[4:0]为10000,切换到USER模式. T bit位[5]: ...

  8. linux查看分区是否开启acl权限

    1.为什么需要ACL权限 ACL的全称是 Access Control List (访问控制列表) .对于文件或者目录,都有相应的操作权限 r(read 读),w(write 写),x(execute ...

  9. 《AlwaysRun&excl;》第一次作业:团队亮相

    项目 内容 这个作业属于哪个课程 2016级软件工程(西北师范大学) 这个作业的要求在哪里 实验五  团队作业1:软件研发团队组建 团队名称 Always Run! 作业学习目标 熟悉软件的开发流程与 ...

  10. OO&lowbar;多项式求导&lowbar;单元总结

    概述: 面向对象第一单元的作业是三次难度依次递增的多项式求导.第一次作业是仅包含带符号整数和幂函数的多项式求导,例如:-1+xˆ233-xˆ06:第二次是在前面的基础上增加了三角函数的求导,例如:-1 ...