JQuery中的on绑定事件函数解析
JS和JQuery绑定事件函数
不同于JS的原⽣绑定函数addEventListener，JQuery中的绑定函数如下：
on(events,[selector],[data],fn)
我们来分析每个参数的含义。（这⾥可以参考）
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)</title>
<script src="cdnjs.cloudflare/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 >点击每⼀个 p 元素返回数据，通过 on() ⽅法来实现。</div>
<p>这是⼀个段落。</p>
<p>这是另外⼀个段落。</p>
jquery ajax例子
<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函数的讲解已经全部完成，如有不⾜指出，还请评论区指出。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。