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