荐 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();
});
}
});
});
“待办事项清单列表”仅仅是一个简短的演示，建立一个简单的项目说明如何处理事件。
本文地址：https://blog.csdn.net/ZGL_cyy/article/details/107302530
下一篇： Vue项目开发学习经历（持续更新）