on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
$("#div1").on("click",function(){$(this).css("background-color","pink")
})
火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的:addEventListener和removeEventListener方法
形如:element.addEventListener(type,listener,useCapture)//添加事件
element.removeEventListener(type,listener,useCapture)//注销事件
这里需要和attchEvent相区别,event直接写事件名即可,如click事件->object.addEventListener("click",listener,useCapture)
例:
JS:
window.onload = function(){
var btn1 = document.getElementById("btn1")
btn1.addEventListener("click",test1,false)
var btn2 = document.getElementById("btn2")
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",test1,false)
},false)
}
function test1(){
alert("111")
}
--------------------------------------------
html:
<button id="btn1">测试addEventListener</button>
<button id="btn2">测试removeEventListener</button>
-------------------------------------------------------------------------------
再将上面的例子改一下:
JS:
window.onload = function(){
var btn1 = document.getElementById("btn1")
btn1.addEventListener("click",test1,false)
btn1.addEventListener("click",test2,false)
btn1.addEventListener("click",test3,false)
var btn2 = document.getElementById("btn2")
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",test1,false)
},false)
}
function test1(){
alert("111")
}
function test2(){
alert("222")
}
function test3(){
alert("333")
}
HTML:
<button id="btn1">测试addEventListener</button>
<button id="btn2">测试removeEventListener</button>
现象:页面打开之后,点击【测试addEventListener】,依次d出"111","222","333"
说明,使用addEventListener添加事件后按照绑定顺序执行
再点击【测试removeEventListener】,则会发现不再d“111”,即test1事件被注销
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)