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

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

目录
相关文章
|
4月前
|
JavaScript
JQuery——事件处理
JQuery——事件处理
34 0
|
前端开发 JavaScript
JQuery的事件处理和动画效果
JQuery的事件处理和动画效果
72 0
|
JavaScript
jquery事件处理-44
jquery事件处理-44
58 0
jQuery事件处理
jQuery可以很方便地使用事件对象对触发事件进行处理。jQuery支持的事件包括键盘事件、鼠标事件、表单事件、文档加载事件和浏览器事件等。
jQuery事件处理
|
Web App开发 JavaScript 索引
从零玩转jQuery-事件处理
事件绑定 jQuery中事件绑定有两种方式 eventName(function(){}) 绑定对应事件名的监听, 例如:$('#div').
1120 0
|
JavaScript 前端开发
jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动。虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框架增加并扩展了基本的事件处理机制,jQuery框架提供了更加优雅的事件处理语法,并极大的增强了事件处理能力。
1079 0
|
JavaScript
jQuery|事件处理有一个on就够了
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
880 0
|
JavaScript Android开发 HTML5
Jquery 中为后生成或插入的 Html 元素先设定响应事件处理方法
Jquery 中为后生成或插入的 Html 元素先设定响应事件处理方法 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
871 0
|
JavaScript
jQuery使用手册之事件处理(7)
jQuery的事件处理,有方法:hover(Function, Function) 当鼠标move over时触发第一个function,当鼠标move out时触发第二个function 样式: .
775 0