jQuery事件用法实例汇总

2020-05-22 15:14:57易采站长站整理

显然,通常只希望在某个特定元素发生特定的事件,不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。


$(function () {
$('a').on('click', function(event) {
event.preventDefault();
console.log($(this).attr('href'));
});
});

以上,只为a绑定了click事件,无它。

如何有效利用事件冒泡?

在jquery中,事件委托却很好地利用了事件冒泡。


<html>
<body>
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item #1</a></li>
<li><a href="/local/path/1">Item #2</a></li>
<li><a href="/local/path/2">Item #3</a></li>
<li><a href="http://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='http://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(){})