温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Javascript 中怎么实现事件流和事件委托

发布时间:2021-07-01 17:41:52 来源:亿速云 阅读:151 作者:Leah 栏目:web开发

今天就跟大家聊聊有关Javascript 中怎么实现事件流和事件委托,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

javascript 事件流和事件委托

javascript和HTML之间的交互是通过事件实现的。

事件就是用户或浏览器自身执行的某种动作,比如点击、加载,鼠标移入移出等等。

DOM事件流

DOM(文档对象模型)结构是一个树形结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流。

事件流描述的是从页面中接收事件的顺序。

事件冒泡:IE的事件流叫 事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。自下而上。

事件捕获:是不太具体的节点先接收到事件,而最具体的节点应该最后接收到事件。自上而下。

DOM事件流:包括三个阶段:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 事件捕获阶段:该阶段的主要作用是捕获截取事件

  3. 处于目标阶段:一般地,该阶段具有双重范围,即捕获阶段的结束,冒泡阶段的开始;

  4. 事件冒泡阶段:主要作用是将目标元素绑定事件执行的结果返回给浏览器,处理不同浏览器之间的差异,主要在该阶段完成

Javascript 中怎么实现事件流和事件委托

DOM事件流

事件对象 

在触发DOM上的某个事件时,会产生一个事件对象event,该对象包含所有与事件有关的信息。

var btn = document.getElementById("juejin") btn.onclick = function(event){   console.log(event)  }
  • 常用属性:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. target 事件的目标

  3. currentTarget 绑定事件的元素,与 'this' 的指向相同

  4. stopPropagation() 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法

  5. stopImmediatePropagation() 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增)

  6. preventDefault() 取消事件的默认行为,比如点击链接跳转。如果 cancelable 是 true,则可以使用这个方法

  7. type 被触发的事件类型

  8. eventPhase 调用事件处理程序的阶段:0表示这个时间没有事件正在被处理,1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段

document.body.onclick = function(event){     alert(event.currentTarget === document.body); //true     alert(this === document.body); //true     alert(event.target === document.getElementById("myBtn")); //true };

事件类型

1.UI (User Interface) 事件,当用户与页面上的元素交互时触发

  • load、unload、error、select、resize、scroll

2.焦点事件,在页面获得或失去焦点时触发

  • blur、focusout 失去焦点

  • focus、focusin 获得焦点

3.鼠标事件,用户通过鼠标在页面执行操作时触发

  • click、dbclick、mousedown、mouseup

  • mouseenter、mouserleave

  • mousemove

  • mouseout、mouseover

点击和双击事件触发的顺序如下

  • mousedown

  • mouseup

  • click

  • mousedown

  • mouseup

  • dbclick

4.滚轮事件,当使用鼠标滚轮操作时触发

  • mousewheel

5.文本事件,在文档中输入文本时触发

  • textInput 当用户在可编辑区域中输入字符时,就会触发这个事件

6.键盘事件,当用户通过键盘在页面上执行操作时触发

  • keydown 按下键盘任意键时触发,不松开,则一直触发

  • keypress 按下键盘上的字符键时触发,不松开,则一直触发

  • Keyup 用户释放键盘上的建时触发

7.HTML5事件

  • contextmenu 事件:单价鼠标右键可以调出上下文菜单

  • beforeunload 事件:在浏览器卸载页面之前触发

  • DOMContentLoad 事件:在形成完整的DOM树之后就会触发。

  • readystatechange 事件:提供与文档加载状态有关的信息

  • pageshow和pagehide 事件:页面显示和隐藏时触发 ?MDN传送门

  • hashchange 事件 : hash改变时触发

事件委托

事件委托是为了解决事件处理程序过多造成的内存和性能问题。那么什么是事件委托呢?

就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

有什么作用?

  • 支持为同一个DOM元素注册多个同类型事件

  • 可将事件分为事件捕获和事件冒泡

用addEventListener(type,listener,useCapture)实现

  • type: 必须,String类型,事件类型

  • listener: 必须,函数体或者JS方法

  • useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段

<div id="div1"></div>  window.onload = function(){     let div1 = document.getElementById('div1');     div1.addEventListener('click',function(){         console.log('打印第一次')     })     div1.addEventListener('click',function(){         console.log('打印第二次')     }) }

事件委托的优点

  • 可以大量节省内存占用,减少事件注册

  • 可以实现当新增子对象时无需再次对其绑定(动态绑定事件)

使用事件委托注意事项

使用“事件委托”时,并不是说把事件委托给的元素越靠近顶层就越好。

事件冒泡的过程也需要耗时,越靠近顶层,事件的”事件传播链”越长,也就越耗时。

如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失。

看完上述内容,你们对Javascript 中怎么实现事件流和事件委托有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI