jQuery中的on方法详细介绍

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/

猜你喜欢

转载自blog.csdn.net/lhjuejiang/article/details/80738587