欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

荐 jQuery事件处理

程序员文章站 2024-01-01 09:08:52
事件处理jQuery提供了一种处理事件的有效方式。当用户执行操作(例如单击元素,移动鼠标或提交表单)时,会发生事件。当目标元素发生事件时,执行处理函数。例如,假设我们要处理id="demo"的元素上的点击事件,并在点击按钮时显示当前日期。使用纯JavaScript,代码如下:var x = document.getElementById("demo");x.onclick = function () { document.body.innerHTML = Date();}可.....

目录

1 事件处理

2 常见事件

3 on()方法绑定事件

4 off()解除事件绑定

5 JQuery的事件对象

6 JQuery触发事件

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

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

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


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的事件对象

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

pageXpageY 事件发生时相对于页面左上角的鼠标位置(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

上一篇:

下一篇: