jQuery事件处理

1 事件处理

jQuery提供了一种处理事件的有效方式。 当用户执行操作（例如单击元素，移动鼠标或提交表单）时，会发生事件。

当目标元素发生事件时，执行处理函数。

例如，假设我们要处理id="demo"的元素上的点击事件，并在点击按钮时显示当前日期。 使用纯JavaScript，代码如下：

var x = document.getElementById("demo");
x.onclick = function () {
  document.body.innerHTML = Date();
}

可以使用jQuery与以下代码来处理相同的事件：

$("#demo").click(function() {
  $("body").html(Date());
});

如你所见，jQuery代码更简单，更容易阅读和写入。

请注意，提供的事件名称没有“on”前缀（即在jQuery中单击对应JavaScript中的onclick）。

2 常见事件

鼠标事件：

click:单击时发生。

dblclick:双击元素时触发。

mouseenter:当鼠标指针进入所选元素时触发。

mouseleave:鼠标指针离开所选元素时触发。

mouseover:当鼠标指针在所选元素上方悬停时触发。

键盘事件：

keydown:当按下键盘按键时会触发。

keyup:当键盘按键被释放时会触发。

表单事件：

submit:提交表单时触发。

change:当表单元素的值发生改变时触发。

focus:当表单元素获得焦点时触发。

blur:当表单元素失去焦点时触发。

文件事件：

ready:当DOM加载完成以后触发。

resize:当浏览器窗口大小改变时触发。

scroll:当用户在指定的元素中滚动滚动条时触发。

例如，当用户在输入时，我们要更改div的内容。要做到这一点，我们需要处理键盘事件，当按下键盘上的任意一个按键时会触发：

HTML：

<input type="text" id="name" />
<div id="msg"></div>

JS:

$("#name").keydown(function() {
  $("#msg").html($("#name").val());
});

上面的代码处理 id="name"的元素的keydown事件，并将id="name"获取到的值赋给 id ="msg"的元素中。

3 on()方法绑定事件

在jQuery中处理事件的另一种方法是使用on()方法。

on()方法用于将事件附加到所选元素。 例如：

$("p").on("click", function() {
  alert("触发了p段落的点击事件");
});

你可以看到，事件名称作为第一个参数传递给on()方法。 第二个参数是处理函数。

on()方法用于将相同的处理函数绑定到多个事件中的时候很有用。 你可以使用空格分隔多个事件名称, 例如 你可以为点击和dblclick事件使用相同的事件处理程序。

$("p").on( "click dblclick", function() {
  alert("clicked");
});

4 off()解除事件绑定

你可以使用off()方法来删除事件处理程序。

例如：

$("div").on("click", function() { 
  alert('Hi there!'); 
}); 
$("div").off("click");

off()方法的参数是要删除的事件名称。

5 JQuery的事件对象

每个事件处理函数都可以接收一个事件对象，其中包含与该事件相关的属性和方法：

pageX，pageY 事件发生时相对于页面左上角的鼠标位置（X和Y坐标）。

type 键入事件的类型（例如“点击”）。

which 哪个按钮或键被按下。

data 数据绑定事件时传入的任何数据。

target 定位发起事件的DOM元素。

preventDefault() 阻止事件的默认动作（例如，在链接之后）。

stopPropagation() 停止冒泡到其他元素的事件。

例如，让我们处理<a>元素上的click事件，并阻止打开href属性中提供的链接：

HTML:

<a href="https://www.w3cschool.cn">点击我</a>

JS:

$("a").click(function(event) {
  alert(event.pageX);
  event.preventDefault();
});

上面的代码在点击时提醒鼠标位置，并阻止打开链接。

如你所见，事件对象作为参数(就是以上代码中的 event 参数)传递给事件处理函数。

6 JQuery触发事件

我们还可以使用trigger()方法以编程方式触发事件。 例如，你可以触发一个点击事件，而不需要用户实际点击一个元素：

$("div").click(function() {
   alert("点击了div!");
});
$("div").trigger("click");

此代码触发所选元素的点击事件。

trigger()方法不能用来模仿本机浏览器事件，比如点击一个文件文本框。 只能处理jQuery事件系统中的事

7 步骤1:创建待办事项清单列表

让我们用我们所学的概念来创建一个To-Do列表项目。

“待办事项”列表可以将新项目添加到列表中，也可以删除现有项目。

首先，我们创建HTML：

<h1>我的To-Do列表</h1>
<input type="text" placeholder="新项目" />
<button id="add">添加</button>
<ol id="mylist"></ol>

点击按钮应该将输入字段的值添加到我们的<ol>列表中

8 步骤2:创建待办事项清单列表

现在，准备HTML，我们可以开始编写我们的jQuery代码。

首先，我们处理按钮的点击事件：

$(function() {
  $("#add").on("click", function(event) {
    //这边写代码
  });
});

在事件处理程序中，我们选择输入字段的值并创建一个新的<li>元素，并将其添加到列表中：

var val = $("input").val();
if(val !== '') {
  var elem = $("<li></li>").text(val);
  $(elem).append("<button class='rem'>X</button>");
  $("#mylist").append(elem);
  $("input").val(""); //清除input的值
}

上面的代码将输入字段的值分配给val变量。 if语句检查该值是否为空，然后创建一个新的<li>元素。 添加一个删除它的按钮，之后将新创建的元素添加到<ol id ="mylist">列表中。

以下是完整的代码：

$(function() {
  $("#add").on("click", function(event) {
    var val = $("input").val();
    if(val !== '') {
      var elem = $("<li></li>").text(val);
      $(elem).append("<button class='rem'>X</button>");
      $("#mylist").append(elem);
      $("input").val("");
    }
  });
});

删除功能还没有实现。 我们将在下一节中处理它！

9 步骤3:创建待办事项清单列表

剩下要做的就是处理class ="rem"按钮上的click事件，并从列表中删除相应的<li>元素。

$(".rem").on("click", function() {
  $(this).parent().remove();
});

请记住，这是当前的对象。 上面的代码移除了当前对象的父对象，在我们的例子中，它是remove按钮的父对象，<li>元素。

完整的代码：

$(function() {
  $("#add").on("click", function() {
    var val = $("input").val();
    if(val !== '') {
     var elem = $("<li></li>").text(val);
     $(elem).append("<button class='rem'>X</button>");
     $("#mylist").append(elem);
     $("input").val("");
     $(".rem").on("click", function() {
      $(this).parent().remove();
     });
    }
  });
});

“待办事项清单列表”仅仅是一个简短的演示，建立一个简单的项目说明如何处理事件。