jQuery的三种bind/One/Live/On事件绑定使用方法(2)

var productname="Sports Shoes"; $('#Area').bind('click',{pn:productname},function(){ alert(event.data.pn); }); productname="necklace", $('#Area').bind('click',{pn:productname},function(){ alert(event.data.pn); });

2. One

为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。该方法与bind方法的参数一样,与bind方法的区别就是只对匹配元素的事 件处理执行一次,执行完之后,以后再也不会执行,当然重新发起web请求时它又会执行一次。

$('a').one('click',function(){ alert('a'); })

单击页面上的a元素后,弹出消息,除非用户发起第二次请求,否则再次点击a元素不会弹出消息对话框。

3. live

该方法主要是能处理动态添加的元素,给那些后添加的元素也一样绑定事件。

$('a').live('click,function(){ alert('show message!'); })

然后如果我添加一个元素,

$('body').appnend('Another Element');

那么该元素也会被触发事件处理函数alert。
另外,jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简化.bind(‘click')。

一共有以下这些事件名称:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 等。

下面看下jQuery中绑定事件bind() on() live() one()的异同

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件

bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除)

live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除)

delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除)

on()---------------------------版本号大于1.7(在Jquery1.7中添加,相应off()也添加)

A:bind()事件的用法

<title>绑定事件</title> <script src="https://www.jb51.net/js/jQuery1.11.1.js" type="text/javascript"></script> <script> $(function () { $("p").bind({ "mouseover": function () { $("p").css("background-color", "red"); }, "mouseout": function () { $("p").css("background-color", ""); } }); }); </script> </head> <body> <p>what are you doing?</p> </body> </html>

第一个最大的区别就是:bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件,是没有办法达到效果的。

在后面的动态生成DOM元素绑定事件就要使用on();

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzjpp.html