JS传播事件、取消事件默认行为、阻止事件传播详解

1.事件处理程序的返回值 

通常情况下，返回值false就是告诉浏览器不要执行这个事件相关的默认操作。例如，表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单，再如a标签的onclick事件处理程序通过返回false阻止跳转href页面。类似地，如果用户输入不合适的字符，输入域上的onkeypress事件处理程序能通过返回false来过滤键盘输入。 
      事件处理程序的返回值只对通过属性注册的处理程序才有意义。

2.调用顺序

文档元素或其他对象可以为指定事件类型注册多个事件处理程序。当适当的事件发生时，浏览器必须按照如下规则调用所有的事件处理程序：

通过设置对象属性或HTML属性注册的处理程序一直优先调用。
使用addEventListener()注册的处理程序按照它们的注册顺序调用。
使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序

3.事件传播

　　在调用在目标元素上注册的事件处理函数后，大部分事件会“冒泡”到DOM树根。调用目标的父元素的事件处理程序，然后调用在目标的祖父元素上注册的事件处理程序。这会一直到Document对象，最后到达Window对象。

　　发生在文档元素上的大部分事件都会冒泡，值得注意的例外是focus、blur和scroll事件。文档元素的load事件会冒泡，但它会在Document对象上停止冒泡而不会传播到Window对象。只有当整个文档都加载完毕时才会触发Window对象的load事件。

4.取消事件默认行为、阻止事件传播

在支持addEventListener()的浏览器中，可以通过调用事件对象的preventDefault()方法取消事件的默认操作。IE9之前的IE中，可以通过设置事件对象的returnValue属性为false达到同样的效果。下面一段代码是结合三种技术取消事件：

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

取消事件相关的默认操作只是事件取消中的一种，我们也能取消事件传播。在支持addEventListener()的浏览器中，可以调用事件对象的stopPropagation()方法以阻止事件的继续传播。如果在同一对象上定义了其他处理程序，剩下的处理程序将依旧被调用，但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用。

IE9之前的IE不支持stopPropagation()方法，而是设置事件对象cancelBubble属性为true来实现阻止事件进一步传播。

好了以上就是小编为大家整理的全部内容啦，希望对大家有所帮助~

赞 (0)

