要给某个按钮添加多个事件,如果使用下面的方式,则只有test3会执行:
//只执行test3
document.getElementById("btn").onclick = test1;
document.getElementById("btn").onclick = test2;
document.getElementById("btn").onclick = test3;
document.getElementById("btn").onclick = test1;
document.getElementById("btn").onclick = test2;
document.getElementById("btn").onclick = test3;
这时就需要用到attachEvent或addEventListener,这两个方法用来为某一事件附加其它的处理事件:
attachEvent 不支持Mozilla系列 用法: object.attachEvent(event,function)
addEventListener 用于 Mozilla系列 用法: object.addEventListener(type,listener,useCapture)
如下:
var btnTest = document.getElementById("btn");
//IE6\7\8 下测试结果:test3-->test2-->test1
//IE9 下测试结果:test1-->test2-->test3
btnTest.attachEvent("onclick", test1);
btnTest.attachEvent("onclick", test2);
btnTest.attachEvent("onclick", test3);
//IE6\7\8 下测试结果:test3-->test2-->test1
//IE9 下测试结果:test1-->test2-->test3
btnTest.attachEvent("onclick", test1);
btnTest.attachEvent("onclick", test2);
btnTest.attachEvent("onclick", test3);
//IE9 下测试结果:test1-->test2-->test3
//Chrome 下测试结果:test1-->test2-->test3
//FF 下测试结果:test1-->test2-->test3
btnTest.addEventListener("click", test1,false);
btnTest.addEventListener("click", test2, false);
btnTest.addEventListener("click", test3, false);
//Chrome 下测试结果:test1-->test2-->test3
//FF 下测试结果:test1-->test2-->test3
btnTest.addEventListener("click", test1,false);
btnTest.addEventListener("click", test2, false);
btnTest.addEventListener("click", test3, false);
完整的:
if(window.attachEvent)
{
btnTest.attachEvent("onclick", test1);
}
else if (window.addEventListener)
{
btnTest.addEventListener("click", test1, false);
}
{
btnTest.attachEvent("onclick", test1);
}
else if (window.addEventListener)
{
btnTest.addEventListener("click", test1, false);
}