经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js事件流、事件委托与事件阶段实例详解
来源:jb51  时间:2022/2/14 13:36:02  对本文有异议

前言

JavaScript 与 HTML 的交互是通过事件实现的,事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器(也叫处理程序)订阅事件。本文总结一下 JS 中的事件相关知识点。

1、事件流

HTML 中与 javascript 交互是通过事件驱动来实现的,例如鼠标点击事件 onclick、页面的滚动事件 onscroll 等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。

事件流描述的是从页面中接收事件的顺序,DOM2 级事件流包括下面几个阶段。事件捕获阶段、处于目标阶段、事件冒泡阶段

(1)事件捕获的意思是最不具体的节点应该最先收到事件,而最具体的节点应该最后收到事件。比如点击页面的一个div触发的元素顺序分别是document、html、body、div。可以在该阶段拦截事件发生

(2)处于目标阶段即捕获到实际的目标元素阶段,

(3)冒泡阶段事件方向传播,从div目标元素传播至document元素

2、事件处理程序

事件处理程序指为响应点击,加载,鼠标等操作而调用的函数。有很多方式指定事件处理程序。

a、通过html元素属性指定事件处理程序

  1. <input type="button" value="点我" onclick="console.log('我被点击了')">

b、DOM0 事件处理程序,通过js获取操作对象元素,并指定事件处理程序

  1. <button id="btn">点我</button>
  2. <script>
  3. var btn = document.getElementById("btn")
  4. btn.onclick = function () {
  5. console.log("我被点击了");
  6. }
  7. </script>

c、DOM2 事件处理程序

addEventListener 和 removeEventListener() 是 DOM2 级事件新增的指定事件处理程序的操作,addEventListener方法都接收 3 个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。IE 只支持事件冒泡。通过 addEventListener() 添加的事件处理程序只能使用 removeEventListener() 并传入与添加时同样的参数来移除。

  1. <button id="btn">点我</button>
  2. <script>
  3. var btn = document.getElementById("btn")
  4. btn.addEventListener("click", function () {
  5. console.log("我被点击了");
  6. },false)
  7. </script>

d、IE 事件处理程序

IE 实现了与 DOM 类似的方法,即 attachEvent() 和 detachEvent() 。这两个方法接收两个同样的参数:事件处理程序的名字和事件处理函数。

  1. <button id="btn">点我</button>
  2. <script>
  3. var btn = document.getElementById("btn");
  4. btn.attachEvent("onclick", function () {
  5. console.log("我被点击了");
  6. });
  7. </script>

在 IE中使用 attachEvent() 与使用 DOM0方式的主要区别是事件处理程序的作用域。使用 DOM0方式时,事件处理程序中的 this 值等于目标元素。而使用 attachEvent() 时,事件处理程序是在全局作用域中运行的,因此 this 等window。

使用 attachEvent() 添加的事件处理程序将使用 detachEvent() 来移除,只要提供相同的参数。

3、事件对象

a、DOM事件对象event

在 DOM 合规的浏览器中, event 对象是传给事件处理程序的唯一参数。

  1. <button id="btn">点我</button>
  2. <script>
  3. var btn = document.getElementById("btn")
  4. btn.addEventListener("click", function (event) {
  5. console.log(event);
  6. }, false)
  7. </script>

打印如下:

b、IE 事件对象

与 DOM 事件对象不同, IE 事件对象可以基于事件处理程序被指定的方式以不同方式来访问。

如果通过DOM方式添加事件处理程序,则event 对象只是 window 对象的一个属性

  1. <button id="btn">点我</button>
  2. <script>
  3. var btn = document.getElementById("btn")
  4. btn.addEventListener("click", function () {
  5. let event = window.event;
  6. console.log(event);
  7. }, false)
  8. </script>

如果通过IE事件处理程序,则 event对象会作为唯一的参数传给处理函数

  1. <button id="btn">点我</button>
  2. <script>
  3. var btn = document.getElementById("btn")
  4. btn.attachEvent("click", function (event) {
  5. console.log(event);
  6. }, false)
  7. </script>

4、跨浏览器事件处理

  1. // 包含兼容性处理的事件处理函数
  2. const eventUtils={
  3. //添加事件
  4. addEvent:function(element,type,handler){
  5. if (elment.addEventListener) {
  6. element.addEventListener(type,handler,false)
  7. } else if(elment.attachEvent){
  8. element.attachEvent("on"+type,handler)
  9. }else{
  10. elment["on"+type]=handler
  11. }
  12. },
  13.  
  14. //移除事件
  15. removeEvent:function(element,type,handler){
  16. if(elment.removeEventListener){
  17. element.removeEventListener(type,handler,false)
  18. }else if(element.datachEvent){
  19. element.datachEvent("on"+type,handler)
  20. }else{
  21. element["on"+type]=null
  22. }
  23. },
  24. //获取事件目标元素
  25. getTarget:function(event){
  26. return event.target||event.srcElement
  27. },
  28. //获取event对象的引用,取到事件的所有信息,确保随时使用event
  29. getEvent:function(event){
  30. return event||window.event
  31. },
  32. //阻止事件(主要是事件冒泡,因为ie不支持事件捕获)
  33. stopPropagation:function(event){
  34. if (event.stopPropagation) {
  35. event.stopPropagation()
  36. } else {
  37. event.cancelBubble=true
  38. }
  39. },
  40. //取消事件的默认行为(主要ie事件对象设置returnValue为false可以取消事件默认行为)
  41. preventDefault:function(event){
  42. if (event.preventDefault) {
  43. event.preventDefault()
  44. } else {
  45. event.returnValue=false
  46. }
  47. }
  48. }

5、事件委托

简介:事件委托指的是,不在事件的发生地(直接 dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素 DOM 的类型,来做出不同的响应。

举例:最经典的就是 ul 和 li 标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在 li 标签上直接添加,而是在ul 父元素上添加。因为所有的li标签都是ul标签的后代,在li标签上触发事件时,会进行事件冒泡,必定在ul标签上接收到触发事件处理程序,通过事件对象可以判断具体是哪个li标签触发的,这样就省去了重复获取元素的代码。

好处:比较合适动态元素的绑定,新添加的子元素也会有监听函数,也可以有事件触发机制。减少整个页面所需的内存,提升整体性能

事件委托的实现

我们可以给HTMLElement对象绑定该方法delegate

  1. HTMLElement.prototype.delegate = function(type,selector,fn){
  2. this.addEventListener(type,function(e){
  3. var target = e.target,
  4. bubble = true;
  5.  
  6. while(bubble && target !== this){
  7. if (filter(this,selector,target)) {
  8. bubble = fn.call(target,e);
  9. }
  10.  
  11. target = target.parentNode;
  12.  
  13. return bubble;
  14. }
  15. });
  16.  
  17. function filter(agent,selector,target){
  18. var nodes = agent.querySelectorAll(selector);
  19. for (var i = 0; i < nodes.length; i++) {
  20. if (nodes[i] == target) return true;
  21. }
  22.  
  23. return false;
  24. }
  25. }
  26.  
  27. document.body.delegate('click','.parentNode li',function(e){
  28. console.log(e.target);
  29. });

实际情况下,有些事件 blurchangefocus 等事件,是不支持事件冒泡的。这里并没有做判断。

总结

到此这篇关于js事件流、事件委托与事件阶段的文章就介绍到这了,更多相关js事件流、事件委托与事件阶段内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号