首页 > 编程笔记 > JavaScript笔记 阅读：2

jQuery事件绑定的3种情况（非常详细）

在页面加载完毕时，程序可以通过为元素绑定事件完成相应的操作。

在 jQuery 中，事件绑定通常可以分成为元素绑定事件、移除绑定事件和绑定一次性事件处理 3 种情况，下面分别进行介绍。

jQuery on()元素绑定事件

从 jQuery 3.0 开始，.bind() 绑定事件已被弃用。自 jQuery 1.7 以来，它就已被 .on() 将事件处理程序附加到文档的方法所取代。

在 jQuery 中，为元素绑定事件可以使用 on() 方法，该方法的语法格式如下： 
on(events, [selector], [data], fn)

例如，为普通按钮绑定一个 click 事件，用于在单击该按钮时弹出提示对话框，可以使用下面的代码： 
$("input:button").on("click", function () {
    alert('您单击了按钮');
});

【实例】为 <h3> 元素绑定 click 事件。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库： 
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <head> 标记中添加样式代码，代码如下： 
<style>
#content {
    text-indent: 2em;
    display: none;
}
</style>

3) 在页面的 <body> 标记中添加一个 id 属性值为 first 的 <div> 标记，其中包含一个 class 属性值为 title 的 <h3> 元素和一个 id 属性值为 content 的 <div> 元素。具体代码如下： 
<div id="first">
    <h3 class="title">什么是 jQuery?</h3>
    <div id="content">jQuery 是一个轻量级的 JavaScript 脚本库，它是目前最热门的 Web 前端开发技术之一。jQuery 的语法非常简单，它的核心理念是 “write less, do more！”（事半功倍）。目前，很多高校的计算机专业和 IT 培训学校都将 jQuery 作为教学内容之一，这对于培养学生的计算机应用能力具有非常重要的意义！</div>
</div>

4) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现为 id 属性值为 first 的 <div> 标记中的 <h3> 元素绑定 click 事件，使其在被单击的时候显示下方隐藏的 <div> 元素内容。具体代码如下： 
<script type="text/javascript">
$(document).ready(function () {
    $("#first h3.title").on("click", function () {
        $(this).next().show();
    });
});
</script>

运行本实例，在下图所示页面中单击文字“什么是 jQuery？”：


图 1 为<h3>元素绑定click事件

之后可以看到下图所示的页面：


图 2 触发 click 事件显示隐藏 <div> 内容

jQuery off()移除绑定事件

从 jQuery 3.0 开始，.unbind() 移除绑定事件已被弃用。它已被 .off() 移除绑定事件方法所取代。

在 jQuery 中，为元素移除绑定事件可以使用 off() 方法，该方法的语法格式如下： 
off(events, [selector], [fn])

在 off() 方法中，参数都是可选的，如果无参数，该方法将会删除匹配元素中所有绑定的事件。

例如，要移除为普通按钮绑定的 click 事件，可以使用下面的代码： 
$("input:button").off("click");

【实例】为 <h3> 元素移除绑定的 mouseover 事件。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库： 
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <head> 标记中添加样式代码，代码如下： 
<style>
#content {
    text-indent: 2em;
    display: none;
}
</style>

3) 在页面的 <body> 标记中添加一个 id 属性值为 first 的 <div> 标记，其中包含一个 class 属性值为 title 的 <h3> 元素和一个 id 属性值为 content 的 <div> 元素。具体代码如下： 
<div id="first">
    <h3 class="title">什么是 jQuery?</h3>
    <div id="content">jQuery 是一个轻量级的 JavaScript 脚本库，它是目前最热门的 Web 前端开发技术之一。jQuery 的语法非常简单，它的核心理念是 “write less, do more！”（事半功倍）。目前，很多高校的计算机专业和 IT 培训学校都将 jQuery 作为教学内容之一，这对于培养学生的计算机应用能力具有非常重要的意义！</div>
</div>

4) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现为 id 属性值为 first 的 <div> 标记中的 <h3> 元素绑定 click 事件和 mouseover 事件，使其在被单击的时候显示下方隐藏的 <div> 元素内容，并在鼠标指针移动到文字“什么是 jQuery？”上时显示“我绑定了 mouseover 事件”。具体代码如下： 
<script type="text/javascript">
$(document).ready(function () {
    $("#first h3.title")
        .on("click", function () {
            $(this).next().show();
        })
        .on("mouseover", function () {
            $(this).append("<p>我绑定了 mouseover 事件</p>");
        });
});
</script>
运行本实例，在页面中将鼠标指针移动到文字“什么是 jQuery？”上，之后单击文字“什么是 jQuery？”，最终效果如下图所示：


图 3 为<h3>元素绑定click和mouseover事件

由此可见，<h3> 元素既绑定了 click 事件，又绑定了 mouseover 事件。这时，在绑定事件的代码下面加上一个移除绑定事件来移除绑定的 mouseover 事件，代码如下： 
$("#first h3.title").off("mouseover");
再次运行本实例，运行结果如下图所示：


图 4 移除绑定的 mouseover 事件

由此可见，绑定的 mouseover 事件已被移除。

jQuery one()绑定一次性事件处理

在 jQuery 中，为元素绑定一次性事件处理可以使用 one() 方法。

one() 方法为每一个匹配元素的特定事件（如 click 事件）绑定一个一次性事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与 on() 方法的相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想阻止默认的行为，又想阻止事件起泡，这个事件处理函数必须返回 false。

one() 方法的语法格式如下： 
one(type, [data], fn)

例如，要实现只有在用户第一次单击匹配的 <div> 元素时，弹出提示对话框显示 <div> 元素的内容，可以使用下面的代码： 
$("div").one("click", function () {
    alert($(this).text()); // 在弹出的提示对话框中显示 <div> 元素的内容
});

相关文章