相关推荐

  • Javascript Event（事件）的传播与冒泡

    Javascript Event（事件）的传播与冒泡

    特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome.safari.opera.firefox都支持cancelBubble属性. Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能

  • 关于捕获用户何时点击window.onbeforeunload的取消事件

    Detecting When The User Has Clicked Cancel One of the things you may want to do is to be notified when the user clicks cancel, aborting a page unload. Unfortunately there's no way to be immediately notified. The best you can do is to set a unique glo

  • 阻止事件(取消浏览器对事件的默认行为并阻止其传播)

    取消浏览器对事件的默认行为(响应)(比如<a>标签的跳转等)并停止事件的继续传播. 实现代码 复制代码 代码如下: function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } }

  • JS传播事件、取消事件默认行为、阻止事件传播详解

    1.事件处理程序的返回值  通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的onclick事件处理程序通过返回false阻止跳转href页面.类似地,如果用户输入不合适的字符,输入域上的onkeypress事件处理程序能通过返回false来过滤键盘输入.        事件处理程序的返回值只对通过属性注册的处理程序才有意义. 2.调用顺序 文档元素或其他对象可以为指定事件类

  • flex中event.preventDefault()方法取消事件的默认行为

    先看一个例子: 复制代码 代码如下: <mx:DataGrid id= "songList" dataProvider= "{songDB}" width= "100%" height= "100%" editable= "true" itemEditEnd="itemEditEndHandler(event)" itemEditBeginning= "itemEditB

  • js如何取消事件冒泡

    复制代码 代码如下: function stopBubble(e) { //如果传入了对象,那么就是非IE浏览器,才用W3C标准方法 if (e || e.stopPropagation) { e.stopPropagation(); } else { //才用IE的停止事件冒泡的方法 window.event.CancelBubble = true; } }

  • jquery取消事件冒泡的三种方法(推荐)

    1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: $("form").bind( "submit", function() { return false; } ); 2.通过使用 preventDefault() 方法只取消默认的行为. jQuery 代码: $("form").bind( "submit", function(event){ event.preventDefault(); } );

  • JavaScript中使用stopPropagation函数停止事件传播例子

    JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播.如以下例子: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>stopPropagation()使用 - 琼台博客</title> </head> <body> <button&

  • JavaScript实现事件的中断传播和行为阻止方法示例

    事件传播 MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素.这种自底向上的事件传播方式称为"事件冒泡",也就是事件传播. 如何中断事件的传播? stopPropagation() w3c取消冒泡 cancleBubble = true IE取消冒泡 取消事件默认效果: returnValue = false IE 取消事件效果 defaultPrevent() w3c取消事件效

  • vc控制台程序关闭事件时的处理方式及注意点详解

    百度可以找到很多关于这个问题解决的方法 关键控制台API函数:SetConsoleCtrlHandler 在支持C++ 11以上的编译器中,你可以这么做. SetConsoleCtrlHandler([](DWORD fdwctrltype)->BOOL { if (fdwctrltype == CTRL_CLOSE_EVENT) { // 你的善后代码... return TRUE; } return FALSE; }, TRUE); 最初这么做是很舒服的,但之后发现了问题: Windows控

  • Vue.js 2.x之组件的定义和注册图文详解

    前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 模块化和组件化的区别 模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用 全局组件的定义和注册 组件Component是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 全局组件的定义和注

  • 国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    目录 1. 页面布局 2. 图片上传和展示 3. 初始化画布 4. 切换模板 5. 输出图片 这里用到的技术: HTML+ CSS+ JavaScript: download.js库: fabric.js库: 先上体验链接:g.cuggz.com/.​ 注:可以点击上方的连接进行使用,不过我的域名被TX屏蔽了,还在申诉中,所以无法在QQ.微信中打开,需要复制链接到浏览器进行查看.使用.​ 下面是这个小工具的截图: 1. 页面布局 这部分不多说,直接上代码: <div class="wrap

  • Node.js实战之Buffer和Stream模块系统深入剖析详解

    Node.js实战之Buffer和Stream模块系统深入剖析详解

    目录 正文 写入缓冲区 从流中读取数据 管道流 链式流 模块系统 正文 JavaScript语言本身只有字符串数据类型,没有二进制数据类型. 但是,在处理TCP流或文件流时必须使用二进制数据. 因此,在node JS中,定义了一个缓冲区类来创建用于存储二进制数据的缓冲区. const buf = Buffer.from('runoob', 'ascii'); 在node JS中,缓冲区类是与node内核一起发布的核心库. 缓冲库是node JS带来的一种存储原始数据的方法,它允许节点JS. co

  • JS前端同源策略和跨域及防抖节流详解

    目录 引言 jQuery中JSONP的实现 防抖[重要] 缓存搜索的列表 1 定义全局缓存对象 2:将搜索结果存储到缓存对象中 3优先从缓存中获取搜索列表 节流[重点] 防抖和节流的区别 引言 协议,域名,端口相同,就具有相同的源 同源策略:浏览器提供的一个安全策略 跨域的出现原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互 解决跨域由两种方式:JSONP, CORS JSONP: 只支持GET请求 通过script标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • video.js 实现视频只能后退不能快进的思路详解

    主要思路是点击进度条需要获取拖动前的时间点,我用mouseup事件去处理的,获得到了oldTime 就好办,然后根据需求限制拖动快进快退,因为项目允许回看,不允许快进,所以得记录maxTime,记录用户正常情况观看视频最大的那个时间点,不允许超过maxTime var isMousedown = false; var oldTime=0,newTime=0,maxTime=0; //拖动进度条会先执行这个事件 $(".vjs-progress-holder").mouseup(func

  • Node.js基础入门之回调函数及异步与同步详解

    Node.js基础入门之回调函数及异步与同步详解

    目录 回调函数 1. 什么是回调函数? 2. 回调函数实现机制 3. 回调函数用途 4. 回调函数示例 异步与同步 1. 什么是异步与同步? 2. 同步示例 3. 异步示例一 4. 异步示例二 异步的实现 1. 回调函数的同步示例 2. 异步事件示例 3. 异步示例截图 Promise基础 1. 什么是Promise ? 2. Promise特点 3. 异步的缺点 4. Promise保证异步顺序 经过前面两天的学习,已经对Node.js有了一个初步的认识,今天继续学习其他内容,并加以整理分享,

  • JS中call/apply、arguments、undefined/null方法详解

    JS中call/apply、arguments、undefined/null方法详解

    a.call和apply方法详解 -------------------------------------------------------------------------------- call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指

  • JS写XSS cookie stealer来窃取密码的步骤详解

    JS写XSS cookie stealer来窃取密码的步骤详解

    JavaScript是web中最常用的脚本开发语言,js可以自动执行站点组件,管理站点内容,在web业内实现其他有用的函数.JS可以有很多的函数可以用做恶意用途,包括窃取含有密码等内容的用户cookie. Cookie是站点请求和保持特定访问页面的信息.Cookie含有访问的方式.时间.用户名密码等认证信息等.当用户访问给定站点时,必须使用cookie:如果攻击者可以拦截cookie,就可以利用cookie窃取用户的一些信息.对某个特定的域名,使用JS可以保存或修改用户的cookie.也就是说,

随机推荐