分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

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

发布时间:2023-09-06 01:52责任编辑:彭小芳关键词: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个阶段:

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

一张图以蔽之:

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

通过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事件冒泡机制+阻止默认事件 讲解了

原文地址:https://www.cnblogs.com/code-klaus/p/8998984.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved