<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div>
<input type="button" value="按钮" id="btn" onclick="showMessage()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
</div>
<script type="text/javascript">
//HTML事件流事件 缺点：HTML和JS代码紧密的耦合在一起
function showMessage(){
alert("Hello World!");
}
//这是DOM0级处理事件的方式
btn2=document.getElementById("btn2");
btn3=document.getElementById("btn3");
btn2.onclick=function(){
alert("123");
}
//这是DOM0级删除事件
btn2.onclick=null;
/*//以下DOM2级处理事件
//添加一个监听点击事件 点击不加"on",可以添加多个事件
//btn3.addEventListener("click",showMessage,false);
//btn3.addEventListener("click",function(){
//alert(this.value);
//},false)
//删除事件
//btn3.removeEventListener("click",showMessage,false);*/
//IE下的事件处理,这个时候要加上"on",不 需要布尔值。
btn3.attachEvent("onclick",showMessage);
</script>
</body>
</html>
var eventUtil = {
// 添加事件 element是给谁添加事件 type是事件类型 handler是事件函数
addHandler:function(element, type, handler){
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on"+type, handler);
} else {
element["on"+type] = handler;
}
};
// 删除事件
removeHandler:function(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on"+type, handler);
} else {
element["on"+type] = null;
}
}
}
IE11 已经不支持attachEvent了