jQuery中的on方法详细介绍

忘是亡心i 2022-05-22 07:58 222阅读 0赞

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。  
如需移除事件处理程序，请使用 off() 方法。

如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法：

.on( events [, selector ] [, data ], handler(eventObject) )

events：类型: String（必选）

*  一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector：类型: String（可选）

*  一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。

data：类型: Anything（可选）

*  当一个事件被触发时，要传递给事件处理函数的event.data。

handler(eventObject)：类型: Function()   （必选）

*  事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。

嗯，这个我们用的其实也还蛮多的，所以events和fn我就不详细说了，主要是data参数和selector参数说一下

function可以是false，嗯，看个例子：

取消表单的提交动作，并且通过返回 false 的方法来防止事件冒泡：

$("form").on("submit", false)

如果data参数给.on()并且不是null 或者 undefined，那么每次触发事件时，event.data都传递给处理程序。data参数可以是任何类型，但如果是字符串类型时，那么selector参数必须提供，或明确地传递null，这样的 data 参数不会误认为是选择器。最好是使用一个对象（键值对） ，所以可以作为属性传递多个值。

看个小例子

$('.div1').on('click',{name:"leo"},function(ev){
            console.log(ev.data.name);//leo
        });

如果省略selector或者是null，那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的

当提供selector参数时，事件处理程序是指为委派 事件（注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。

事件处理只能绑定在当前被选中的元素上;而且，在您的代码调用.on()的时候，他们必须在页面文档中已经存在。为了确保目前的元素可以被选择的

**使用事件委托的好处：**

委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。 在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。

除了可以给未创建的后代元素绑定事件外（即上面提到的优势），代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。

看个例子：

<!DOCTYPE html>
    <html>
    <head>
      <style>
    p { background:yellow; font-weight:bold; cursor:pointer;
        padding:5px; }
    p.over { background: #ccc; }
    span { color:red; }
    </style>
      <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <p>Click me!</p>
    <span></span>
    <script>
    var count = 0;
    $("body").on("click", "p", function(){
      $(this).after("<p>Another paragraph! "+(++count)+"</p>");
    });
    </script>
     
    </body>
    </html>

点击任何一个段落时，就在它后面追加一个段落。注意，.on() 会为任何段落添加事件，包括新生成的段落，因为当事件冒泡到已经存在的 body 元素上时，就会触发绑定的事件

$("body").on("click", "a", function(event){
      event.preventDefault();
    });

使用 preventDefault 方法，取消链接的默认动作。

参考文章：[https://www.jquery123.com/on/][https_www.jquery123.com_on]

[https_www.jquery123.com_on]: https://www.jquery123.com/on/