jquery的事件机制

最新推荐文章于 2026-03-07 00:32:20 发布

原创最新推荐文章于 2026-03-07 00:32:20 发布 · 284 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了jQuery中常见的事件绑定方法，包括click、blur、change等，并解释了如何使用on方式统一绑定事件。同时，深入探讨了jQuery事件对象的属性和方法，如event.data、event.stopPropagation和event.preventDefault。此外，还提到了jQuery的两大特点：链式编程和隐式迭代，帮助读者更好地理解和运用jQuery。

常见的事件绑定

click(handler) 单击事件。

blur(handler) 失去焦点事件。

mouseenter(handler) 鼠标进入事件。

mouseleave(handler) 鼠标离开事件。

dbclick(handler) 双击事件。
change(handler) 改变事件，如：文本框值改变，下拉列表值改变等。

focus(handler) 获得焦点事件。

keydown(handler) 键盘按下事件。

on方式绑定事件

最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQuery用on统一了所有的事件处理的方法，此方法兼容zepto(移动端类似于jQuery的一个库)。

jQuery的事件对象

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this，当前DOM对象

event.pageX 鼠标相对于文档左部边缘的位置

event.target 触发事件源，不一定===this

event.stopPropagation()；阻止事件冒泡

event.preventDefault(); 阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode 键盘按键代码

jQuery 的两大特点

（1）链式编程：比如.show()和.html()可以连写成.show().html()。

链式编程原理：return this。

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

    end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

（2）隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

举例：五角星评分