原生js实现on与off 方法

最新推荐文章于 2023-10-02 08:19:59 发布

写个程序换个饼

最新推荐文章于 2023-10-02 08:19:59 发布

阅读量2.6k

点赞数

分类专栏：经验总结文章标签： javascript

本文链接：https://blog.csdn.net/iteye_17835/article/details/105111010

版权

本文详细介绍了如何使用原生JavaScript实现事件绑定的on和off方法，包括参数说明、实现逻辑，并探讨了完整Event对象的概念，涉及到事件捕获和冒泡阶段的选择以及事件代理。此外，还提及了前端框架的发展对前端开发的影响。

摘要由CSDN通过智能技术生成

使用过jQuery的同学，应该对事件绑定方法 .on() .off() 有一定的了解。在个人类库jTool 中实现了这两个方法，这里就来细说下原生实现方式。

实现方式

以下为个人类库jTool 中 Event 实现方式。
代码中使用到一个基础方法对象utilities ，该对象为jTool 的基础类。如果想了解更多，可以通过点击进入查看原码。

一个空壳子

首先通过一个空架子来了解下实现逻辑，核心实现在getEventObject() 方法内的包装函数

var Event = {
    // 绑定
    on: function(event, querySelector, callback, useCapture){
    	return this.addEvent(this.getEventObject(event, querySelector, callback, useCapture));
    }，
    // 解除绑定
    off: function(event, querySelector) {
    	return this.removeEvent(this.getEventObject(event, querySelector));
    },
    // 获取 jTool Event 对象
    getEventObject: function (event, querySelector, callback, useCapture){
    	// 事件代理实现核心
    	// 注意: 这个方法为包装函数,此处的this为触发事件的Element
    	var fn = callback;
    		callback = function(e){
    			// 验证子选择器所匹配的nodeList中是否包含当前

最低0.47元/天解锁文章