JQuery添加事件的方法有如下三种
on(events,[selector],[data], fn)
在选择元素上绑定一个或多个事件的事件处理函数。
参数:
events:
一个或多个用空格分隔的事件类型和可选的命名空间,如"click"
或"keydown.myPlugin"
。
selector:
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件 总是触发。
data:
当一个事件被触发时要传递event.data
给事件处理函数。
fn:
该事件被触发时执行的函数。false
值也可以做一个函数的简写,返回false
。
例子:
$("p").on("click", function(){
alert( $(this).text() );
});
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)
$("form").on("submit", false)
bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。jQuery 3.0中已弃用此方法,请用 on()代替。
参数:
type:
含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:
作为event.data属性值传递给事件对象的额外数据对象
fn:
绑定到每个匹配元素的事件上面的处理函数
例子:
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
one(type,[data],fn)
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可 以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。
参数:
type:
添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data:
将要传递给事件处理函数的数据映射
fn:
每当事件触发时执行的函数。
例子:
$("p").one("click", function(){
alert( $(this).text() );
});
jQuery
鼠标事件
mousedown([[data],fn])
:当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown
事件。mousedown
与click
事件不同,mousedown
事件仅需要按键被按下,而不需要松开即可发生。
参数:
data:
mousedown([Data], fn)
可传入data
供函数fn
处理。
fn:
在每一个匹配元素的mousedown
事件中绑定的处理函数
例子:
$("button").mousedown(function(){
$("p").slideToggle();
});
mouseenter([[data],fn])
: 当鼠标指针穿过元素时,会发生mouseenter
事件。该事件大多数时候会与mouseleave
事件一起使用。与mouseover
事件不同,只有在鼠标指针穿过被选元素时,才会触发mouseenter
事件。如果鼠标指针穿过任何子元素,同样会触发mouseover
事件。
参数:
data:mouseenter([Data], fn)
可传入data
供函数fn
处理。
fn:
在每一个匹配元素的mouseenter
事件中绑定的处理函数。
例子:
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
-
mouseleave([[data],fn])
:当鼠标指针离开元素时,会发生mouseleave
事件。该事件大多数时候会与mouseenter
事件一起使用。与mouseout
事件不同,只有在鼠标指针离开被选元素时,才会触发mouseleave
事件。如果鼠标指针离开任何子元素,同样会触发mouseout
事件。
参数:
data:mouseleave([Data], fn)
可传入data
供函数fn
处理。fn:
在每一个匹配元素的mouseleave
事件中绑定的处理函数。
例子:
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
mousemove([[data],fn])
: 当鼠标指针在指定的元素中移动时,就会发生mousemove
事件。mousemove
事件处理函数会被传递一个变量——事件对象,其.clientX
和.clientY
属性代表鼠标的坐标
参数:
data:mousemove([Data], fn)
可传入data
供函数fn
处理。
fn:
在每一个匹配元素的mousemove
事件中绑定的处理函数。
例子:
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
mouseout([[data],fn])
:当鼠标指针从元素上移开时,发生mouseout
事件。该事件大多数时候会与mouseover
事件一起使用。
注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
参数:
data:mouseout([Data], fn)
可传入data
供函数fn
处理。
fn:
在每一个匹配元素的mouseout
事件中绑定的处理函数
例子:
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
mouseover([[data],fn])
:当鼠标指针位于元素上方时,会发生mouseover
事件。该事件大多数时候会与mouseout
事件一起使用。
注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
参数:
data:mouseover([Data], fn)
可传入data
供函数fn
处理。
fn:
在每一个匹配元素的mouseover
事件中绑定的处理函数。
例子:
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
mouseup([[data],fn])
: 当在元素上放松鼠标按钮时,会发生mouseup
事件。与click
事件不同,mouseup
事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
参数:
data:mouseup([Data], fn)
可传入data
供函数fn
处理。
fn:
在每一个匹配元素的mouseup
事件中绑定的处理函数。
例子:
$("button").mouseup(function(){
$("p").slideToggle();
});