当前位置:首页 > 日记 > 正文

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

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来实现阻止事件进一步传播。

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

相关文章

Angular.JS中指令ng-if、ng-show/n

Angular.JS中指令ng-if、ng-show/n

使用教程,指令,电脑软件,Angular,JS,前言最近在做一个项目改版,第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的,感觉非常的新鲜。有几个指令是经常用到的,这里由于这几个有点共性,所以一起介绍一下ng-if,ng…

ES6新特性三: Generator | 生成器函

ES6新特性三: Generator | 生成器函

函数,新特性,生成器,详解,电脑软件,本文实例讲述了ES6新特性三: Generator(生成器)函数。分享给大家供大家参考,具体如下:1. 简介① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改变。② 写法:function* f(…

word2007设置密码保护的两种方法

word2007设置密码保护的两种方法

设置,方法,密码保护,两种,电脑软件,  对于自己重要的word文档,肯定是需要加密保护更好。那么,对于word2007,怎么设置密码保护呢?那么下面就由小编给大家分享下word2007的技巧,希望能帮助到您。设置密码保护方法一:  步骤一:首先,我们先打开我…

PPT2010转换为视频的方法是什么

PPT2010转换为视频的方法是什么

方法,转换为,视频,电脑软件,  随着PPT制作越来越精美化、动感化和多媒体化,人们自然希望能把它完美转化成视频,发给客户自行观看、放在网页播放或者在DVD里播放。以下是小编为您带来的关于PPT2010转换为视频的方法,希望对您有所帮助。PPT201…

excel if函数等于条件的筛选方法ex

excel if函数等于条件的筛选方法ex

函数,条件,筛选,方法,电脑软件,  在Excel中,IF函数最为常用,IF函数可以帮用户筛选出合适的数据进行显示,现在请欣赏小编带来的excel if函数等于条件的筛选方法。希望对你有帮助!excel if函数等于条件的筛选方法·在EXCEL2003中 函数 IF…

2007版ppt怎么将转换为格式

2007版ppt怎么将转换为格式

方法,图片格式,转换为,转成,格式,  如何将ppt2007转换成图片格式呢?其实PPT里面有个另存为选项,对于新手来说熟练运用ppt还是有一定难度,怎么办?下面小编就为你提供ppt2007如何转成图片格式的方法,欢迎大家来到学习ppt使用技巧。ppt2007转成…

在Word2007文档中如何制作英文格式

在Word2007文档中如何制作英文格式

文档,英文,格式,电脑软件,  如果用户需要给国外的亲朋好友写信,可以使用Word2007提供的信封制作功能制作标准格式的英文信封,编辑好文档后就可以直接发送了。以下是小编为您带来的关于在Word2007文档中制作英文格式信封,希望对您有所帮助。…

VueJS如何引入css或者less文件的一

VueJS如何引入css或者less文件的一

文件,电脑软件,VueJS,css,我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢?首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即require('./assets/css/main.less');这时,我们会抛出…

word如何将文字转换成word将文字转

word如何将文字转换成word将文字转

文字,方法,转换成,如何将,图片,  在使用word的时候有一个非常有有趣的功能,就是能将文字变成图片,例如,你要将文字猫变成图片猫,然后文章中所有的文字猫都变成了图片猫,是不是觉得像变魔术一样很神奇,那就跟我来学习吧。word将文字转换成图片的…

浅谈jQuery框架Ajax常用选项

浅谈jQuery框架Ajax常用选项

选项,框架,浅谈,常用,电脑软件,json(JavaScript Object Notation):轻量级的数据交换(交换的数据转换成与平台无关的)格式java对象转换成json字符串,使用ObjectMapper类的writeValueAsString(java对象);将json字符串或者json对象组成的数组…

JavaScript实现父子dom同时绑定两

JavaScript实现父子dom同时绑定两

点击事件,绑定,冒泡,方法,执行顺序,本文实例讲述了JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法。分享给大家供大家参考,具体如下:事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个…

qq安全中心申诉进度教程

qq安全中心申诉进度教程

安全中心,教程,方法,进度,电脑软件,  我提交了QQ申诉申请,我怎么知道申诉进度怎么样呢?怎么查询呢?还有如果我申诉成功了接来该怎么做呢?今天小编给你分享一下,欢迎阅读。qq安全中心申诉进度的方法由于提交申诉后你的QQ无法登录了,因此需…