JQuery发展历程及注册委托事件的概念

简单事件绑定(click,mouseenter,mouseleave)===>bind事件绑定===>delegate事件绑定===>on事件绑定

1.简单事件绑定

$("p").click(function(){
    //事件响应方法
});

缺点：不能绑定多个事件

2.bind事件绑定

$("p").bind("click,mouseenter",function(){
    //事件响应方法
});

第一个参数：事件类型

第二个参数：事件处理函数

缺点：不支持动态事件绑定

3.delegate注册，委托事件

<div>
    <span></span>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

$("div").delegate("p","click",function(){  //此时div中所有的 p 都会触发委托代理事件，但是span不会
    console.log($(this));  //当前点击的 p 标签
});

第一个参数：selector，要绑定事件的元素
第二个参数：事件类型
第三个参数：事件处理函数

特点：给父元素注册委托事件，最终还是由子元素执行

原理：给div（父元素）注册委托代理事件，当点击 p 触发事件时，（p 本身是没有任何事件，是借用冒泡，点击p 触发父元素（div）的委托代理事件），

此时 div 会查看点击的的事件元素和参数1 是否一致，如果一致则同意把事件给p。

可理解为：快递员，储存柜和自己的关系

缺点：只能注册委托事件，需要记得注册事件太多

4.on事件绑定

方式1：on注册简单事件

$(selector).on("click",function(){}); //给$(selector)绑定事件，由自己触发，不支持动态绑定

方式二：on注册委托事件

$(selector).on("click","span",function(){}); //给$(selector)绑定代理事件，但必须是它的内部子元素span 才能触发这个事件，支持动态绑定

on注册事件的语法：

第一个参数：events，绑定事件的名称，可以用空格分隔的多个事件

第二个参数：selector，执行事件的后代元素（可选），如果没有后代元素，事件则自己执行

第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）

第四个参数：handler，事件处理函数

$(selector).on(events[,selector][,data],handler);

JQuery发展历程及注册委托事件的概念

猜你喜欢