JavaScript事件的几个细节
JavaScript事件的几个细节
一、是捕获还是冒泡
昨天被问到一个问题:事件流有几个阶段?在这几个阶段中,事件一共发生几次?
问题很简单,但对于事件一共发生几次有点乱。总觉得捕获也能触发事件、冒泡也能触发事件,可事件确实只发生了一回啊!所以写篇文章梳理一下,对此很清楚的同学可以跳过了。
子问题1:事件流有几个阶段?
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
1. IE9以前的IE浏览器都只支持后两个阶段,也就是处于目标阶段和事件冒泡阶段。这个顺序很好理解,在嵌套层次最深的节点上接收事件,然后逐级向上传播到父级节点。
2. 早期的Netscape团队提出的另一种事件流叫做事件捕获。即顶层节点应该更早的接收事件,逐步传播到嵌套层次最深的节点,也就是事件捕获阶段和处于目标阶段
3. 现代浏览器如chrome、ff、IE9等支持整个三个阶段。
子问题2:在这几个阶段中,事件一共发生几次?
事件发生时,“DOM2级事件”的事件流都会经历三个阶段(捕获->处于目标->冒泡),但不是每个阶段都能发生事件。对于某个节点,addEventListener方法第三个参数如果为true,则事件发生在捕获阶段;如果为false,则事件发生在冒泡阶段。所以事件只发生了一次!
如果外层节点想在捕获和冒泡阶段都发生事件,那就注册两次吧。
附带一句,“DOM0级事件”(elem.onclick = function () {…})也是存在事件冒泡的。
二、事件的注册顺序
在同一个节点上注册多个事件,
使用addEventListener,发生先后顺序依据事件添加的顺序;
使用attachEvent,发生先后顺序是反过来的,后注册的先发生。
三、移除事件
移除事件的方法removeEventListener与detachEvent针对事件发生时的同一个回调函数,所以注册事件时使用匿名函数的情况是不能被移除的。
JavaScript事件的几个细节的更多相关文章
- JavaScript事件机制——细思极恐
JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...
- 重温javascript事件机制
以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...
- JavaScript事件代理和委托(Delegation)
JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...
- JavaScript事件概览
JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript 事件
事件 概念:事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触 ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- 总结JavaScript事件机制
JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...
随机推荐
- 【iOS发展-70】点菜系统案例:使用文本框inputView和inputAccessoryView串联UIPickerView、UIDatePicker和UIToolBar
(1)效果 (2)先在storyboard中设计界面,然后源码(直接在ViewController中码) #import "ViewController.h" @interface ...
- linux_操作基本语句
总结一下常用的和不常用的linux命令,有些命令不常用的,是要反复去看才能记住的. 1.最基础的ls命令,相当于win下的dir命令,常用参数有 -a,-l 2.cd命令,cd到一个目录,跟win下的 ...
- DevExpress中获取RichTextEdit中RichEditControl的两种方式
方式一: var rte = sender as RichTextEdit; control = rte.Controls[] as RichEditControl; 方式二: PropertyInf ...
- [Phonegap+Sencha Touch] 移动开发34 gem安装compass,不编译scss,怎么办?
很多人已经发现,今天,该命令 "gem install compass" 安装compass,正在使用 "compass compile" 编scss的时间将报 ...
- SSH—Struts(三)—跑步者(Action)
如已经描述Struts其基本原理和控制器ActionServlet,根据一个请求通过流ActionServlet之后就要到达Action类中做详细的处理了.ActionServlet通过ActionM ...
- ASP.NET Web Service中使用Session 及 Session丢失解决方法 续
原文:ASP.NET Web Service中使用Session 及 Session丢失解决方法 续 1.关于Session丢失问题的说明汇总,参考这里 2.在Web Servcie中使用Sessio ...
- The operator == is undefined for the argument type(s) int, null
package cn.edu.shu.web.test; public class TestInteger { public static void main(String[] args) { /** ...
- avalonjs 1.3.7发布
avalonjs 1.3.7发布 又到每个月的15号了,现在avalon已经固定在每个月的15号发布新版本.这次发布又带来许多新特性,让大家写码更加轻松,借助于“操作数据即操作DOM”的核心理念与双向 ...
- leetcode第36题--Sudoku Solver
题目: Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated b ...
- html5 Canvas画图3:1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...