jQuery提供了一种处理事件的有效方式。
当目标元素发生事件时,执行处理函数。
例如,假设我们要处理id=“demo”的元素上的点击事件,并在点击按钮时显示当前日期。
使用纯JavaScript,代码如下:
var x=document.getElementById("demo");
x.onclick=function(){
document.body.innerHTML=Date();
}
可以使用jquery与以下来处理相同的事件:
$("#demo").click(function(){
$("body").html(Date());
});
jQuery代码更简单,更容易阅读和写入。
常见事件:
鼠标事件:
click:单击时发生。
dblclick:双击元素时触发。
mouseenter:当鼠标指针进入所选元素时触发。
mouseleave:鼠标指针离开所选元素时触发。
mouseover:当鼠标指针在所选元素上方悬停时触发。
键盘事件:
keydown:当按下键盘按键时会触发。
keyup:当键盘按键被释放时会触发。
表单事件:
submit:提交表单时触发。
change:当表单元素的值发生改变时触发。
focus:当表单元素获得焦点时触发。
blur:当表单元素失去焦点时触发。
文件事件:
ready:当DOM加载完成以后触发。
resize:当浏览器窗口大小改变时触发。
scroll:当用户在指定的元素中滚动滚动条时触发。
例如,当用户在输入时,我们要更改div的内容。要做到这一点,我们需要处理键盘事件,当按下键盘上的任意一个按键时会触发:
HTML:
JS:
$("#name").keydown(function() {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲msg").html(("#name").val());
});
上面的代码处理 id="name"的元素的keydown事件,并将id="name"获取到的值赋给 id ="msg"的元素中。
on()方法绑定事件
在jQuery中处理事件的另一种方法是使用on()方法。
on()方法用于将事件附加到所选元素。 例如:
$(“p”).on(“click”, function() {
alert(“触发了p段落的点击事件”);
});
你可以看到,事件名称作为第一个参数传递给on()方法。 第二个参数是处理函数。
on()方法用于将相同的处理函数绑定到多个事件中的时候很有用。 你可以使用空格分隔多个事件名称, 例如 你可以为点击和dblclick事件使用相同的事件处理程序。
$(“p”).on( “click dblclick”, function() {
alert(“clicked”);
});
off()解除事件绑定
你可以使用off()方法来删除事件处理程序。
例如:
$(“div”).on(“click”, function() {
alert(‘Hi there!’);
});
$(“div”).off(“click”);
off()方法的参数是要删除的事件名称。