html事件处理缺点,为HTML元素添加多个事件处理程序

方法一：直接在HTML代码中，为元素的onclick绑定时间(DOM 0级事件)

按钮

缺点：html和js的代码杂糅，耦合度高，修改不方便

方法二：使用JavaScript的DOM编程，获取元素节点，然后绑定事件

按钮

//方案一：绑定匿名函数

document.getElementById("btn").οnclick=function(){ alert("hello"); }

//方案二：绑定函数名

function showMsg(){

alert("hello");

}

document.getElementById("btn").οnclick=showMsg;

//注意绑定函数名的时候不要加括号，加括号的话，函数会立即执行，然后将结果赋值给onclick

//document.getElementById("btn").οnclick=showMsg();

方法三：使用addEventListener和removeEventListener   (DOM 2级事件)

这两个方法都需要三个参数，

第一个参数是要处理的事件(click、mouseout、mouseover...)，注意不要加on

第二个参数是要绑定的处理程序(如上面的showMsg或者匿名函数)

第三个参数表示选择事件冒泡(内到外)或者事件捕获(外到内)，false表示选择事件冒泡(推荐)，true表示选择事件捕获

按钮1

按钮2

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);

通过addEventListener添加的事件，只能使用removeEventListener来取消，并且removeEventListener的三个参数要和addEventListener的三个参数相同，所以建议在绑定事件的时候，最好不要使用匿名函数的形式，因尽量使用函数名的形式。

按钮

var btn = document.getElementById("btn");

function showMsg(){

alert("hello two");

}

//添加事件

btn.addEventListener("click",showMsg,false);

//取消事件

btn.removeEventListener("click",showMsg,false);

注意:

1、DOM 0级事件    和 　 DOM 2级事件 都可以为同一个事件(比如click事件)绑定多个处理程序，执行的顺序与绑定的先后顺序相同。

2、使用JavaScript给元素节点的同一个事件(onclick)绑定多个事件后，后面的会覆盖前面的，所以只保留最后一个绑定事件处理程序。但是，可以使用递归算法实现绑定多个事件处理程序，如下面的代码

按钮

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);

3、如果不使用上面的代码中的addEvent(node, func)，直接使用btn.οnclick=function(){}会覆盖掉方法一的直接在HTML代码中绑定事件，而addEvent不会。

4、如果一个元素节点同时使用方法一那样，直接在元素节点的onclick绑定事件，同时有使用方法二那样在onclick上面绑定事件，然后利用addEventListener添加onclick事件，最终，执行顺序是：

使用方法三绑定的处理程序执行顺序要晚于 方法一 和 方法二，注意上面的注意点3