DOM事件处理有三个阶段
DOM事件处理有三个阶段:
- 捕捉阶段(capture phase):从最上层元素,直到最下层(你点击的那个target)元素。路过的所有节点都可以捕捉到该事件。
- 命中阶段(target phase):如果该事件成功到达了target元素,它会进行事件处理。
- 冒泡阶段(bubbling phase):事件从最下层向上传递,依次触发父元素的该事件处理函数
在任意一个阶段的事件处理函数中,都可以通过调用event.stopPropagation
来中断事件流,后续的阶段将不会被调用。
其实return false
做了三件事:
stopPropagation()
:阻止事件传播preventDefault()
:禁止浏览器默认行为,比如<a>
标签被点击后页面会跳转- 立即结束当前函数并返回,当然。
DOM事件处理有三个阶段的更多相关文章
- 彻底搞懂DOM事件处理(零)引子
通过合理使用JavaScript,可以为网站用户提供更好的交互体验.这主要是因为JavaScript能够让网站对用户的各种操作及时做出"反馈".这种"反馈"使网 ...
- DOM事件处理函数
事件 JavaScript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或是处理程序)来预定事件,以便事件发生时执行相应的代码 IE9. ...
- 前端菜鸟学习之DOM事件处理
一.事件处理程序 1.DOM0级事件处理程序:就是将一个函数赋值给一个事件处理程序属性,至今仍为现代所有浏览器所支持,主要得益于其跨浏览器的优势,要使用DOM0级事件 首先要得到操作对象的引用,具体实 ...
- javascript——事件处理模型(DOM 和 IE)
javascript的事件处理模型分为 DOM事件处理模型和 IE事件处理模型. 一.DOM事件流模型 DOM事件流分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:自上而下,由document ...
- webkit事件处理
1,概述 原文地址:http://blog.csdn.net/awebkit/article/details/8493716 浏览器处理事件一般有两个过程,捕获过程和冒泡过程,这是由addEventL ...
- 你不知道的JavaScript-- 事件流与事件处理
转载:http://blog.csdn.net/i10630226/article/details/48970971 1. 事件处理 1.1. 绑定事件方式 (1)行内绑定 语法: //最常用的使用方 ...
- DOM 事件深入浅出(一)
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- 【repost】JavaScript 事件模型 事件处理机制
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- [转]理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
随机推荐
- JavaScript函数小结
JS基础知识 /********************** 1:基础知识 1 创建脚本块 1: <script language=”JavaScript”> 2: JavaScript ...
- angularJS商品购物车案例
<!DOCTYPE html> <html ng-app="shopping"> <head lang="en"> < ...
- Silverlight页面通过继承扩展实现
在Silverlight中有些项目对UserControl重新做了封装基类,如PageBase,要求项目中每个页面都要从PageBase派生,但是过程比较坎坷,本文针对这个功能点的实现以及实现过程中遇 ...
- jade模板引擎的基本使用
jade和ejs很大的不同是通过缩进的方式解决嵌套和成对标签的问题,比较适合有代码洁癖的同学. jade官方有基础的语法: http://naltatis.github.io/jade-syntax- ...
- 纯Python包发布setup脚本编写示例
如果你有多个模块需要发布,而它们又存在于多个包中,那么指定整个包比指定模块可能要容易地多.即使你的模块并不在一个包内,这种做法也行的通:你可以告诉Distutils从根包(root package)处 ...
- .Net 文件名补位
文件以name-1.pdf.name-2.pdf.name-3.pdf......name-80.pdf命名,传到数据库中排序混乱:1之后为10,2之后是20,所以要把文件名中的数字补位变成相同位数, ...
- 1.后台如何获取 jquery get方式的ajax的参数
1. update.jsp 1.2 默认是dataType是json getJSON: function( url, data, callback ) { return jQuery.get(url, ...
- 怎么使用git来管理项目版本?
怎么使用git来管理项目版本和存放代码? 作者:rongfangliu 转载请注明出处:http://www.cnblogs.com/rongfangliu/p/howuseGit.html 工具: ...
- NSNumber,NSValue和NSData
我们在编码中,很多时候需要将C里面原生的数据封装成对象,这样可以用NSDictionary或者NSArray来存取访问.尤其是一些做适配的情况下,这种封装是不可避免的.Objective-C提供了不少 ...
- php数组遍历
<?php $arr = array('a','b','c','d','e','f'); //for语句只能遍历索引数组 for($i = 0; $i < 6; $i++){ echo $ ...