jquery on()方法off()方法
自从jquery1.7以来,关于事件添加到这个版本,使得事件的绑定变的十分简单,用过的jquery的的人都说好,相信对关,开方法爱不释手。下面是我总结出来的开,关的使用语法,希望对小伙伴有帮助。
上()使用场景最多
-
最简单的写法
$("ul li").on("click",function(){ alert("不响应事件!"); })
- 1
- 2
- 3
-
同时给多个元素绑定一样的事件
$("ul li,div").on("click",function(){ alert("不响应事件!"); })
- 1
- 2
- 3
-
同时给元素绑定多个事件
$(".demonstrate").on({ mouseover:function(){ $(this).addClass("over"); }, mouseout:function(){ $(this).removeClass("over"); } },"ul li")
- 1
- 2
- 3
- 4
- 五
- 6
- 7
- 8
-
实现事件委托
父元素ul li
给目标元素.demostrate
添加事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。
只需要考虑一个父元素就可以,给父元素添加委托事件,不用考虑子元素的数量什么的。$("ul li").on({ click:function(){ console.log('click','1111'); }, mouseover: function () { console.log('mouseover','1111'); $(this).addClass("over"); }, mouseout: function () { $(this).removeClass("over"); } },".demostrate");
- 1
- 2
- 3
- 4
- 五
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
关闭()解绑事件
-
最简单的写法
$("ul li").off("click")
- 1
-
同时给多个元素解绑一样的事件
$("ul li,div").off("click")
- 1
-
同时给元素解绑多个事件
$(".demonstrate").off("mouseover mouseout","ul li")
- 1
-
实现事件委托的解绑
父元素ul li
给目标元素.demostrate
移除移除移除移除事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。
只需要考虑一个父元素就可以,给父元素移除委托事件,不用考虑子元素的数量什么的。$("ul li").off("click mouseover mouseout",".demostrate");
//避免事件叠加 ,jQuery on(绑定事件)前别忘了off(移除事件)
$year.off().on("click",function(){ })
$("#say-hello").off('click').on('click', sayHello);
疑问:解绑后如何再添加进去