添加事件处理器
function buttonAlert(){
alert("You clicked the button");
}
document.getElementById("myButton").onclick = buttonAlert;
在注册事件处理器时,函数名后面不能有括号。
删除事件处理器
要删除事件处理器,只需要简单地给它赋值null:
document.getElementById("myButton").onclick = null;
event对象
跨浏览器的事件处理器
MyElement.onclick = function(e){
if (!e) var e = window.event;
//这样e就能代表任何浏览器的event对象
}
为了实现跨浏览器的代码,我们需要在脚本中检测event对象是否具有我们需要的方法和属性:
if (!e) var e = window.event;
var element = (e.target) ? e.target : e : e.srcElement;
W3C方式
W3C提供了addEventListener和removeEventListener方法
element.addEventListener("click", myFunction, falise);
element.removeEventListener("click", myOtherFunction, false);
第一个参数指明要捕获的事件,第二个参数指明时间要执行的函数。
微软方式
微软提供了两种类似的方法:attachEvent和detachEvent
element.attachEvent("onclick", myFunction);
element.detachEvent("onclick", myFunction);
跨浏览器的实现方式
function addEventHandler(element, eventType, handlerFunction) {
if (element.addEventListener) {
element.addEventListener (eventType, handlerFunction);
} else if (element.attachEvent) {
element.attachEvent ("on" + eventType, handlerFunction);
}
}
鼠标点击
在W3C浏览器里,鼠标左键返回0,中键返回1,右键返回2。
在微软浏览器里,鼠标左键返回1,右键返回2,中键返回4。
document.onkeydown = function(e) {
if (!e) var e = window.event;
alert(e.keyCode + " is the code for " + String.fromCharCode(e.keyCode));
}