处理事件的两种方式
eg:
<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn"value="按钮"/>
</div>
</body>
</html>
事件冒泡
当点击按钮时候,先触发的按钮然后出发按钮所在的div再出发div所在的body然后到html最后到document,一层一层的冒出来
事件捕获
当点击按钮之后,先是触发的document然后是html最后是button,顺序刚好是冒泡的相反顺序
事件处理程序
HTML处理
<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮" onclick="alert('hello')"/>
</div>
</body>
</html>
当点击按钮式的时候,在html代码中触发并处理了事件
DOM0级事件处理
<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮" onclick="showMessage()"/>
</div>
<script type="text/javascript">
function showMessage(){
alert("DOM0级事件处理");
}
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("DOM0级事件从匿名函数触发");
}
//删除btn的onclick事件
btn.onclick = null;
</script>
</body>
</html>
该方法实现了事件处理和html的分离,但是jS和html仍然偶合在一起
DOM2级事件处理
addEventListener(arg0,arg1,arg2);
removeEventListener(arg0,arg1,arg2);
- arg0:要处理的事件名
- arg2:作为事件处理程序的函数
- arg3:布尔值为false为冒泡事件处理方式
<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮"/>
</div>
<script type="text/javascript">
function showMessage(){
alert("DOM0级事件处理");
}
var btn = document.getElementById('btn');
//注意此处的事件名称是click不是onclick
btn.addEventListener('click',showMessage,false);
//删除事件,只能通过remove..方式删除事件
//btn.removeEventListener('click',showMessage,false);
</script>
</body>
</html>
解决IE浏览器和其他浏览器兼容问题
由于浏览器的兼容性问题,很多事件处理在不同浏览器中处理方式不一样,这就需要在编码的时候进行考虑多种情况来解决这种问题。
<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮"/>
</div>
<script type="text/javascript">
function showMessage(){
alert("DOM多版本浏览器事件处理");
}
var btn = document.getElementById('btn');
//创建对象来封装事件处理
var eventUtil = {
addHandler:function(element,type,handler){
if(element.addEventListener){
//chrome浏览器
element.addEventListener(type,handler,false);
}else
if(element.attachEvent){
//IE浏览器
element.attachEvent('on'+type,handler);
}else{
//较早版本的IE浏览器
element['on'+type] = handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
//chrome浏览器
element.removeEventListener(type,handler,false);
}else
if(element.detachEvent){
//IE浏览器
element.detachEvent('on'+type,handler);
}else{
//较早版本的IE浏览器
element['on'+type] = null;
}
}
}
eventUtil.addHandler(btn,'click',showMessage);
</script>
</body>
</html>