JQuery绑定事件四种实现方法解析

下面就为您详细讲解“JQuery绑定事件四种实现方法解析”的完整攻略。

一、介绍

1.1 JQuery

JQuery是一个流行的JavaScript库，它允许开发人员以更少的代码编写更多的JavaScript功能。其中一个最重要的原因是它简化了许多常见的JavaScript任务。例如，与DOM交互、遍历元素集合、事件处理等。

1.2 绑定事件

事件绑定是指以编程方式将代码绑定到某个HTML元素的某个事件上，例如单击、鼠标移动、键盘敲击等。

二、四种方法

JQuery绑定事件有四种实现方法:

直接绑定。使用JQuery选择器，选择元素并直接绑定事件处理程序。
使用函数绑定。在函数内部绑定事件处理程序。
委托绑定。将事件处理程序绑定到父元素并使用选择器选择要处理的子元素。具有处理动态添加的元素的优势。
事件代理绑定。将事件处理程序绑定到父元素，但只有当事件由某些子元素触发时才会触发处理程序。

下面我们将对四种方法进行详细说明。

2.1 直接绑定

直接绑定是使用最广泛的方法。可以使用以下方式进行:

$(document).ready(function() {
  $("#button1").click(function(){
        alert("Button 1 Clicked");
    });
});

上述代码定义了当按钮"id=button1"被点击时的响应函数。

具体实例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="utf-8"> 
<title>直接绑定</title>
</head>
<body>
<button id="button1">按钮1</button>
<script type="text/javascript">
$(document).ready(function() {
  $("#button1").click(function(){
        alert("Button 1 Clicked");
    });
});
</script>
</body>
</html>

输出结果：当点击按钮1时将会弹出“Button 1 Clicked”的提示框。

2.2 使用函数绑定

函数绑定有时也叫做匿名函数绑定。可以使用以下方式进行:

$(document).ready(function() {
    function myEventFunction (event) {
        alert("You clicked me at " + event.timeStamp );
    }
    $("#button2").click(myEventFunction);
});

上述代码定义了处理程序函数。它包含传递给处理程序的事件参数。可以使用该参数获取事件属性。该代码还使用了类似于直接绑定的语法，但它使用函数名称而不是直接绑定函数代码。

具体实例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="utf-8"> 
<title>使用函数绑定</title>
</head>
<body>
<button id="button2">按钮2</button>
<script type="text/javascript">
$(document).ready(function() {
    function myEventFunction (event) {
        alert("You clicked me at " + event.timeStamp );
    }
    $("#button2").click(myEventFunction);
});
</script>
</body>
</html>

输出结果：当点击按钮2时将会弹出包含时间戳的提示框。

2.3 委托绑定

委托绑定是指为选择器匹配的所有元素添加事件处理程序，但是'在处理程序绑定时'，元素可以不存在。jQuery提供了一些有关事件委派的功能：

.on()方法 - 在选择器匹配的所有元素上绑定事件。
.delegate()方法 - 在选择器匹配的父元素上绑定事件。
.live()方法 - 在选择器匹配的所有元素及动态添加的元素上绑定事件。最新版的jquery已经不推荐使用该方法，推荐使用.on()方法绑定事件。

$(document).ready(function () {
    $("ul#list1").delegate("li", "click", function () {
        $(this).toggleClass("highlight");
    });
});

上述代码定义了对"ul#list1"的"li"元素的单击响应函数。它使用.toggleClass()方法切换"highlight"类以改变元素的背景色。

具体实例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="utf-8"> 
<title>委托绑定</title>
<style type="text/css">
.highlight {background-color: #ccc;color:#fff;}
</style>
</head>
<body>
<ul id="list1">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

<script type="text/javascript">
$(document).ready(function () {
    $("ul#list1").delegate("li", "click", function () {
        $(this).toggleClass("highlight");
    });
});
</script>
</body>
</html>

输出结果：当单击一个列表元素时，它将在高亮/未高亮之间进行切换。

2.4 事件代理绑定

事件代理绑定是指为选择器匹配的所有元素添加事件处理程序，但是处理程序只对指定的子元素（选择器结果）触发。jQuery提供了一些有关事件代理的功能：

.on()方法 - 在选择器匹配的元素上绑定事件，该元素下包含的所有每个目标元素都绑定相同的事件，可以与选择器联合使用。
.delegate()方法 - 在选择器匹配的父元素上绑定事件，该父元素下包含的所有每个目标元素都绑定相同的事件。
.live()方法 - 在选择器匹配的所有元素上绑定事件，但仅触发由给定选择器规定的后代元素匹配的事件。最新版的jquery已经不推荐使用该方法，推荐使用.on()方法绑定事件。

$(document).ready(function () {
    $("#table1").on("click", "tr td:nth-child(odd)", function () {
        $(this).parent().toggleClass("highlight");
    });
});

上述代码定义了响应函数。它使用toggleClass()方法切换"highlight"类以更改"tr"的背景颜色。

具体实例：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="utf-8"> 
<title>事件代理绑定</title>
<style type="text/css">
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

.highlight {background-color: #ccc;color:#fff;}
</style>
</head>
<body>
<table id="table1">
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>B3</td>
  </tr>
</table>

<script type="text/javascript">
$(document).ready(function () {
    $("#table1").on("click", "tr td:nth-child(odd)", function () {
        $(this).parent().toggleClass("highlight");
    });
});
</script>
</body>
</html>

输出结果：单击任何带有奇数列（第一列）的单元格将为整行添加背景颜色。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery绑定事件四种实现方法解析 - Python技术站

JQuery绑定事件四种实现方法解析

一、介绍

1.1 JQuery

1.2 绑定事件

二、四种方法

2.1 直接绑定

2.2 使用函数绑定

2.3 委托绑定

2.4 事件代理绑定

相关文章