jQuery事件处理

简介: 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();
     });
    }
  });
});

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

目录
相关文章
N..
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
113 1
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
95 1
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
12月前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
74 1
|
9月前
|
JavaScript
jQuery 事件
jQuery 事件
65 10
|
9月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
9月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
60 3
|
8月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
88 0
|
9月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
47 0
|
10月前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应