jquery 事件处理

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()方法的参数是要删除的事件名称。