jQuery事件机制

jQuery事件绑定：

简单事件绑定

jQuery.click(fn)			//单击事件
//jQuery对象直接点出来

缺点：不能一次注册多个事件
2. bind方式注册事件（了解）

jQuery.bind(eventType,fn)
//第一个参数：事件类型
//第二个参数：事件处理程序


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

jQuery.bind(json)
//json为对象{事件类型：事件处理函数，事件类型：事件处理函数...}


$("p").bind({
      click:function () {
        alert("呵呵")
      },
      mouseenter:function () {
        alert("哈哈")
      }
    });

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

delegate注册委托事件（了解）

jQuery.delegate(selector,eventType,fn)
//这是给父级注册委托事件，利用事件冒泡的原理，对子元素进行操作时
//会冒泡到父级元素，判断是否为  selector  以及 事件类型，如果是就执行处理函数
//反之，不执行
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数

$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

缺点：只能注册委托事件

on注册事件（重点）

jQuery.on(events[,selector][,data],handler);
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数

A.on注册简单事件

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

B.on注册委托事件，同样是利用事件冒泡

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

jQuery事件执行顺序：先执行自己的委托事件，再执行自己的事件，然后，冒泡父级元素，重复上述

jQuery事件解绑：

unbind方式（不用）

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

undelegate方式（不用）

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off方式（重点）

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件，这种方式会把 委托事件为click 也解绑
$(selector).off("click");

这三种解绑不需要对应解绑，每种都是可以把三种方式注册的事件全部解绑

例子：

<div>
  <p>111111</p>
  <p>111111</p>
</div>


    // 这个是p自己注册的事件（简单事件）
    $("p").on("click", function () {
      console.log("呵呵哒");
    });
    //给div自己执行的
    $("div").on("click", function () {
      console.log("呜呜呜");
    });
    //给div里面的p执行 委托事件
    $("div").on("click", "p", function () {
      console.log("嘿嘿嘿")
    });

 //$("p").off("click");//嘿嘿嘿   呜呜呜
 //$("div").off("click");//呵呵哒

jQuery事件触发

扫描二维码关注公众号，回复： 5250165 查看本文章

//点击$("#btn")对象，触发p元素的点击事件
 $("#btn").on("click",function () {
      //触发p元素的点击事件
      //$("p").click();
      //$("p").trigger("click");
    });

猜你喜欢