程序员scholar 程序员scholar
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • jQuery

    • jQuery 入门
    • jQuery 选择器
    • jQuery 样式操作
    • jQuery 效果
    • jQuery 属性操作
    • jQuery 文本属性值操作
    • jQuery 元素操作
    • jQuery 尺寸、位置操作
    • jQuery 事件
      • 1. jQuery 事件注册
        • 1.1 单个事件注册
      • 2. jQuery 事件处理
        • 2.1 事件处理 on() 绑定事件
        • 1-1 on() 方法的优势1
        • 1-2 on() 方法的优势2
        • 1-3 on() 方法的优势3
        • 2.2 事件处理 off() 解绑事件
        • 2.3 自动触发事件 trigger()
      • 3. jQuery 事件对象
      • 4. 综合示例
    • jQuery 其他方法
  • jQuery
  • jQuery
scholar
2024-07-24
目录

jQuery 事件

# jQuery 事件

# 1. jQuery 事件注册

# 1.1 单个事件注册

element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })

// 其他常用事件和原生事件基本一致,比如:
// mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
1
2
3
4
5

# 2. jQuery 事件处理

# 2.1 事件处理 on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。

  • 语法:

    element.on(events, [selector], fn)
    
    1
  • 参数:

    • events:一个或多个用空格分隔的事件类型,如 "click" 或 "keydown"。
    • selector:可选,子元素选择器,用于事件委派。
    • fn:回调函数,即绑定在元素身上的事件处理函数。

# 1-1 on() 方法的优势1

  • 绑定多个事件和多个事件处理程序:

    $('div').on({
        mouseover: function() {},
        mouseout: function() {},
        click: function() {}
    });
    
    // 如果事件处理程序相同
    $('div').on("mouseover mouseout", function() {
        $(this).toggleClass("current");
    });
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

# 1-2 on() 方法的优势2

  • 事件委派操作:把原本绑定在子元素上的事件绑定在父元素上,事件被委派到父元素。

    $('ul').on('click', 'li', function() {
        alert('hello world!');
    });
    
    // 在此之前有 bind(), live() 和 delegate() 等方法来处理事件绑定或事件委派,推荐使用 on() 代替这些方法。
    
    1
    2
    3
    4
    5

# 1-3 on() 方法的优势3

  • 动态创建的元素绑定事件:click() 方法无法绑定动态生成的元素事件,on() 可以绑定。

    $('div').on("click", 'p', function() {
        alert("我可以给动态生成的元素绑定事件");
    });
    
    $("div").append($("<p>我是动态创建的p</p>"));
    
    1
    2
    3
    4
    5

# 2.2 事件处理 off() 解绑事件

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

    $("p").off() // 解绑 p 元素所有事件处理程序
    $("p").off("click") // 解绑 p 元素上的点击事件
    $("ul").off("click", "li"); // 解绑事件委托
    
    1
    2
    3
  • 注意: 如果希望某事件只触发一次,可以使用 one() 方法来绑定事件。

# 2.3 自动触发事件 trigger()

  • 有些事件希望自动触发,比如轮播图自动播放功能与点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,而不必依靠鼠标点击。

  • 语法:

    element.click() // 简写形式
    
    element.trigger("type") // 自动触发模式
    
    1
    2
    3
    $("p").on("click", function () {
        alert("hi~");
    });
    
    $("p").trigger("click"); // 自动触发点击事件,不需要鼠标点击
    
    1
    2
    3
    4
    5
  • 第三种自动触发模式 triggerHandler():

    element.triggerHandler("type")
    
    // 注意:triggerHandler() 不会触发元素的默认行为,这是与前面两种的区别
    
    1
    2
    3

# 3. jQuery 事件对象

  • 事件被触发时会产生事件对象,包含关于事件的详细信息。

  • 语法:

    element.on(events, [selector], function(event) {
        // 阻止默认行为:
        event.preventDefault(); 
        // 或者 
        return false;
    
        // 阻止冒泡: 
        event.stopPropagation();
    });
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
  • 事件对象常用属性和方法:

    • event.preventDefault():阻止事件的默认行为。
    • event.stopPropagation():阻止事件冒泡。

# 4. 综合示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件处理示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 单个事件注册
            $("button").click(function() {
                alert("Button clicked!");
            });

            // on() 方法绑定多个事件
            $("div").on({
                mouseover: function() {
                    $(this).css("background-color", "yellow");
                },
                mouseout: function() {
                    $(this).css("background-color", "lightgray");
                },
                click: function() {
                    $(this).css("background-color", "red");
                }
            });

            // 事件委派
            $("ul").on("click", "li", function() {
                alert($(this).text());
            });

            // 解绑事件
            $("#unbind").click(function() {
                $("div").off("mouseover mouseout click");
                alert("Events unbound!");
            });

            // 自动触发事件
            $("#trigger").click(function() {
                $("button").trigger("click");
            });
        });
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lightgray;
            margin: 20px;
            text-align: center;
            line-height: 100px;
        }
        ul {
            list-style-type: none;
        }
        li {
            cursor: pointer;
            margin: 5px;
        }
    </style>
</head>
<body>
    <button>Click me</button>
    <button id="unbind">Unbind Events</button>
    <button id="trigger">Trigger Click</button>
    <div>Hover or Click</div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
jQuery 尺寸、位置操作
jQuery 其他方法

← jQuery 尺寸、位置操作 jQuery 其他方法→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式