JavaScript学习手记3事件详解

1.事件流

事件流是页面接收事件的顺序

事件冒泡：由最具体的到最不具体的接收事件，比如说你点击一个按钮，这个按钮在div中，接下来是html，再接下来就是document文档

事件捕获：从最不具体的到最具体的接收事件，同样的你先获得一个文档，然后找到html，再到div，最后到按钮。

目前使用最多的是事件冒泡，对大多数浏览器来说，它是完全兼容的，可以放心使用。

2.事件处理

html级事件处理：button的点击事件

<button  οnclick="click1()">按钮</button>

<script>
 function click1(){//函数名不能取click
  alert("html事件处理");
 }</script>

缺点：假如要对函数名称作出修改，当代码量非常大的时候，这是非常麻烦的，因为要修改的地方太多。

DOM0级事件处理

<button id="bnt1">按钮0</button>
 <button id="btn2">按钮2</button>

<script>

var a=document.getElementById("bnt1");

 a.οnclick=function(){alert("DOM0级事件处理程序1")};

 a.οnclick=function(){alert("DOM0级事件处理程序2")};

 //a.οnclick=null;也可以赋空值

</script>

缺点：第一个onclick事件会被覆盖掉

DOM2级事件处理

<button id="btn2">按钮2</button>

var a=document.getElementById("bnt2");

a.addEventListener("click",function(){alert("DOM2级事件处理程序")});//可重复添加，克服了DOM1的缺点
 a.addEventListener("click",demo1);
 a.addEventListener("click",demo2);
 function demo1(){alert("DOM2级事件处理程序1");}
 function demo2(){alert("DOM2级事件处理程序2");}
 a.removeEventListener("click",demo1);
 </script>

优点：可以添加多个事件而不被覆盖

如果要考虑浏览器的版本问题，我们可以这样写

<script>
 //因为要考虑到浏览器版本的问题所以我们可以这样写
 var a1=document.getElementById("btn2");
 if(a1.addEventListener){
  a1.addEventListener("click",demo1);
 }else if(a1.attachEvent){//浏览器版本<8
  a1.attachEvent("onclick",dmeo1);  
 }else{
  a1.οnclick=demo1;
 }

</script>

3.事件对象（事件的承载者）

<div id="div">
  <button id="btn3">anniu</button>
  <a href="http://www.w3school.com" id="aid">w3shool</a>
 </div>

<script>
 document.getElementById("btn3").addEventListener("click",showType);
 document.getElementById("div").addEventListener("click",showDiv);
 document.getElementById("aid").addEventListener("click",showA);
 function showType(event){
  alert(event.type);//显示事件类型
  alert(event.target);//显示事件目标
  event.stopPropagation();//阻止事件冒泡不让它输出'div'
 }
 function showDiv()
 {
  alert("div");
 }
 function showA(event){
  event.stopPropagation();
  event.preventDefault();//阻止默认行为，即a标签的链接行为
 }
 </script>