jQuery 事件处理 on()绑定 off()解绑 trigger() & triggerHandler()事件触发

78 阅读 0 评论 52 点赞

我是靠谱客的博主能干哈密瓜，最近开发中收集的这篇文章主要介绍jQuery 事件处理 on()绑定 off()解绑 trigger() & triggerHandler()事件触发，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

因为普通注册事件方法的不足，jQuery又开发了多个处理方法，

on(): 用于事件绑定，目前最好用的事件绑定方法

off(): 事件解绑

trigger() / triggerHandler(): 事件触发

其中triggerHandler()不触发默认行为

css部分代码

<style>
div,
ul {
width: 300px;
margin-top: 10px;
background-color: blueviolet;
}
</style>

html & js部分代码

<body>
<div class="n1">on()方法优势1</div>
<ul class="n2">
<li>虎子1</li>
<li>虎子2</li>
<li>虎子3</li>
</ul>
<div class="n3">on()方法优势3</div>
<div class="n4">one() 但是它只能触发事件一次</div>
<script>
// on()方法优势1:可以绑定多个事件,多个处理事件处理程序.
$(".n1").on({ //语法1:
//事件:方法(){},多个方法用逗号隔开,最后一个不用添加逗号
mouseover: function() {
alert("鼠标经过提醒,来了");
},
mouseout: function() {
alert("鼠标经过提醒,走了");
},
click: function() {
alert("鼠标点击提醒,点击了");
}
})
//on()方法优势2:可以事件委托操作.事件委派定义是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父亲元素.
//在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们
$(".n2").on("click", "li", function() {
alert("委派给父元素的点击事件")
})
// on()方法优势3:动态创建元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件
$(".n3").on("click", "p,span", function() { //给未来动态创建的元素绑定一个点击事件,不同类型的元素名用逗号隔开,不写类名则动态生成的元素都会绑定一个点击事件
alert("on()动态生成的元素绑定事件");
})
$(".n3").append($("<p>我是动态创建的p</p>")); //在n3中创建一个p
var span = $("<span>我是后来创建的span</span>");
$(".n3").append(span); //分开写方式
// 事件处理 off() 解绑事件
/**当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;
* */
//
语法:off()可以移除通过on()方法添加的事件处理程序
$(".n1").off(); //解绑.n1元素所有事件处理程序
$(".n2").off("click"); //解除.n2元素上面的点击事件
$(".n3").off("click", "p,span"); //解绑事件委托,注意解绑时p和span绑定元素顺序需要一致
//one()只能触发事件一次,点击一次之后解除绑定的事件
$(".n4").one("click", function() {
alert("one()只能触发事件一次,点击一次之后解除绑定的事件");
})
// 事件处理 trigger() 自动触发事件
//有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;
// 语法:第一种:trigger()
element.click() //第一种简写模式
element.trigger("tupe") //第二种为自动触发模式
//语法:第二种:triggerHandler()
element.triggerHandler(type) //第三种自动触发模式,,triggerHandler模式不会触发元素的默认行为(即元素自带的行为),这是和前面两种的区别
</script>
</body>