diE*_*cho 139 javascript jquery
我已经阅读了每个函数的文档 jQuery official website,但是下面的函数之间没有这样的比较列表:
$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().trigger('click') // UPDATED
$().on('click', selector ,fn); // more UPDATED
请避免任何参考链接.
以上所有功能如何正常工作以及哪种情况应该首选？
注意:如果有任何其他功能具有相同的功能或机制,那么请详细说明.
我也看过一个$.trigger功能.它是否与上述功能类似？
现在.on在v1.7中添加,我认为这个在某种程度上涵盖了所有上述功能要求.
Nic*_*ver 162
在您阅读本文之前,请在另一页中提取此事件列表,API本身非常有用,我在下面讨论的所有内容都直接从此页面链接.
首先,.click(function)它实际上是一个捷径.bind('click', function),它们是等价的.将处理程序直接绑定到元素时使用它们,如下所示:
$(document).click(function() {
alert("You clicked somewhere in the page, it bubbled to document");
});
如果此元素被替换或丢弃,则此处理程序将不再存在.当运行此代码以附加处理程序时(例如,选择器找到它),不存在的元素也不会获得处理程序.
.live()并且.delegate()具有相似的相关性,.delegate()实际上是在.live()内部使用,它们都会监听事件的泡沫. 这适用于新旧元素,它们以相同的方式鼓泡事件.您可以在元素发生变化时使用这些元素,例如添加新行,列表项等.如果您没有将保留在页面中且不会在任何时候替换的父/共同祖先,请使用.live(),如下所示:
$(".clickAlert").live('click', function() {
alert("A click happened");
});
但是,如果你确实有某个父元素没有被替换(所以它的事件处理程序不再被再见),你应该用它来处理它.delegate(),如下所示:
$("#commonParent").delegate('.clickAlert', 'click', function() {
alert("A click happened, it was captured at #commonParent and this alert ran");
});
这与几乎相同.live(),但事件在被捕获和执行处理程序之前冒泡的次数较少.这两者的另一个常见用法是说你的类更改了一个元素,不再匹配你最初使用的选择器......使用这些方法,在事件发生时评估选择器,如果它匹配,则处理程序运行.. .so元素不再与选择器匹配,它将不再执行.随着.click()然而,事件处理程序的DOM元素上绑定的权利,但事实上,它不匹配任何选择来发现这是无关紧要的......事件是绑定的,它的住,直到该元素消失了,或者处理器通过删除.unbind().
然而,对于另一种常见的使用.live()和.delegate()是性能.如果您正在处理大量元素,则将单击处理程序直接附加到每个元素是昂贵且耗时的.在这些情况下,设置单个处理程序并让冒泡做这项工作更经济,看看这个问题,它产生了巨大的差异,这是应用程序的一个很好的例子.
触发 - 用于更新的问题
有两个主要的事件处理程序触发函数可用,它们属于API中相同的"事件处理程序附件"类别,这些是.trigger()和.triggerHandler(). .trigger('eventName')有一些内置于常见事件的快捷方式,例如:
$().click(fn); //binds an event handler to the click event
$().click(); //fires all click event handlers for this element, in order bound
至于差异,.trigger()触发事件处理程序(但不是大多数时间的默认操作,例如将光标放在单击的正确位置<textarea>).它导致事件处理程序按绑定的顺序发生(如本机事件所示),触发本机事件操作,并使DOM冒泡.
.triggerHandler()通常用于不同的目的,这里你只是尝试触发绑定的处理程序,它不会导致本机事件触发,例如提交表单.它不会冒泡DOM,并且它不可链接(它返回该事件返回的最后绑定事件处理程序).例如,如果你想触发一个focus事件而不是实际聚焦对象,你只需要.focus(fn)运行的代码就可以运行,这样就可以做到这一点,而.trigger()这样做也可以实际聚焦元素并冒泡.
这是一个真实世界的例子:
$("form").submit(); //actually calling `.trigger('submit');`
这将运行任何提交处理程序,例如jQuery验证插件,然后尝试提交<form>.但是,如果您只是想验证,因为它通过submit事件处理程序连接,但<form>之后不提交,您可以使用.triggerHandler('submit'),如下所示:
$("form").triggerHandler('submit');
如果验证检查未通过,插件会阻止处理程序通过轰炸提交表单,但是使用此方法我们不关心它的作用.无论是否中止,我们都没有尝试提交表单,我们只是想触发它重新验证而不做任何其他事情.(免责声明:这是一个多余的例子,因为.validate()插件中有一个方法,但它是一个很好的说明意图)
Fyo*_*kin 28
前两个是等价的.
// The following two statements do the same thing:
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } );
但是,第二个可以通过指定多个以空格分隔的事件名称来同时绑定到多个事件:
$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } );
该.live方法更有趣.请考虑以下示例:
<a class="myLink">A link!</a>
<a id="another">Another link!</a>
<script>
$("a.myLink").click( function() { alert( 'Click!' ); } );
$("a#another").addClass( "myLink" );
</script>
在脚本执行第二行之后,第二个链接也将具有CSS类"myLink".但它不会有事件处理程序,因为它在附加事件时没有类.
现在考虑你想要它反过来:每次在页面的某个地方出现类"myLink"的链接时,你希望它自动拥有相同的事件处理程序.当您有某种列表或表时,这是非常常见的,您可以在其中动态添加行或单元格,但希望它们都以相同的方式运行.您不必每次都重新分配事件处理程序,而是可以使用以下.live方法:
<a class="myLink">A link!</a>
<a id="another">Another link!</a>
<script>
$("a.myLink").live( "click", function() { alert( 'Click!' ); } );
$("a#another").addClass( "myLink" );
</script>
在这个例子中,第二个链接一旦获得"myLink"类,它也将获得事件处理程序.魔法!:-)
当然,这不是字面意思.什么.live确实是处理程序不附加到指定元素本身,而是对HTML树("身体"元素)的根源.DHTML中的事件具有"冒泡"这个有趣的特征.考虑一下:
<div> <a> <b>text</b> </a> </div>
如果单击"文本",则首先<b>元素将获得"单击"事件.之后,<a>元素将获得"单击"事件.之后,<div>元素将获得"点击"事件.依此类推 - 一直到<body>元素.这就是jQuery将捕获事件的位置,并查看是否有任何"实时"处理程序适用于首先导致事件的元素.整齐!
最后,.delegate方法.它只需要元素的所有子元素都符合给定的选择器,并为它们附加一个"实时"处理程序.看一看:
$("table").delegate( "td", "click", function() { alert( "Click!" ); } );
// Is equivalent to:
$("table").each( function() {
$(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
} );
有问题吗？
从jQuery 1.7开始,不推荐使用.live()方法.如果您使用的jQuery版本<1.7,那么官方建议使用.delegate()而不是.live().
.live()现在已被.on()取代.
最好直接访问jQuery站点以获取更多信息,但这里是.on()方法的当前版本:
.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )
| 归档时间： |
|
| 查看次数： |
45093 次 |
| 最近记录： |