本文详细解析 jQuery on() 方法，对比其与直接绑定方式的区别。重点介绍事件委托机制及其对冒泡事件的要求，演示如何通过空格分隔绑定多个事件及命名空间，并说明为动态加载元素绑定事件的正确方式。同时梳理 on() 方法的参数结构、默认行为取消及优先级关系，帮助开发者高效处理 DOM 事件。
on() 与直接绑定方法的区别
一、on('click') 与 $('').click() 方法的区别：
on('click')：采用事件委托机制
// 在 body 元素上绑定 click 事件处理函数 handler，如果这个 click 事件是由其后代的 P 元素触发的，就执行 handler $(document.body).on("click", "p", handler);
事件委托机制的核心在于，我们不需要为每个 P 元素单独绑定 click 事件处理函数，而是将事件监听委托给其公共的祖辈元素（在示例中为 document.body）。通过这种方式，“告诉”祖辈元素：当接收到 click 事件触发通知，且该事件确实由指定的 P 元素之一引发时，执行绑定在祖辈元素上的处理函数。
需要注意："focus"、"blur" 等部分事件不支持冒泡，因此无法使用事件委托机制，直接绑定将无效。不过，这些事件通常有对应的支持冒泡的替代事件，例如与 "focus" 对应的 "focusin"，以及与 "blur" 对应的 "focusout"。此外，开发者也可以使用 event.stopPropagation() 方法，阻止当前触发的事件继续冒泡。
1. 绑定多个事件时，可以使用空格将事件类型和命名空间隔开，例如：“click” 或 “keydown.myPlugin”。或者采用以下格式：
on({
"clcik": function(){},
mouseover: function(){}
})
命名空间: namespace 名字{ 定义的数据； 定义的函数； 也可以是定义的类...}
2. on() 方法可以为动态生成的元素及其属性绑定事件。
需要注意的是，.click() 方法无法为页面动态加载的元素添加事件监听，而 on() 方法可以解决这个问题。
on() 方法参数详解
二：on() 的参数说明
$().on(events,[selector],[data],fn) 或 events-map,[selector],[data]
events: 一个或多个用空格分隔的事件类型和可选的命名空间。
events-map: 一个用字符串表示的对象，包含一个或多个空格分隔的事件类型和可选的命名空间，其值表示事件绑定的处理函数。
selector: 一个选择器字符串，用于过滤触发事件的选择器元素的后代。如果 selector 为 null 或被省略，则当事件到达选定的元素时，事件总是触发（即直接绑定在选定元素上）。
data: 当事件被触发时，要传递给 event.data 给事件处理函数的数据。 fn: 该事件被触发时执行的函数。如果事件处理函数 handler 仅仅只为返回 false 值，可以直接将 handler 设为 false。false 值也可以作为一个函数的简写形式，表示返回 false。
如果要取消默认事件行为，可以直接传入 false。
$("form").on("submit", false)
map: 规定事件映射对象 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
事件处理优先级关系
三：onclick, click, on() 的优先关系：onclick > click > on()；
以上这篇 js 事件 on 动态绑定数据,绑定多个事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。