jQuery 事件 – BuildCodePro

jQuery事件详解指南

编程小白也能轻松理解的事件处理知识汇总

什么是事件？

事件就是用户或浏览器在网页上执行的操作，比如点击鼠标、按下键盘、页面加载完成等。

常见事件类型：

鼠标事件：click(点击), dblclick(双击), mouseenter(鼠标进入), mouseleave(鼠标离开)
键盘事件：keydown(按键按下), keyup(按键抬起)
表单事件：submit(提交表单), change(内容改变), focus(获得焦点), blur(失去焦点)
文档事件：ready(文档加载完成), resize(窗口大小改变), scroll(滚动)

事件绑定方法

jQuery提供了多种绑定事件的方法：

                    // 1. 直接事件方法

                    $(‘#btn’).click(function() {

                      console.log(‘按钮被点击了!’);

                    });

                    // 2. on() 方法（最灵活）

                    $(‘#btn’).on(‘click’, function() {

                      console.log(‘按钮被点击了!’);

                    });

                    // 3. bind() 方法（老版本方式，现在推荐使用 on()）

                    $(‘#btn’).bind(‘click’, function() {

                      console.log(‘按钮被点击了!’);

                    });

绑定多个事件：

                    // 使用on()同时绑定多个事件

                    $(‘#element’).on({

                      mouseenter: function() { console.log(‘鼠标进入’); },

                      mouseleave: function() { console.log(‘鼠标离开’); },

                      click: function() { console.log(‘点击’); }

                    });

事件解除绑定

当你不再需要某个事件时，可以解除绑定：

                    // 1. off() 方法（推荐）

                    $(‘#btn’).off(‘click’); // 解除绑定click事件

                    // 2. unbind() 方法（老版本）

                    $(‘#btn’).unbind(‘click’);

                    // 解除所有事件

                    $(‘#btn’).off(); // 解除这个元素的所有事件

解除特定函数的事件：

                    function handleClick() {

                      console.log(‘按钮被点击’);

                    }

                    $(‘#btn’).on(‘click’, handleClick);

                    // 只解除handleClick函数的绑定

                    $(‘#btn’).off(‘click’, handleClick);

事件对象

当事件发生时，jQuery会创建一个事件对象，包含事件相关信息：

                    $(‘#element’).click(function(event) {

                      // event 是事件对象

                      console.log(event.type); // 事件类型：’click’

                      console.log(event.target); // 实际触发事件的元素

                      console.log(event.pageX, event.pageY); // 鼠标位置

                      console.log(event.which); // 鼠标按键或键盘按键

                    });

常用事件对象方法：

event.preventDefault() – 阻止默认行为（如表单提交）
event.stopPropagation() – 阻止事件冒泡
event.stopImmediatePropagation() – 阻止其他事件处理函数执行

事件委托

当你有很多相似元素需要绑定事件，或者元素是动态添加的，事件委托非常有用：

                    // 传统方式（对每个元素绑定事件）

                    $(‘li’).on(‘click’, function() {

                      console.log(‘点击了列表项’);

                    });

                    // 使用事件委托（只绑定一次）

                    $(‘ul’).on(‘click’, ‘li’, function() {

                      console.log(‘点击了列表项’);

                    });

                    // 即使新添加的li元素也会自动拥有事件处理

                    $(‘ul’).append(‘<li>新添加的列表项</li>’);

委托的优点：

减少事件绑定次数，提高性能
自动处理动态添加的元素
简化代码维护

事件触发

除了用户操作，你也可以用代码触发事件：

                    // 触发一个事件

                    $(‘#btn’).click(); // 触发点击事件

                    $(‘#btn’).trigger(‘click’); // 同上

                    // 触发自定义事件

                    $(‘#element’).on(‘customEvent’, function() {

                      console.log(‘自定义事件被触发了！’);

                    });

                    $(‘#element’).trigger(‘customEvent’);

传递数据给事件处理函数：

                    $(‘#element’).on(‘customEvent’, function(event, data1, data2) {

                      console.log(data1, data2); // 输出 “Hello” 和 “World”

                    });

                    $(‘#element’).trigger(‘customEvent’, [‘Hello’, ‘World’]);

重要提示：事件处理中的 this

在事件处理函数中，this 指的是触发事件的 DOM 元素。

如果想使用 jQuery 方法，需要转换为 jQuery 对象：$(this)

事件处理实战演示

事件操作演示区

点击我

试试点击这个盒子

鼠标移入/移出

鼠标在这个区域移动

键盘输入

点击后输入文字

事件日志

事件日志将显示在这里…