//给一个元素绑定一个focus事件 $("input").focus(function(){ $("<span>Focused</span>").appendTo("#id").fadeOut(1000); }) //用triggerHandler触发 $("#id").click(function(){ $("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框 }) //用trigger触发 $("#id").click(function(){ $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为 })
12.事件冒泡和事件委托
什么是事件冒泡？
有这么一段代码。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div> <p><a href="#foo"><span>I am a Link!</span></a></p> <p><a href="#bar"><b><i>I am another Link!</i></b></a></p> </div> </body> </html>
现在，给该页面所有的元素绑定click事件，包括window和document。
$(function () { $('*').add([document, window]).on('click', function(event) { event.preventDefault(); console.log(this); }); });
当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。
如何阻止事件冒泡？
显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。
$(function () { $('a').on('click', function(event) { event.preventDefault(); console.log($(this).attr('href')); }); });
以上，只为a绑定了click事件，无它。
如何有效利用事件冒泡？
在jquery中，事件委托却很好地利用了事件冒泡。
<html> <body> <div> <ul> <li><a href="https://domain1.com">Item #1</a></li> <li><a href="https://www.jb51.net/local/path/1">Item #2</a></li> <li><a href="https://www.jb51.net/local/path/2">Item #3</a></li> <li><a href="https://domain4.com">Item #4</a></li> </ul> </div> </body> </html>
现在，我们想给现有li中的a标签绑定事件，这样写：
$( "#list a" ).on( "click", function( event ) { event.preventDefault(); console.log( $( this ).text() ); });
但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？
$( "#list" ).append( "<li><a href='https://newdomain.com'>Item #5</a></li>" );
结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？
如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。
$( "#list" ).on( "click", "a", function( event ) { event.preventDefault(); console.log( $( this ).text() ); });
以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a
事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。
13.toggle方法
允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。
$('img[src*=small]').toggle({ function(){}, function(){}, function(){} });
14.mouseenter和mouseleave方法
$(element).mouseenter(function(){}).mouseleave(function(){})
15.hover方法
$("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });