DOM事件处理有三个阶段

DOM事件处理有三个阶段:

  1. 捕捉阶段(capture phase):从最上层元素,直到最下层(你点击的那个target)元素。路过的所有节点都可以捕捉到该事件。
  2. 命中阶段(target phase):如果该事件成功到达了target元素,它会进行事件处理。
  3. 冒泡阶段(bubbling phase):事件从最下层向上传递,依次触发父元素的该事件处理函数

在任意一个阶段的事件处理函数中,都可以通过调用event.stopPropagation来中断事件流,后续的阶段将不会被调用。

其实return false做了三件事:

  1. stopPropagation():阻止事件传播
  2. preventDefault():禁止浏览器默认行为,比如<a>标签被点击后页面会跳转
  3. 立即结束当前函数并返回,当然。
时间: 2024-10-08 09:30:18

DOM事件处理有三个阶段的相关文章

关于dom 事件冒泡、捕获 dom事件三个阶段

本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段 起因 温故了一下我的<JavaScript高级程序设计>的时候,翻到DOM事件那一章,(说实话,现在无论是什么框架你都离不开操作DOM啊,毕竟这是你展示的最基本元素,就像人的细胞).想起了dom事件流原理,好多人不明白,只知道click mouseout等实用场景,真要理解和更进一步的前端是要必须:理论+实践 并行的. 当然,DOM事件所囊括的知识较为庞杂,所以本文专注与自己学习时所碰到的难点,DOM事件流. 流 流的概念,在现今的

【JS】DOM事件模型

DOM事件模型主要包含4个方面的内容,分别是: 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下: 首先,什么是DOM?文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API).一般的,支持Javascript的所有浏览器都支持DOM. 在DOM眼中,HTML跟XML一样是一种树形结构的文档,<html>是根(root)节点,<head>.<title>.<body>是<

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端求职面试经历,其中提到了面试官会考察手写一个简单的事件模型: "如果上述都ok的话,那么极有可能要求让你[实现事件模型],即写一个类或是一个模块,有两个函数,一个bind一个trigger,分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数." 如果了解观察者模式,那么事件模型应该不算太难.本着深入钻研的精神,我试着来

JavaScript学习--Item35 事件流与事件处理

1. 事件处理 1.1. 绑定事件方式 (1)行内绑定 语法: //最常用的使用方式 <元素 事件="事件处理程序"> (2)动态绑定 //结构+样式+行为分离的页面(html+css+js事件) 语法: 对象.事件=事件处理程序 行内绑定和动态绑定的重要区别: 以上程序是不可用的,点击div时,执行test函数,这时,test中的this表示window对象 因为: 我们定义test函数,实际上相应于在window对象下定义了test属性 test(); -> 相当

DOM事件模型

DOM 首先,DOM全称是Document Object Model,即文档对象模型.DOM是W3C的标准,定义了访问 HTML 和 XML 文档的标准. “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” DOM事件 DOM使Javascript有能力对HTML上的事件做出反应.这些事件包括鼠标键盘的点击事件.移动事件以及页面中内容的变化等.HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要

【repost】JavaScript 事件模型 事件处理机制

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. 今天的事件 在漫长的演变史,我们已经告

DOM 事件深入浅出(一)

在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文就将带大家深入浅出地了解DOM事件的那些属性和方法. 首先在介绍DOM事件之前我们先来认识下DOM的不同级别.针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级别与DOM事件 DOM级别一共可以分为4个级别:DOM0级,DOM1级,DOM2级和 DOM3级,而DOM事件分为3个级

理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();

原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如

【转】JavaScript中的事件处理

原文:http://www.cnblogs.com/binyong/articles/1750263.html 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript