Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

jQuery自定义事件的冒泡

  昨天的文章牵涉到了jQuery的自定义事件冒泡问题,但只是提到没有详细的说明。在jQuery中,自定义事件是会冒泡的,而且不仅是对普通的DOM元素冒泡,甚至还会扩散到window(defaultView)上。这些机制是jQuery内部实现的,和DOM的事件机制没啥关系。
  现在来做这么一个测试 <div class="d1">
  <div class="d2">
    <div class="d3">
      div
    </div>
  </div>
</div>
<script src="jquery.js"></script>
<script>
$(function(){
  //选择所有标签外加document和window来绑定上test事件
  $("*").add(document).add(window).on("test",function(){
    //输出对象的构造器名称和className
    console.log(this.constructor.name,this.className||"");
  });
  //对最内层的div触发test
  $(".d3").trigger("test");
});
</script>

  这家伙厉害吧,我只对最内层的DIV执行了trigger就触发了这么多个事件,这就是自定义事件冒泡。jQuery默认对事件冒泡,只有特殊指定不冒泡时候才不会冒泡。关于这个机制的实现可以看jQuery的代码(jquery-1.9.1.js 2956行到2973行)。
  如果不需要冒泡怎么办呢?在jQuery的内部有这么一个判断 if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) )   只有通过这个判断时才会冒泡,最简单的方法就是让onlyHandlers为true。这个操作jQuery有提供方法,所以只要在触发事件时使用triggerHandler即可   $(".d3").triggerHandler("test");   这样触发就不会冒泡了,这里我就不截图了。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^