美文网首页
JS中的事件机制

JS中的事件机制

作者: __HAPPINESS_yh | 来源:发表于2018-04-10 17:49 被阅读25次

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对象就会被销毁

相关文章

  • JavaScript的事件机制详解

    【js事件详解】js事件封装函数,js跨浏览器事件处理机制 一、事件流 事件流描述的是从页面中接受事件的顺序。IE...

  • 事件处理机制

    Node.js事件触发对象有哪些方法? 详细讲讲Node.js事件机制是怎样的? Node.js事件机制和Java...

  • js事件深入学习

    JavaScript的事件机制包含,事件绑定、事件监听、事件委托(事件代理)等 js中的事件流 ① .冒泡:当下级...

  • JS中的事件机制

    DOM事件操作(监听和触发),都定义在EventTarget接口,Element节点,document节点和win...

  • js中的事件机制

    一、为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做...

  • javascript 中的事件机制

    js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...

  • js事件机制

    一、js事件机制三个阶段:事件捕获、事件目标处理函数、事件冒泡 js中事件执行的整个过程称之为事件流,分为三个阶段...

  • 20、jQuery 事件机制

    20、jQuery 事件机制 原生js事件与jQuery事件: (1)用原生的js给div注册事件 原生js注册相...

  • 事件循环机制

    事件循环(evenloop) 事件循环机制是宿主环境提供的。js中处理异步,增加了任务队列的概念(你不知道的js中...

  • # JavaScript 事件这回事儿

    NARUTOne引言:js的事件机制在web开发中的出镜率是很高,但是要想给事件机制拍出高颜值的效果,还是很难的。...

网友评论

      本文标题:JS中的事件机制

      本文链接:https://www.haomeiwen.com/subject/wqvnhftx.html