美文网首页
jQuery实现事件代理

jQuery实现事件代理

作者: GeekNiuniu | 来源:发表于2016-05-13 20:43 被阅读0次

jQuery实现事件代理

1.事件代理的原理和意义

实现原理是利用了浏览器的事件冒泡和事件源(target)。
在js中事件会冒泡到父级节点,所以我们可以在父级节点进行事件代理。例如一个使用jQuery的函数:

 $("#tab td").click(function(){
           $(this).css("background","red");
}) ;

上面的函数给一个tab的td加了一个单击事件,但是如果表格1000行,就得绑定1000次,

$("#tab").bind("click",function(ev)){
   var $obj=$(ev.target);
   $obj.css("background","red");
}

以上用bind函数将click绑定到了tab上,从而实现事件代理。

2.jQuery中的绑定函数

(1).bind()为每个匹配元素的特定事件绑定事件处理函数

$("#niu").bind('click',function(){
  alert("hello niuniu");
});

此代码把id为niu的元素响应事件click,并显示警报。使用bind绑定多个事件时,可以这样

$("#niu").bind('mouseenter mouseleava',function(){
      $(this).css("background","yellow");
});
$("#foo").bind({
     click:function(){
     },
     mouseenter:function(){
     }
});

(2).delegate()指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

$("table").delegate("td","click",function(){
    $(this).toggleClass("chosen");
});

(3).on在选择元素上绑定一个或多个事件的事件处理函数

function greet(event) { alert("Hello"+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);

(4).live给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

$("a").live("click", function() { return false; })

以上是常用的绑定函数。

技术文档引用:

  自从.live()方法处理事件一旦传播到文档的顶部,live事件是不可能停止传播的。同样地,.delegate() 事件将始终传播给其中包含的被委托元素;同时,任何在 DOM 树中,比这些元素低的元素上绑定的相同事件,在 .delegate() 事件被调用的时候,也会被触发。因此,如果要在事件中阻止委托事件被触发,可以调用event.stopPropagation()或者返回false防止委派处理程序冒泡。

简单来说,.bind()是直接绑定在元素上,而.live()和.delegate()则是通过冒泡的方式来绑定到元素上的。.bind()方法只能给当前存在的元素绑定事件,对于事后采用JS方式新生成的元素无效,而live方法可以对后生成的元素也可以绑定相应的事件。

相关文章

  • jQuery实现事件代理

    jQuery实现事件代理 1.事件代理的原理和意义 实现原理是利用了浏览器的事件冒泡和事件源(target)。在j...

  • Jquery总结

    Jquery能实现的JS都能实现,JS实现的Jquery未必能实现 事件 常用的基本事件 鼠标事件mouseent...

  • jQuery事件绑定

    jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 在1.7之前的版本中jQuery处理事件有多个方法...

  • jQuery事件

    1、jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 jquery在1.7版本之前绑定事件可通过bi...

  • dom事件代理

    实现一个js事件代理的模块,帮助用户快速实现事件代理。

  • 事件代理

    javascript和jQuery的事件代理不同写法 首先思考一下:为什么我们要用到事件代理??? 举个栗子父元素...

  • js与jquery方法对比

    一.文档就绪 jquery实现 简写形式为: js实现 二、元素选择 三、点击事件 jquery实现 js实现 四...

  • jQuery 动画

    jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 使用.on( events [,selector ...

  • jQuery事件

    一、jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 .on( events [,selector ...

  • 代理模式

    ◆ 使用者无权访问目标对象◆ 中间加代理,通过代理做授权和控制 应用场景:◆ 网页事件代理◆ jQuery $.p...

网友评论

      本文标题:jQuery实现事件代理

      本文链接:https://www.haomeiwen.com/subject/nbdmrttx.html