js的事件的三个阶段,事件委托的原理

DOM2级事件规定的事件流的三个阶段:捕获,目标,冒泡(IE8以及更早版本不支持DOM事件流);

事件流:

IE:IE事件流是事件冒泡流  Netscape事件流是事件捕获流

IE事件流 叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档)。事件捕获与事件冒泡事件流正好相反的顺序,事件捕获的事件流是最外层逐级向内传播。


使用DOM0级方法指定的事件处理程序被认为是元素的方法,处理程序是在元素的作用域进行的,程序中this是引用的是当前元素


btn

var btn = document.getElementById_x_x_x("btn"); btn.onclick = function(){ alert(this.id); // 弹出btn }

  单击元素btn后,通过this.id取得元素的属性id,还可以通过this访问元素的任何属性和方法,以这种方式添加的事情处理程序在事件流的冒泡阶段处理。

  也可以删除通过DOM0级方法指定的事件处理程序,只要将事件处理程序的属性值设置为null即可。

  btn.onclick = null; // 删除事件处理程序;

 DOM2级事件处理程序

事件是在冒泡阶段被触发,与DOM0级方法一样,这里添加的事件处理程序也是在其依副的元素作用域中运行,使用DOM2级添加事件处理程序的好处是可以添加多个事件处理程序,如下代码:

var btn = document.getElementById_x_x_x("btn"); btn.addEventListener(‘click‘,function(e){ alert(this.id); },false); btn.addEventListener(‘click‘,function(e){ alert("我是来测试的"); },false);

  上面的代码被弹出2次对话框,而在DOM0级是不可以的;它永远是执行最后一次的。

参考:http://www.admin10000.com/document/6293.html

 IE事件处理的程序

btn.attachEvent(‘onclick‘,handler); function handler(e){ alert(this); // window }

  注意:attachEvent的事件名称是onclick,而addEventListener的事件名称是click,且IE中使用的attachEvent()与使用DOM0级方法的的主要区别在于事件处理程序的作用域,在使用dom0级情况下,事件处理程序在其所属元素的作用域内运行,在使用attachEvent()方法的情况下,事件处理程序在全局作用域下运行,其中的this等于window。

理解标准浏览器下的事件对象与IE下的事件对象

  标准浏览器下的事件对象是event,比如btn点击后;如下代码:

var btn = document.getElementById_x_x_x("btn"); btn.onclick = function(){ console.log(event); //标准浏览器下打印事件对象 console.log(event.type);//‘click‘ } btn.onclick = function(){ // IE下打印的事件对象window.event console.log(window.event); console.log(window.event.type); // ‘click‘ }

  上面的写法是在DOM0级上注册事件,如果我们在Dom2级上注册事件的话,那么就会有一个事件对象event作为参数传入事件到函数中,如下:

var btn = document.getElementById_x_x_x("btn"); EventUtil.addHandler(btn,‘click‘,function(e){ console.log(e); });

 理解特定事件的默认行为事件

在标准浏览器下

alink.onclick = function(e){ console.log(e) e.preventDefault(); }

   IE下

alink.onclick = function(){ console.log(window.event) window.event.returnValue = false; }

标准浏览器下与IE下的事件目标的区别

 console.log(event.target); // 打印事件目标元素 

 console.log(window.event.srcElement);

理解标准浏览器与IE下阻止事件传播的区别

  在标准浏览器下我们可以使用stopPropagation()方法来停止事件在DOM层次中的传播,即取消事件中的冒泡或者捕获。从而避免触发注册在document.body上面的事件处理程序

标准浏览器e.stopPropagation()

IE:window.event.cancelBubble = true

跨浏览器的事件对象


var EventUtil = {
   addHandler : function(element, type, handler) {
              if (element.addEventListener) {
                      element.addEventListener(type, handler, false);
              } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
           } 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);
           } else {
                     element["on" + type] = null;
         }
    },
   getEvent : function(event) {
         return event ? event : window.event;
 },
   getTarget : 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;
           }
    }
};

理解客户区坐标位置

  含义是:鼠标指针在可视区中的水平clientX和垂直clientY坐标;

  如下图所示:

  

理解页面坐标位置pageX和pageY:

  pageX与pageY是指页面坐标的位置,与clientX和clientY的区别是:它包含页面滚动条的位置,如下图所示:

  

但是IE8及更早的版本不支持pageX与pageY

