DOM事件探秘之事件流与事件处理程序

最新推荐文章于 2024-11-16 14:11:26 发布

weixin_34221112

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量132

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jiaoli/p/5875242.html

版权

1、事件流：描述的是从页面中接受事件的顺序

①、事件冒泡流：即时间最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）.
      栗子：若<body><div><input type="button"/></div></body>次结构，点击按钮时，默认点了按钮的容器默认点了body,默认点了html，默认点了document.

②、事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。是网景浏览器的处理方式，顺序上刚好与IE等浏览器支持的事件冒泡顺序相反。

2、javascript事件处理程序有三种：

①、html事件处理程序，即，直接在HTML中添加onclick等事件，与js耦合比较多。

②、DOM0级事件处理程序（用得比较多）：先把元素取出来，然后为其属性添加一个事件的方法叫DOM0级处理程序。
它是一种较传统的方式：把一个函数赋值给一个事件处理程序的属性。
优点：简单，跨浏览器的优势
var btn2=document.getElementById("btn2");---先获取出元素，定义对象 //取得btn2按钮对象
btn2.οnclick=function(){alert('这是通过DOM0级添加的事件！')}----让事件以对象的属性的形式出现。 //给btn2添加onclick属性    btn2.οnclick=null为删除事件

③、DOM2和DOM0级共同优点：可以给一个元素上添加多个事件处理程序，会按照顺序执行。
DOM2级事件处理程序，ie不支持，ie有专用的事件处理程序。
DOM2级事件处理程序：定义了两个方法---用于处理指定和删除事件处理程序的操作。
【addEventListener()---给某元素添加一个事件监听程序】和【removeEventListener()---删除一个事件。必须传入添加事件时相同的参数】
三个参数设置;事件名称，处理方法(函数)，布尔值--false：表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器)，一般设为false；true表示在捕获阶段调用事件处理程序
（通过前者添加的事件，只能通过后者删除。如obj.click= null无效）要处理的事件名不用加“on”！函数不用加“（）”

④、1.IE事件处理程序：IE也提供了类似DOM2级事件处理程序
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数，事件处理程序的名称（要写"on"）和事件处理程序的函数。去掉了布尔值，不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡！

⑤、跨浏览器事件处理程序
   function showMes(){
       alert("hello world!");
   }
   var btn=document.getElementById("btn");
   var eventUtil={
       //添加句柄
       addHandler:function(element,type,handler){
           //先进行DOM2级事件处理程序
           if(element.addEventListener){
               element.addEventListener(type,handler,false);
           }else if(element.attachEvent){
               //再进行IE事件处理程序
               element.attachEvent("on"+type,handler);
           }else{
               //最好进行DOM0级事件处理程序 element["onclick"]===element.onclick
               element["on"+type]=handler;
           }
       }
   }
   eventUtil.addHandler(btn,"click",showMes);

3、事件对象
①什么是事件对象？在触发DOM上的事件时都会产生一个对象
事件对象EVENT
DOM中的事件对象属性
（1）、type属性用于获取事件类型
（2）、target属性用于获取事件目标
（3）、stopPropagation()方法用于阻止事件冒泡
（4）、preventDefault() 方法阻止事件的默认行为
如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外）
如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡。stopPropagation()方法
如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法