关于javascript事件机制的理解及事件监听的封装

lykops 发布于2019-08-20 16:54 / 3044人阅读

摘要：说到事件机制首先要说一下事件模型原始事件模型在原始事件模型中，事件是不会传播，只是触发立即执行，函数会作为元素的属性被监听。标准函数绑定其中是否绑定在捕获阶段，表示采取捕获方式，表示采取冒泡方式。

说到事件机制首先要说一下事件模型

1.原始事件模型

 在原始事件模型中，事件是不会传播，只是触发立即执行，函数会作为元素的属性被监听。
 这种方式和这种方式document.querySelector(".box");
 这种时间模型有着明显的缺点：同一事件无法绑定多个，无法传播不能应用事件委托.

2.DOM2模型即2级DOM事件模型

w3c规定的标准事件模型，高版本浏览器基本遵循着一标准（gtmd ie）
事件模型中一次事件包含3个过程

事件捕获阶段：事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。
（什么捕获，神奇的ie我是不知道，你说什么反正我是听不到的，哥是最屌的，gtmd ie）ie低版本没有捕获

事件处理阶段：事件到达目标元素,执行目标元素的事件处理函数.

事件冒泡阶段：事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。

w3c标准函数绑定 function addEventListener(string eventFlag, function eventFunc,
useCapture)
其中useCapture是否绑定在捕获阶段，true表示采取捕获方式，false表示采取冒泡方式。

    
    
    


    
        
    

节点既绑定了冒泡事件也绑定了捕获事件，此时的执行顺序按照绑定的先后顺序执行。

因为ie用自有的attachEvent函数绑定，所以监听的时候需要做兼容，为了方便封装一下吧。

        if (element.addEventListener) {
            element.addEventListener(type, fun, false);
        }
        else if(element.attachEvent){
            element.attachEvent("on" + type, fun);
        }
        else{
            element["on" + type] = fun;
        }
    }```

最近看了惰性函数的相关，同一个应用环境中，其实只需要检测一次即可。

            if (element.addEventListener) {
                addEvent = function (type, element, fun) {
                    element.addEventListener(type, fun, false);
                }
            }
            else if(element.attachEvent){
                addEvent = function (type, element, fun) {
                    element.attachEvent("on" + type, fun);
                }
            }
            else{
                addEvent = function (type, element, fun) {
                    element["on" + type] = fun;
                }
            }
        }```
  第一次调用addEvent对浏览器做能力检测，然后重写addEvent。下次再调用的时候函数被重写，不会再做检测。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83251.html

JavaScript：彻底理解同步、异步和事件循环(Event Loop)

摘要：例如处理请求的线程处理事件的线程定时器线程读写文件的线程例如在中等等。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。事件触发时，表示异步任务完成，会将事件监听器函数封装成一条消息放到消息队列中，等待主线程执行。一. 单线程我们常说JavaScript是单线程的。所谓单线程，是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。但是实...

wenyiweb 2019-08-19 17:25 评论0 收藏0
(转)JavaScript：同步、异步和事件循环

摘要：事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。事件触发时，表示异步任务完成，会将事件监听器函数封装成一条消息放到消息队列中，等待主线程执行。一. 单线程我们常说JavaScript是单线程的。所谓单线程，是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。但是实际上还存在其他的线程。例如：处理AJAX请求的线程、处理DOM事件的线...

android_c 2019-08-20 11:41 评论0 收藏0
[译] $digest 在 Angular 中重生

摘要：但如果一个组件在生命周期钩子里改变父组件属性，却是可以的，因为这个钩子函数是在更新父组件属性变化之前调用的注即第步，在第步之前调用。原文链接：Angular.js’ $digest is reborn in the newer version of Angular showImg(https://segmentfault.com/img/remote/146000001468785...

incredible 2019-08-26 11:52 评论0 收藏0
Node - 异步IO和事件循环

摘要：它是在的基础上改进的一种方案，通过对文件描述符上的事件状态进行判断。检索新的事件执行与相关的回调几乎所有情况下，除了关闭的回调函数，它们由计时器和排定的之外，其余情况将在此处阻塞。执行事件的，例如或者。前言学习Node就绕不开异步IO，异步IO又与事件循环息息相关，而关于这一块一直没有仔细去了解整理过，刚好最近在做项目的时候，有了一些思考就记录了下来，希望能尽量将这一块的...

MyFaith 2019-08-23 17:16 评论0 收藏0
撸一个JS的事件管理模块

摘要：列举一个生活中的例子来帮助大家理解这一种模式。例子中的小明就是订阅者订阅的是饭凉了，而妈妈则是发布者将信号饭凉了发布出去。这样就不用把小明和妈妈强耦合在一起，当小明的弟弟妹妹都想在饭凉了在吃饭，只需告诉妈妈一声。关于事件在我们使用javascript开发时，我们会经常用到很多事件，如点击、键盘、鼠标等等，这些物理性的事件。而我们今天所说的我称之为事件的，是另一种形式的事件，订阅--...

harryhappy 2019-08-23 10:30 评论0 收藏0