事件处理程序&&事件对象

来源：互联网发布：网站源码yjhtml 编辑：程序博客网时间：2024/05/15 07:13

一、事件流

事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

二、事件处理程序

1、HTML事件处理程序
2、DOM0级事件处理程序
较传统的方式：把函数赋值给一个事件的处理程序属性用的比较多的方法（原因：简单，跨浏览器）
3、DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。（true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数（不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡）
5、跨浏览器的事件处理程序

三、事件对象

什么是事件对象？在触发DOM上的事件时都会产生一个对象。
事件对象event
1、DOM中的事件对象
(1)type属性:获取事件类型
(2)target属性：获取事件目标
(3)stopPropagation() 阻止事件冒泡
(4)preventDefault() 阻止事件的默认行为（例如a默认跳转）
2、IE中的事件对象
(1)type:获取事件类型
(2)srcElement：事件目标
(3)cancelBubble属性：用于阻止事件冒泡。true表示阻止冒泡，false表示不阻止冒泡

(4)returnValue属性：用于阻止事件的默认行为。false为阻止事件的默认行为

<html> <head>   <title>事件流</title>   <meta charset="utf-8"> </head>   <body>      <div id="box">         <input type="button" value="按钮" id="btn" onclick="showMes()"><!--HTML事件处理程序-->         <input type="button" value="按钮2" id="btn2">         <input type="button" value="按钮3" id="btn3">         <a href="event.html" id="go">跳转</a>      </div>   </body><html>

<script>var btn2=document.getElementById('btn2');var btn3=document.getElementById('btn3');var go=document.getElementById('go');var box=document.getElementById('box');//HTML事件处理程序function showMes(){alert('hello world!');}function showMessage(event){event=event||window.event;//alert(event.type);//type属性:获取事件类型，event.target.nodeName是节点名称（例如：Input）//event.stopPropagation();//阻止事件冒泡var ele=event.target||event.srcElement;alert(ele);}function showBox(){alert('这是放按钮的盒子box');}//DOM中的事件对象function stopGoto(event){event.preventDefault();event.stopPropagation();//阻止事件冒泡}////DOM0级事件处理程序btn2.onclick=function(){//给btn2添加onclick属性alert('这是通过DOM0级添加的事件！');}btn2.onclick=null;//删除onclick属性//DOM2级事件处理程序btn3.addEventListener('click',showMes,false);//兼容各种浏览器//btn3.addEventListener('click',function(){//alert(this.value);//this引用被触发的元素//},false);btn3.removeEventListener('click',showMes,false);//删除事件//IE事件处理程序btn3.attachEvent('onclick',showMes);btn3.detachEvent('onclick',showMes);//删除  </script>

<script>//跨浏览器的事件处理程序var eventUtil={// 添加句柄    addHandler:function(element,type,handler){if(element.addEventListener){//DOM2级事件处理程序element.addEventListener(type,handler,false);}else if(element.attachEvent){//IE事件处理程序            element.attachEvent('on'+type,handler);        }else{//DOM0级事件处理程序            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); }else{element['on'+type]=null;}},//获取事件getEvent:function(event){return event?event:window.event;},//获取事件的类型    getType:function(event){return event.type;    },//获取元素getElement:function(event){return event.target || event.srcElement;    },//阻止事件的默认行为    preventDefault:function(event){if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;        }},//阻止事件冒泡    stopPropagation:function(event){if(event.stopPropagation){//以属性的形式判断event.stopPropagation();}else{event.cancelBubble=true;}}}eventUtil.addHandler(btn3,'click',showMes);eventUtil.removeHandler(btn3,'click',showMes);//eventUtil.addHandler(btn3,'click',showMessage);//弹出click//eventUtil.addHandler(box,'click',showBox);//eventUtil.addHandler(go,'click',stopGoto);</script>

<script>//测试封装的eventUtilwindow.onload=function(){  var go=document.getElementById('go');  var box=document.getElementById('box');  eventUtil.addHandler(box,'click',function(){  alert('我是整个父盒子');  });  eventUtil.addHandler(go,'click',function(e){  //e=eventUtil.getEvent(e);  e=e || window.event;  alert(eventUtil.getElement(e).nodeName);  eventUtil.preventDefault(e);  eventUtil.stopPropagation(e);  });}</script>

1 0