Js的DOM事件
事件：文档或窗口与浏览器的交互事件，js与html就是通过事件进行交互的。eg: 瀑布流的加载、轮播图等
1.理解事件流(Brower v-4.0+)：描述的是从页面中接收事件的顺序
1).事件冒泡(ie事件流)：即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收逐级向上传播到最不具体的节点（文档）元素
<html>
<head>
<title>事件流</title>
<meta charset='utf-8'>
</head>
<body>
<div id="box">
<input type='button' value='按钮' id='bt'>
</div>
</body>
</html>
当用户点击了<div>元素，click事件将按照input#bt->div#box->body->html->DOM的顺序进行传播
2).事件捕获流(js)：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件
当用户点击了<div>元素，click事件将按照先是DOM->html->body->div->input的顺序进行传播
2.使用事件处理程序
1).html事件事件处理程序：
<div id="box">
<input type='button' value='按钮' id='btn' onclick="showMessage();">
</div>
<script type="text/javascript">
function showMessage(){
alert('Html事件');
}
</script>
2).DOM0级事件处理程序：
优点：一个元素可以添加多个事件；
同时绑定几个不同的事件，但是不能同时绑定多个相同的事件。
<div id="box">
<input type='button' value='按钮1' id='btn' onclick="showMessage();">
<input type='button' value='按钮2' id='btn2'>
</div>
<script type="text/javascript">
function showMessage(){
alert('Html事件');
}
var btn2 =document.getElementById('btn2');
btn2.onclick = function(){
alert('这是通过DOM0级添加的事件');
}
// btn2.onclick=null; //删除btn2的onclick事件
</script>
3).DOM2级事件处理程序：
优点：一个元素可以添加多个事件；
同时绑定几个事件（相同或不同），然后顺序执行，不会覆盖。
<div id="box">
<input type='button' value='按钮1' id='btn' onclick="showMessage();">
<input type='button' value='按钮2' id='btn2'>
<input type='button' value='按钮3' id='btn3'>
</div>
<script type="text/javascript">
function showMessage(){
alert('Html事件');
}
var btn2 =document.getElementById('btn2');
btn2.onclick = function(){
alert('这是通过DOM0级添加的事件');
}
// btn2.onclick=null; //删除btn2的onclick事件
btn3.addEventListener('click',showMessage,false);
//btn3.removeEventListener('click',showMessage,false);//删除btn3的click事件
</script>
4).ie事件处理程序：
btn4.attachEvent('onclick',showMessage);
//btn4.detachEvent('onclick',showMessage);//删除btn4的onclick事件
5).跨浏览器事件处理程序：
//跨浏览器事件处理程序
var eventUtil ={
//添加句柄
addHandler: function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element,attachEvent){
element.attachEvent('on'+type,handler,false);
}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,false);
}else{
element['on'+type]=null;//element.onclick===element['on'+click];
}
}
}
