1.jquery里面的click
定义和用法
当点击元素时,会发生 click 事件。
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(document).ready(function(){
$("#div1").click(function(){
alert(1)
})
$("#div1").click(function(){
alert(2)
})
$("#div1").click(function(){
alert(3)
})
})
结果:依次弹出1,2,3
2.addEventListener
addEventListener() 方法用于向指定元素添加事件句柄。
提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
注意: Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持,可以使用 attachEvent() 方法来添加事件句柄 (移除事件使用detachEvent())。
语法:
element.addEventListener(event, function, useCapture)
参数表
参数 | 描述 |
---|---|
event | 必须。字符串,指定事件名。如:click,blur,mousedown等。 注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。 |
function | 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
useCapture | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值:
|
window.onload=function(){
document.getElementById("div1").addEventListener('click',function(){
alert(1)
},false)
document.getElementById("div1").addEventListener('click',function(){
alert(2)
},false)
document.getElementById("div1").addEventListener('click',function(){
alert(3)
},false)
}
结果:依次弹出1,2,3
为什么用 addEventListener
- 可以对同一物件的同一事件绑定多个事件处理程序。
- 可以通过事件流三个阶段更好地控制何时触发事件处理程序。
- 工作于 DOM 元素,而不仅是 HTML 元素。
在解决问题的时候,不要简单地就事论事,比如这篇文章讨论的就是如何添加事件监听器,那就不妨写一个适用于所有浏览器的方法:
window.onload=function(){
function addEvent(el,event,func){
if(el.attachEvent){
return el.attachEvent("on"+event,func)
}else{
return el.addEventListener(event,func,false)
}
}
//调用
addEvent(document.getElementById("div1"),"click",function(){
alert('1')
})
addEvent(document.getElementById("div1"),"click",function(){
alert('2')
})
addEvent(document.getElementById("div1"),"click",function(){
alert('3')
})
}
依次弹出1,2,3
3.onclick
定义和语法
onclick 事件会在元素被点击时发生。
语法
HTML 中: <element οnclick="SomeJavaScriptCode">
JavaScript 中: object.οnclick=function(){SomeJavaScriptCode};
window.onload=function(){
document.getElementById("div1").onclick=function(){
alert(100)
}
document.getElementById("div1").onclick=function(){
alert(200)
}
document.getElementById("div1").onclick=function(){
alert(300)
}
}
结果:点击弹出300
这个方法能实现相同的效果,并且有更多的控制域(因为是 JS 脚本,而不是 HTML 代码),当然了,也能使用匿名函数、构造函数、闭包。
原生的onclick绑定事件其实是赋值操作,onclick中只能保留一个值,再次对onclick赋值会覆盖上次的值。所以如果为同一个事件绑定了多个处理程序,那么最后一个处理程序会覆盖之前的程序。