jQuery-委托事件和on方法注册事件

delegate注册委托事件

delegate--代理、委托
事件代理----事件最终不是由$("#first")执行，它只是代理元素
第一个参数：最终发生事件的元素
第二个参数：事件类型
第三个参数：函数

事件执行顺序：对于被委托者来说先执行委托事件，后执行简单事件。
例：下面的例子中，如果为p、div都注册点击事件，再为div注册委托事件，
则先执行p的点击事件，再执行div注册的委托事件，最后执行div的点击事件

 

on方法注册简单事件与委托事件

<script>
/**
* jQuery-1.7版本后综合所有的注册事件的方式，出现了on方法
* on注册事件
* 第一个参数：事件类型
* 第二个参数：如果使用事件代理的方式，则需要填写最终触发事件的元素
* 第三个参数：data(暂时不知有什么用，但不用填写)
* 第四个参数：function(){}--函数
*/

// on注册事件的两种方式
// 第一种-----为自己注册事件
// 这种方式对于新建的元素不会附加事件
$("#second>p").on("click",function () {
alert("second");
});
// 第二种----事件代理(为父元素注册事件)
// 这种方式对于新建的子元素同样有事件附加
$("#third").on("click","p",function () {
alert("third");
});
</script>

<!--off方法解除绑定事件-->
<script>
// 第一种解除方法
// $("p").click();

// 第二种方法：off方法解除
$("p").off("click");
//由于只有第二个div中的p本身注册了点击事件，所以只有第二个div中p解除了事件
</script>

<!--trigger方法触发事件-->
<script>
$("#dv").on("click",function () {
alert("点击了");
});
$("#btn").on("click",function () {
// 第一种方法---直接调用它的click函数
// $("#dv").click();
// 第二种方法---使用trigger方法
$("#dv").trigger("click");
alert("由按钮触发的");
});
</script>

转载于:https://www.cnblogs.com/Smile-W/p/10730386.html