在前端开发中，常常遇到需要在元素失去焦点（blur）时执行某些操作的场景，例如输入框自动校验、表单提交等。然而，在某些情况下，我们希望当用户点击页面上特定的元素时不触发该操作，这就需要用到 jQuery 的事件委托和事件对象相关知识。
事件委托
事件委托是指将事件绑定在父元素上，通过冒泡机制来处理子元素的事件。相比直接给每个子元素绑定事件，使用事件委托能够提高性能和代码可读性。具体实现如下：
------------------------------- -------------- --------------
其中，parentSelector 是父元素的选择器，可以是任何有效的 CSS 选择器；eventName 是要绑定的事件名，例如 click、blur 等；childSelector 是子元素的选择器，只有匹配该选择器的子元素会触发事件；eventHandler 是事件处理函数，用于处理触发事件后的逻辑操作。
事件对象
事件对象是指在事件发生时自动生成的一个包含事件相关信息的对象。通过事件对象，我们可以获取事件类型、目标元素、鼠标坐标等相关信息。在 jQuery 中，事件对象作为事件处理函数的第一个参数传入。
实现需求
在本文中，我们实现一个需求：当输入框失去焦点时自动校验，并在用户点击“提交”按钮时不触发该操作。代码如下：
--------- -----
------
------
----- ----------------
---------------------------
------- ------------------------------------------------------------
-------
----------- -
------- --- ----- ----
-
--------
-------
------
------
------ ---------------------------
------ ----------- ------------- ----------------
----
------ --------------------------
------ --------------- ------------- ----------------
----
------- -------------------------
-------
--------
-------------------- ------------------ ---------------------- --------------- -
--- ------- - ----------------
-- -------------- --- --- -
--------------------------
- ---- -
-----------------------------
-
---
------------------------------------ --------------- -
-----------------------
---
---------
-------
-------上述代码中：
- 给表单元素绑定
blur事件，通过事件委托处理所有输入框（input[type=text]和input[type=password]）的失去焦点事件； - 在事件处理函数中，通过
event.target获取触发事件的元素，判断该输入框的值是否为空，如果为空则添加错误样式，否则移除错误样式； - 给提交按钮绑定
click事件，阻止默认的表单提交行为。
总结
本文介绍了如何使用 jQuery 的事件委托和事件对象实现“在元素失去焦点时执行某些操作，但不在特定元素被点击时执行”的需求。通过学习本文，读者可以掌握事件委托和事件对象的基本用法，并能够运用它们处理更多复杂的场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30757