HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<!-- 方式1:在标签上使用onclick属性配置 -->
<button onclick="click1(event,this)" id="btn1">方式1</button>
<!-- 方式2:在js代码中,使用 "元素.onclick=响应函数"进行事件监听 -->
<button id="btn2">方式2</button>
<!-- 方式3: 使用方法来完成对元素的监听 -->
<button id="btn3">方式3</button>
</body>
</html>
JS:
//方式1:不能重复绑定
function click1(event,srcEl){
//alert("被点了");
console.log(event);
console.log(srcEl);
}
//方式2:不能重复绑定
/*window.onload = function(){
//获取到数据源
var btn2 = document.getElementById("btn2");
//绑定点击事件
btn2.onclick = function(event){
//event为非IE浏览器和IE11以上才能使用的方式
//window.event为IE11以下使用的方式
console.log(event||window.event);
console.log(this);
};
};*/
//方式 3:使用方法来完成对元素的监听,可以实现多事件绑定
window.onload = function(){
var btn = document.getElementById("btn3");
//IE添加的方式.一定要有on才可以
/*btn.attachEvent("onclick", function(event){
console.log(event);
console.log("方式3-->IE");
});*/
//非IE添加的方式.
/*btn.addEventListener("click", function(event){
console.log(event);
console.log("方式3-->非IE");
});*/
//适配方法
addEvent(btn,"click",function(){
console.log("方式3-->非IE");
});
};
//适配IE和非IE 参数1:事件源 参数2:事件类型(IE事件加on,非IE事件不加)
function addEvent(srcEl,eventType,fn){
if(srcEl.attachEvent){//如果个属性有值,使用IE方式
srcEl.attachEvent("on"+eventType,fn);
}else{//如果没有值,使用非IE方式
srcEl.addEventListener(eventType,fn);
}
}
