方法一:直接在HTML代码中,为元素的onclick绑定时间(DOM 0级事件)
<button οnclick="alert('hello')">按钮</button>
缺点:html和js的代码杂糅,耦合度高,修改不方便
方法二:使用JavaScript的DOM编程,获取元素节点,然后绑定事件
<button id="btn">按钮</button> <script> //方案一:绑定匿名函数 document.getElementById("btn").οnclick=function(){ alert("hello"); } //方案二:绑定函数名 function showMsg(){ alert("hello"); } document.getElementById("btn").οnclick=showMsg; //注意绑定函数名的时候不要加括号,加括号的话,函数会立即执行,然后将结果赋值给onclick //document.getElementById("btn").οnclick=showMsg(); </script>
方法三:使用addEventListener和removeEventListener,IE使用attachEvent,detachEvent(DOM 2级事件)
首先是addEventListener和removeEventListener
这两个方法都需要三个参数,
第一个参数是要处理的事件(click、mouseout、mouseover...),注意不要加on
第二个参数是要绑定的处理程序(如上面的showMsg或者匿名函数)
第三个参数表示选择事件冒泡(内到外)或者事件捕获(外到内),false表示选择事件冒泡(推荐),true表示选择事件捕获
<button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <script> var btn1 = document.getElementById("btn1"); btn1.addEventListener("click",function(){alert("hello one");},false); var btn2 = document.getElementById("btn2"); function showMsg(){ alert("hello two"); } btn2.addEventListener("click",showMsg,false); </script>
通过addEventListener添加的事件,只能使用removeEventListener来取消,并且removeEventListener的三个参数要和addEventListener的三个参数相同,所以建议在绑定事件的时候,最好不要使用匿名函数的形式,因尽量使用函数名的形式。
<button id="btn">按钮</button> <script> var btn = document.getElementById("btn"); function showMsg(){ alert("hello two"); } //添加事件 btn.addEventListener("click",showMsg,false); //取消事件 btn.removeEventListener("click",showMsg,false); </script>
然后是:attachEvent,detachEvent
IE8及之前的版本不支持addEventListener和removeEventListener,支持的是attachEvent()和detachEvent()。
首先IE都兼容一下做法来添加事件处理程序:
1、直接在HTML代码的元素属性的位置为事件绑定处理程序;
2、使用JavaScript的 node.οnclick=function(){}
attachEvent()和detachEvent()都需要两个参数:
第一个参数是要绑定的事件(onclick、onmouseover.....注意和addEventListener不同)
第二个参数是要绑定的处理程序(匿名函数或者函数名,注意如果不是匿名函数,函数名不要加括号)
在使用addEventListener之前应该先检测当前浏览器是否支持该方法,可以将代码封装到一个对象中:
<button id="btn">按钮</button>
<script>
var eventUtil = {
//type 传入 click mouseover,而不传onclick,mouseover
addEvent : function(element, type, func){
if (element.addEventListener) { //所有主流浏览器,除了 IE 8 及更早 IE版本
element.addEventListener(type, func, false);
} else if(element.attachEvent) { // IE 8 及更早 IE 版本
element.attachEvent('on'+type, func);
} else {
var type = "on"+type;
//element.type = func; //wrong,不会成功
element[type] = func;
}
},
removeEvent : function(element, type, func){
if (element.removeEventListener) { //所有主流浏览器,除了 IE 8 及更早 IE版本
element.removeEventListener(type, func, false);
} else if(element.detachEvent) { // IE 8 及更早 IE 版本
element.detachEvent('on'+type, func);
} else {
var type = "on"+type;
//element.type = null; //wrong,不会成功
element[type] = null;
}
}
}
var btn = document.getElementById("btn");
function showOne(){ alert("one"); }
eventUtil.addEvent(btn, "click", showOne);
eventUtil.removeEvent(btn, "click", showOne);
</script>
注意:
1、DOM 0级事件 和 DOM 2级事件 都可以为同一个事件(比如click事件)绑定多个处理程序,执行的顺序与绑定的先后顺序相同。
2、使用JavaScript给元素节点的同一个事件(onclick)绑定多个事件后,后面的会覆盖前面的,所以只保留最后一个绑定事件处理程序。但是,可以使用递归算法实现绑定多个事件处理程序,如下面的代码
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
function addEvent(node, func){
var old = node.onclick;
if( typeof node.onclick != "function" ){
node.onclick = func;
} else {
node.onclick = function(){
old();
func();
}
}
}
function showOne(){ alert("one"); }
function showTwo(){ alert("two"); }
addEvent(btn, showOne);
addEvent(btn, showTwo);
</script>
3、如果不使用上面的代码中的addEvent(node, func),直接使用btn.οnclick=function(){}会覆盖掉方法一的直接在HTML代码中绑定事件,而addEvent不会。
4、如果一个元素节点同时使用方法一那样,直接在元素节点的onclick绑定事件,同时有使用方法二那样在onclick上面绑定事件,然后利用addEventListener添加onclick事件,最终,执行顺序是:
使用方法三绑定的处理程序执行顺序要晚于 方法一 和 方法二,注意上面的注意点3