jQuery Api 学习（五、jQuery 文档 - 操作事件）

最新推荐文章于 2024-10-02 05:39:15 发布

「已注销」

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量150

点赞数 3

分类专栏： # jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Ares5kong/article/details/121033442

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中如何绑定事件，包括使用on、one以及特定事件方法，如click、blur等。同时，讲解了如何解绑事件通过off函数，以及如何自动触发事件利用trigger方法。这些内容对于理解和操作jQuery中的事件处理至关重要。

摘要由CSDN通过智能技术生成

一、绑定事件

1. 通过 on 绑定

通过该形式可以添加所有 DOM 支持的事件

函数名	参数	所属
on	事件名，回调函数	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="button" value="按钮" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('input').on('click', () => {
        alert('按钮被点击')
      })
    </script>
  </body>
</html>

2. 只执行一次的事件

想让元素事件只执行一次就解除，可以选择该方法

函数名	参数	所属
one	事件名，回调函数	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="button" value="按钮" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('input').one('click', () => {
        alert('按钮被点击')
      })
    </script>
  </body>
</html>

3. 通过事件特有方法绑定

jQuery 不仅能通过 on 方法来添加所有 DOM 支持的事件，还为一些事件提供了特有的函数，让其书写更方便

函数名	参数	所属	事件类型
blur	回调函数	jQuery 核心对象	失去焦点事件
change	回调函数	jQuery 核心对象	元素值改变事件
click	回调函数	jQuery 核心对象	单击事件
dblclick	回调函数	jQuery 核心对象	双击事件
error	回调函数	jQuery 核心对象	元素加载错误事件
focus	回调函数	jQuery 核心对象	元素获得焦点事件
keydown	回调函数	jQuery 核心对象	按键压下事件
keyup	回调函数	jQuery 核心对象	按键弹起事件
mousedown	回调函数	jQuery 核心对象	鼠标按下事件
mouseenter	回调函数	jQuery 核心对象	鼠标经过事件
mouseleave	回调函数	jQuery 核心对象	鼠标离开事件
scroll	回调函数	jQuery 核心对象	滚轮事件
select	回调函数	jQuery 核心对象	文本选中事件
submit	回调函数	jQuery 核心对象	提交事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="button" value="按钮" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('input').click(() => {
        alert('按钮被点击')
      })
    </script>
  </body>
</html>

二、解绑事件

解除 DOM 元素绑定的事件

函数名	参数	所属
off	事件名	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="button" value="按钮" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('input').click(() => {
        alert('按钮被点击')
      })

      // 解除事件
      $('input').off('click')
    </script>
  </body>
</html>

三、自动触发事件

让事件自动触发，而非用户画面操作时可以选择该方法

函数名	参数	所属
trigger	事件名	jQuery 核心对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="button" value="按钮" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // 绑定事件
      $('input').on('click', () => {
        alert('按钮被点击')
      })
      // 触发事件
      $('input').trigger('click')
    </script>
  </body>
</html>