首页  >  文章  >  jquery事件添加有几种方式

jquery事件添加有几种方式

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原创
2023-06-21 14:53:572569浏览

jquery事件添加的方式有:1、直接在标签上使用 JavaScript,代码简洁易懂无需引入其他库或文件;2、使用“onclick”“onmouseover”等方法,可以重新组织到一个单独的 JavaScript 文件中,更易于管理和共享;3、“.bind()”绑定事件,可以绑定多个事件处理程序到单个元素;4、“.on()”绑定事件,支持委托事件处理程序可以减少代码复杂度。

jquery事件添加有几种方式

本教程操作系统:Windows10系统、jQuery3.6.0版本、Dell G3电脑。

jQuery 提供了许多添加事件处理程序的方式,这里主要介绍其中的四种方式:

1. 直接在标签上使用 JavaScript

   ```HTML
   <button onclick="alert(&#39;Hello world!&#39;)">Click Me</button>
   ```

优点:

  • 代码简洁易懂

  • 无需引入其他库或文件

缺点:

  • 不利于维护和复用 

  • 耦合度高,JavaScript 和 HTML 代码混杂在一起

2. 使用元素方法 `onclick` / `onmouseover` 等等

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   $(&#39;#foo&#39;).click(function() {
     alert(&#39;Hello world!&#39;);
   });
   ```

优点:

  • 与直接在标签上使用 JavaScript 相比,代码可以重新组织到一个单独的 JavaScript 文件中,更易于管理和共享

  • 支持链式调用

缺点:

  • 如果有大量的事件和处理程序需要设置,则此方法可能变得冗长和难以维护

  • 对象方法将事件依赖于对象本身的生命周期

3. 使用 `.bind()` 绑定事件

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   var foo = function() {
     alert(&#39;Hello world!&#39;);
   };
   $(&#39;#foo&#39;).bind(&#39;click&#39;, foo);
   ```

优点:

  • 可以绑定多个事件处理程序到单个元素

  • `$.bind()` 和 `$.unbind()` 方法可用于监控事件注册/注销流程

缺点:

  • 在 jQuery 版本 3.0 中已经废弃了 `.bind()`, 推荐使用 `.on()`

4. 使用 `.on()` 绑定事件

以下是使用jQuery的`.on()`方法进行事件绑定的示例代码:

```javascript
$(document).on(&#39;click&#39;, &#39;#myButton&#39;, function() {
  // 事件处理程序
});
```

`.on()` 方法可以接受三个参数。第一个参数是要监听/绑定的事件类型;第二个参数是可选的选择器字符串或 DOM 节点,用于限制响应的元素集合;第三个参数是回调函数,即事件发生时要执行的动作。

优点:

  • `.on()` 方法允许你为非常灵活地为文档/元素添加多个事件处理程序。

  • 可以通过 `off()` 方法移除所添加的事件处理程序。

  • `.on()` 方法还支持委托事件处理程序,在大量操作元素或动态添加元素时会极大地减少代码的复杂度。

缺点:

  • 根据附加的事件和元素数量,直接绑定很多事件处理程序可能会导致性能问题。

  • 在 jQuery 版本低于 1.7 的旧代码中无法使用`.on()`, 需要使用其它方法如 `.bind()` (需要注意 该方法以后也将被废弃) 和 `.delegate()`。

以上是jquery事件添加有几种方式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn