jQuery事件
2018-10-11 本文已影响0人
milletmi
jQuery事件是DOM事件的封装,同时支持自定义的扩展。
绑定事件:bind、on、live、delegate、keyup(<function>);
触发事件:trigger('keyup')、keyup();
解绑事件:unbind、off、die、undelegate。
1、delegate定义和用法
.delegate是另一种绑定事件的方式。为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。它将事件处理函数绑定在指定的根元素上, 由于事件会冒泡,它用来处理指定的子元素上的事件。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
$(selector).delegate(childSelector,event,data,function)
//childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
//event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
//data 可选。规定传递到函数的额外数据。
//function 必需。规定当事件发生时运行的函数。
//例如
<div id="root">
<a>Alice</a>
<a>Bob</a>
</div>
$('#root').delegate('a', 'click', function(){
console.log('clicked');
});
2、事件绑定:bind
使用javascript绑定一个事件很简单,只需要在HTML中设置onxxx属性, 并且在javascript中定义相关的处理函数便可以完成。
<div onclick="func()"></div>
<script>
function func(){
console.log('clicked!');
}
</script>
3、自定义事件
jQuery事件是基于DOM事件的,但jQuery提供了更加普遍的事件机制。 这使得我们可以方便地自定义事件,只需要给一个尚不存在的事件名即可:
<div id='foo'></div>
<script>
$('#foo').bind('fucked', function(){
console.log("I'm fucked.");
});
$('#foo').trigger('fucked');
</script>
4、 on
事实上,.on()才是jQuery事件的提供者。其他的事件绑定方法都是通过.on()来实现的,请看jQuery1.8.2的源码:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
},
事件冒泡与默认行为
在DOM中默认情况下,事件是会冒泡的,即同样的事件会沿着DOM树逐级触发。 有时这是我们不希望的行为,可以在事件处理函数中阻止它。
// 事件处理函数的第一个参数是一个事件对象
$('#foo').click(function(event){
event.stopPropagation();
event.preventDefault();
// do sth.
});
在实践中,我们常常让事件处理函数return false来阻止冒泡和默认行为, 可以认为return false做了三件事情:
stopPropagation();
preventDefault();
立即结束当前函数并返回。