可想自己造一个jQuery库?(十)

  • A+
所属分类:jQuery

Lesson-9

关于事件部分,我思考了很久,也参考了许多,到底如何能用一个很简单的方法实现一模一样的on、off呢?

最后我的设计思路是:

1.有一个全局存储所有Events的数组,存放每个dom元素上的事件。

2.给每个DOM一个guid的唯一标识符,通过这个guid来找出Events数组里的事件。

由于逻辑比较复杂,我们先来画个图看看。

可想自己造一个jQuery库?(十)

首先,我们利用DOM可以增加自定义属性的原理,在它的身上存一个guid。

之后整个事件机制就根据这个guid来进行查找与存储。

接下来是代码部分

由于方法过长,我就把讲解的都写在了代码里,这样看的也会更方便一些。

代码还是不够形象!我们来看看log就能更清晰明白其中的奥秘。

通过控制台log出f.Events 发现正是我们想要的结果,每个dom对应一个自己的evtObj, 通过Kodo.Events[guid] 可以得到指定的evtObj。然后即可取出自己相应的事件。

可想自己造一个jQuery库?(十)

如果我继续新增事件可想自己造一个jQuery库?(十)

可以发现,我只针对于第一个li增加了事件。log出Evnets也就只有第一个Object有新增,并且会增加到对应的事件数组里。

理解了这个后要解除事件绑定,那就非常简单了。同样根据guid查找到对应的方法数组,delete即可

一个没有带有事件委托的on、off就可以这样实现了。

那如果我们要实现带委托的怎么办呢?

我们可以用这同样的思路实现,只是要多进行一个指定selector的存储。

这个我们就放在下一课最后讲解。

点赞是尊重作者知识果实最好的回报 :)

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: