jQuery中on()函数的用法笔记

jQuery中on()函数的用法笔记

1、用法一：on(events,selector,data,handler)，

1.1、参数的含义结合代码片一：

a).events:一个或者多个事件名称加命名空间组成中间隔着空格,比如("click")|（“click.one mouseenter.two”）;

b).seletor:选择器，用于查找到选择绑定事件的DOM对象，可选，没有指定的时候默认将事件绑定在调用on函数的对象上;

c).data:可选，传入的数据存放在e.data中，再间接传入到事件处理函数之中；

d).handler:事件处理函数，可以用false代替；

代码片公用的html

<ul style="width: 400px;height: 400px;border: solid 1px #000">
<li>1</li>
<li id="two">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

代码片一：

(function(){
var data = {
name: "数据",
}
function handler(e){
console.log(e.data);
console.log($(this).html());
}
$("ul").on("click.one","#two",data,handler);
/*  只有点击id为two的li才会触发
输出Object {name: "数据"}
2
*/
$("ul").on("click.one",data,handler);
/* 只要在ul的范围内点击就能够触发
输出 Object {name: "数据"}
<li>1</li>
<li id="two">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
*/
})();

1、首先如果将事件处理函数分离出来比如handler，在函数内部如果需要使用到event对象，则必须在函数声明的时候
必须设置e形式参数；

2、e.data的输出可以知道data参数是存放在event对象中的

3、对比两次绑定事件的输出：

a).第一次绑定指定了selector，那么事件是绑定在由该s

elector查找到的DOM元素

b).第二次是绑定在调用该on函数的ul上的

c).handler函数的this指向取决于事件绑定在谁上面，所

以两次的$(this).html()输出不一样

2、用法二：on(eventsMap,selector,handler)

2.1、参数的含义结合代码片二分析：

a).eventsMap:一个对象（事件--事件处理函数的映射），即是对象的属性key是事件名，属性值value是事件处理函数；
比如{
click: handler1,
mouseenter: handler2
}

b).seletor:选择器，用于查找到选择绑定事件的DOM对象，可选，没有指定的时候默认将事件绑定在调用on函数的对象上;

c).data:可选，传入的数据存放在e.data中，再间接传入到事件处理函数之中；

代码片二：

var eventsMap = {
click: handler1,
mouseenter: handler2
}
function handler1(e){
console.log("click");
}
function handler2(e){
console.log("mouseenter");
}
$("ul").on(eventsMap);