关注前端开发微信微信号web007007

DOM元素上jQuery事件几点学习

作者 管理员 发布时间 2012-05-30 13:26 文章分类 HTML5, JavaScript, PHP开发, 前端文档, 前端资源 文章评论 抢沙发 阅读次数

闲着无聊看了jQuery event部分的代码,发现一个小惊喜,嘿嘿,可能我奥特曼了。以下一jQuery 1.4.4版本说事,更高级版本稍有不同,但是关系不大。

jQuery 在元素上绑定事件的时候,会在该元素上添加一个自定义属性“events”,这个属性包含了通过jQuery绑定事件的事件集合,例如:
这样一个元素:

<a id="bind" href="#">这是一个绑定了事件的元素(bind)</a>

我在这个元素上绑定两个click事件,一个采用“bind”,一个直接用“click”:


$("#bind").bind("click.hello",function(event){
event.preventDefault();
console.log("bind");
});
$("#bind").click(function(event){
event.preventDefault();
console.log("bind1");
});
var $events = $("#bind").data("events");
console.log($events);

打印出来的结果如下:

这样我们就可以做很多事情,比如事件的命名,自定义事件,判断元素上是否绑定了jQuery事件等等,

经进一步的测试发现了几点情况:

1、live事件绑定的元素上没有“events”自定义属性;
2、hover这种扩展事件绑定的元素上有“events”自定义属性,事件的类型包括mouseenter,mouseleave,mouseout,mouseover,jQuery 1.7事件类型略有不同;
3、delegate事件绑定的元素上有“events”自定义属性,事件属性中有“live”;

好多有意思的东东,还是继续再看jQuery源码吧

本文固定链接: http://www.web92.net/21.html | WEB前端开发

该日志由 于2012年05月30日发表在 HTML5, JavaScript, PHP开发, 前端文档, 前端资源 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: DOM元素上jQuery事件几点学习 | WEB前端开发
关键字: , ,