JavaScript学习手记3事件详解

时间:2022-06-13 09:36:01

1.事件流

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

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

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

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

2.事件处理

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

<button  onclick="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.onclick=function(){alert("DOM0级事件处理程序1")};

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

 //a.onclick=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.onclick=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>