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);