IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

DOM元素上jQuery事件几点学习

WEB前端开发 2012-05-08 00:05:47 累计浏览 3,412 次
本机暂存

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

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

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

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

01 $("#bind").bind("click.hello",function(event){
02 event.preventDefault();
03 console.log("bind");
04 });
05 $("#bind").click(function(event){
06 event.preventDefault();
07 console.log("bind1");
08 });
09 var $events = $("#bind").data("events");
10 console.log($events);

打印出来的结果如下,

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

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

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

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

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,347)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,401)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,932)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,845)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,761)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,222)
  8. 什么是全栈工程师? (累计阅读 14,035)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,734)
  10. 7 天打造前端性能监控系统 (累计阅读 11,187)