原生js实现on与off 方法

原创 拭目以待 随笔 野生前端工程师 309阅读 2017-05-04 16:29:07 举报

@拭目以待原生js实现on与off 方法

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

注意:

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

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

html 代码

参数说明

[ol]
[li]event: 事件名, 如 'click', 并支持 'click.scope1' 事件域的方法(虽然支持,但由于暂时没有使用场景。所以仅对参数进行了处理,功能上没有实现)[/li]

[li]querySelector: 子选择器[/li]

[li]callback: 事件触发后执行的函数[/li]

[li]useCapture: 指定事件是否在捕获或冒泡阶段执行.true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行[/li]

[li]eventList: 由 .getEventObject() 方法生成的 Event 对象[/li]

[/ol]

on的实现逻辑

[ul]
[li]通过调用jTool实例的on方法,传入参数[/li]

[li]调用getEventObject() 获取事件对象[/li]

[li]调用addEvent() 方法进行事件绑定[/li]

[/ul]

off的实现逻辑

[ul]
[li]通过调用jTool实例的off方法,传入参数[/li]

[li]调用getEventObject() 获取事件对象[/li]

[li]调用removeEvent() 方法解除事件绑定[/li]

[/ul]

完整Event对象

html 代码

.on() 与 .bind() 都可以进行事件绑定, 区别在于 .on() 使用事件代理。 事件代理是一种事件预绑定机制, 该机制可以在事件节点不存在的情况下, 将事件绑定至已存在父级节点之上的方式。

源码链接

jTool.Event 源码

jTool类库

使用jTool类库开发的表格组件

随笔一行

这是前端最好的时代, 这也是前端最坏的时代。 众多前端框架满天飞,随着 jQuery 在前端行业的慢慢弱化,总是会有一种斯人远去,何者慰籍的感觉。互勉吧,各位。

@拭目以待

个人站点:www.lovejavascript.com

表格管理插件:gridmanager.lovejavascript.com&& github地址

QQ交流群 (452781895):How To Make Love

《野生前端工程师》专辑中所有文章均为@拭目以待 原创,转载请注明出处。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复