JS中的事件机制

DOM事件操作(监听和触发),都定义在EventTarget接口,Element节点,document节点和window对象,都部署了这个接口。

一. 事件传播的三个阶段

  1. 捕获阶段 从window对象传导到目标节点
  2. 目标阶段 在目标节点上触发
  3. 冒泡阶段 从目标节点传导回window对象

事件传播的最上层对象是window,接着依次是document , html (document.documentElement)和body(document.body)

如果< body >元素中有一个< div >元素,点击该元素,事件的传播顺序,在捕获阶段依次为 window ,document, html ,body,div 在冒泡阶段依次为div,body, document,window

二 . 事件的代理

由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件,这种方法叫做事件的代理,这样做的好处是,只要定义一个监听函数,就能处理多个子节点的事件,而且以后添加子节点,监听函数依然有效。

父节点是通过event.target来找对应的子节点的(事件处理程序中的this值始终等于currentTarget的值,指向的是绑定到的那个元素)

三. 事件的对象

事件发生以后,会生成一个事件对象,作为参数传给监听函数,浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。

只有在事件处理程序执行期间,event对象才会存在,一旦事件处理程序执行完毕,event对象就会被销毁

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生...
    cbw100阅读 2,751评论 0 8
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,543评论 1 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,074评论 1 10
  • 很早就想好好总结一下事件机制了,终于有动力写了。文章分为上下2部分JS和HTML的交互是通过事件来实现的。事件就是...
    一枚靠脸吃饭的程序员阅读 350评论 0 2
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 1,807评论 0 1