JQuery中的on绑定事件函数解析

最新推荐文章于 2023-09-24 19:17:32 发布

庄熊旅

最新推荐文章于 2023-09-24 19:17:32 发布

阅读量439

点赞数 1

CC 4.0 BY-SA版权

文章标签： js javascript jquery

本文链接：https://blog.csdn.net/qq_41606120/article/details/114584665

本文详细解析了JQuery中的事件绑定函数on(events,[selector],[data],fn)的使用方法，特别是data参数的作用及其应用场景，通过实例帮助读者更好地理解和运用。

JS和JQuery绑定事件函数

不同于JS的原生绑定函数addEventListener，JQuery中的绑定函数如下：
on(events,[selector],[data],fn)
我们来分析每个参数的含义。（这里可以参考JQuery文档）
events表示事件名，比如“click”，这很好理解
selector文档说的很绕，但实际上这个并不重要，很少用到，而且省略也毫无影响。
重点在于data和fn。
fn表示处理函数，也很好理解。有时候它会携带一个或几个参数。
data就有点难理解了，文档说的是

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

然后核心问题是：
data是什么？它来自哪里？它要做什么？
data也就是event.data，这时候大家可能会困惑，event又是什么？是对象吗？但是也没定义啊？其实event在这里完全可以省略，它只是一个逻辑上的称呼，可以理解为中介。也就是说，当这个事件需要对几个数据进行操作时（注意这个数据可以跟该事件毫无逻辑上的关系），我们就可以传递这个数据给函数，而不用关心事件跟数据的关系。

然后是data来自哪里。
data可以来自于任何地方，即全局的data，或者是传递时现场定义的data。但是，要注意，
如果传入的是外部数据，那么on()函数里面的data就可以省略。
如果传入的是其他数据，那么就要自己定义，并将其包含在{}中传入，然后fn定义event参数，并在event.data中获取用户自己定义的数据。例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").each(function(i){
    $(this).on("click",{x:i,y:5,z:10},function(event){
      alert("序号：" + $(this).index() + "。段落的数据为: " + event.data.x);
		alert(event.data.x+event.data.y+event.data.z);
    });
  });
});
</script>
</head>
<body>

<div style="color:red">点击每一个 p 元素返回数据，通过 on() 方法来实现。</div>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</html>

在这段代码中我们重点关注这一句。

$(this).on("click",{x:i,y:5,z:10},function(event){
alert(event.data.x+event.data.y+event.data.z);});

这里的on函数中的data就是{x:i,y:5,z:10}这一段，后续处理函数中event.data.x/y/z就能分别获取到对应的值。也就是说data={key1:value1, key2:value2, key3:value3……},而对应的event.data.key1/key2/key3就能获取到对应的value。

至此，有关on函数的讲解已经全部完成，如有不足指出，还请评论区指出。