jquery on 方法
干什么用的？
为元素绑定事件的。
参数是？
image.png
四个参数，三个是可选的。
先举一个最简单的例子。有event参数和function参数的.
点击段落弹出提示
<p>I love you</p>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("p").on("click",function(){
alert("this paragraph is clicked")
})
</script>
有三个参数的例子。event，data，function
<p>I love you</p>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function demo(e){
alert(e.data.msg);
}
$(function(){
$("p").on("click",{msg:"you clicked me"},demo);
})
</script>
这个data有点不太明白，demo是个回调函数规定了click时执行的函数。
上面这个例子也可以写成
<p>I love you</p>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("p").on("click",{msg:"you clicked me"},function(e){
alert(e.data.msg);
});
})
</script>
查了一下data是event事件的一个属性。目的就是为了获取on方法绑定时间时的附加数据。不过为啥要获取这个？？
jQuery Event.data 属性详解 - CodePlayer
另一个网上的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").each(function(i){
//each（）方法获取所有p元素
$(this).on("click",{x:i},function(event){
//给所有的p绑定click事件
alert("序号：" + $(this).index() + "。段落的数据为: " + event.data.x);
//index方法用于获取jquery对象（伪数组的索引号），event事件的data方法用于获取on参数中的附加数据，
});
});
});
</script>
</head>
<body>
<div style="color:red">点击每一个 p 元素返回数据，通过 on() 方法来实现。</div>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p>这是另外一个段落。</p>
这个data参数貌似只能是{xx1:xx}的形式。然后获取就是event.data.xx1。
jQuery DOM 元素方法 - index() 方法
有三个参数的例子。event,selector,function.
这个有点像事件委托了，如下面的例子，事件面对的对象不是div了。而是div下面的p元素了。
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>专注于编程开发技术分享</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>
<script>
$("div").on("click","p",function(){
alert($(this).text())
})
// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
</script>
</body>
拥有四个参数的例子
这大概就是data参数存在的意义？！
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>专注于编程开发技术分享</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>
<script>
var data = { id: 5, name: "张三" };
// 为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
// 附加数据可以是任意类型
$("body").on("mouseenter mouseleave", "#n5", data, function(event){
var $me = $(this);
//创建id为n5的jquery对象
var options = event.data; // 这就是传入的附加数据
if( event.type == "mouseenter"){
$me.html( "你好，" + options.name + "!");
//html方法用于修改文本内容。然后修改的内容来源于on参数中的附加数据
}else if(event.type == "mouseleave" ){
$me.html( "再见!");
}
});
</script>
</body>
下面这两个例子来源于
jQuery.on() 函数详解 - CodePlayer