EventUtil.addHandler(btn,‘click‘,function(e){ e = EventUtil.getEvent(e); var pageX = e.pageX, pageY = e.pageY; if(!pageX) { pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if(!pageY) { pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } console.log("页面X轴坐标为:"+pageX + " "+ "页面Y轴坐标为:"+pageY); });

 理解屏幕坐标的位置

  屏幕横坐标screenX和垂直坐标screenY属性是相对于整个屏幕的。如下图所示:

Javascript事件委托的原理

原理:使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上,利用冒泡的原理,把事件加到父级上,触发执行效果。

eg:

<</span>ul id="parent-list">
  <</span>li id="post-1">Item 1</</span>li>
  <</span>li id="post-2">Item 2</</span>li>
  <</span>li id="post-3">Item 3</</span>li>
  <</span>li id="post-4">Item 4</</span>li>
  <</span>li id="post-5">Item 5</</span>li>
  <</span>li id="post-6">Item 6</</span>li>
</</span>ul>
function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

// 获取父节点,并为它添加一个click事件
document.getElementById_x("parent-list").addEventListener("click",function(e) {
  // 检查事件源e.targe是否为Li
    var target = getEventTarget(e);   if(target && target .nodeName.toUpperCase == "LI") {
    // 真正的处理过程在这里
    console.log("List item ",e.target.id.replace("post-")," was clicked!");
  }
});

优点

通过上面的介绍,大家应该能够体会到使用事件委托对于web应用程序带来的几个优点:1.可以大量节省内存占用,减少事件注册。2.可以方便地动态添加和修改元素,不需要因为元素的改动而修改事件绑定。3.JavaScript和DOM节点之间的关联变少了,这样也就减少了因循环引用而带来的内存泄漏发生的概率。缺点:不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得(在IE之外的其它浏览器中)。在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了,因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。参考:http://www.cnblogs.com/silence516/archive/2009/09/03/delegateEvent.html
时间: 2024-10-12 18:21:50

js的事件的三个阶段,事件委托的原理的相关文章

JS之捕获冒泡和事件委托

一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒泡和捕获则描述了两种不同的顺序. DOM2级事件规定事件流包括三个阶段,如图: 假如我们点击一个div, 实际上是先点击document,然后点击事件传递到div,而且并不会在这个div就停下,div有子元素就还会向下传递,最后又会冒泡传递回document,如上图 为了兼容更多的浏览器,非特殊情况一般

js事件的三个阶段

js事件的三个阶段分别为:捕获.目标.冒泡 1.捕获:事件由页面元素接收,逐级向下,到具体的元素 2.目标:具体的元素本身 3.冒泡:跟捕获相反,具体元素本身,逐级向上,到页面元素 IE5.5:div---body---document IE6.0:   div---body---html---document Mozilla:div---body---html---document---window 事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发 事件冒泡:当使用事件冒泡时,子级元素

JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover--)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,

js事件委托及其原理

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处呢:1,提高性能. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb&l

[js]事件模型及事件代理/委托

原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html 1.事件的三个阶段:事件捕获.目标.事件冒泡 (低版本的IE不支持捕获) 2.传统.IE和W3C不同绑定事件.解绑事件的方法有什么区别,参数分别是什么,以及事件对象e有什么区别 传统方法: element.onclick = function(e){ // ... }; 传统绑定的优点 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致 处理事件时,this关键字引用的是当前元素,这很

js事件捕获,事件冒泡,事件委托以及DOM事件流

一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body→div ②处于目标阶段2:实际的目标到事件 ③事件冒泡阶段:由最具体的元素接收到事件,然后向上传播到较为不具体的节点.事件流模型:div →body→ html→ document 二:事件委托 事件委托顾名思义:将事件委托给另外的元素.其实就是利用DOM的事件冒泡原理,将事件绑定到目标元素的父节

js事件流之事件冒泡的应用----事件委托

什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 用取快递来解释这个现象,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚

js事件代理(事件委托)最简单的理解

1事件代理:当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数. 例如:点击按钮删除对应的条目. 如果给每一个按钮添加事件,极为繁琐,这时候需要用到事件代理. 事件代理是基于浏览器的事件冒泡机制. 下面是对应的代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <

JS事件冒泡机制以及委托方法,以及vue中的stop

要理解事件冒泡机制,就得先了解事件. 浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作.我们较为熟悉的事件有三大类型:鼠标键盘事件.页面事件.表单相关事件. 鼠标键盘事件:onclick.ondbclick.onmousedown.onmouseup.onmouseover.onmousemove.onmouseout.onkeypress.onkeydown.onkeyup: 页面事件:onload.onunload.onresize.onerror.onabort: