码迷,mamicode.com
首页 > 其他好文 > 详细

事件, 事件流, 事件委托

时间:2015-09-12 21:35:51      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

事件 :

 一. 事件驱动程序的(三要素):
   
     1. 事件 : javascript捕获用户的操作或是页面中的行为(如 : onclick, onmouseover, keydown等等)
        
     2. 事件源 : 触发这个事件的元素(如 : 一个按钮, 一个按键等等)

     3. 事件处理程序 : 为该事件被触发时所执行的程序,也称为"事件句柄"和"事件监听器"
     

二. 绑定事件(有兼容性问题)

    1. 在 IE 中,给一个对象的同一事件添加或删除多个处理程序的方式:
       
       对象 . attachEvent("on事件","处理程序");    添加事件

       对象 . detachEvent("on事件","处理程序");    删除事件

       注意 : 这两个方法内添加的事件的执行顺序与添加顺序相反;
              
             无法删除匿名函数(因为找不到函数的引用);

    2. 在 W3C 的标准浏览器中,给一个对象的同一事件添加或删除多个处理程序的方式:

       对象 . addEventLisener("事件","处理程序",boolean);   添加事件

       对象 . removeEventLisener("事件","处理程序",boolean);  删除事件

       注意 : 这两个方法内添加的事件的执行顺序与添加顺序一致;

             无法删除匿名函数(因为找不到函数的引用);

    3. 每一个事件被触发时,程序都会为该事件产生一个临时的事件对象,这个对象包含了事件产生时的某些信息,当函数调用完后,这个对象被释放掉
       代码展示(例子) : btn.onclick=function(e){
                           var ev = e || windown.event;
                           ............................
                      }
       解释 : 上面中的 e 就是点击事件时所产生的事件对象;
              windown.event : 为IE中获取事件对象的方式
              e : 为其他浏览器获取事件对象的方式
       
三. 鼠标事件(当鼠标事件被触发时,对应的事件对象有如下的属性:)

   1. 鼠标相对于浏览器的位置 :  clientX,  clientY
   
   2. 鼠标相对于屏幕的位置 : screenX, screenY
  
   3. 鼠标相对于事件源(调用事件的对象)的位置 : offsetX, offsetY (不支持FF,FF需要通过计算)

   4. onmouseover    鼠标移入某对象
   
   5. onmouseout     鼠标移出某对象

   6. onmouseup      鼠标抬起时

   7. onmousedown    鼠标按下时

   8. onmousemove    鼠标移动时

   9. DOMMouseScroll  鼠标滚轮事件(FF)   
      此方法的事件对象的属性有 : detail (若为正值,表示鼠标滚轮向下滑;负值,向上滑)

   10. onmousewheel   鼠标滚轮事件(IE,chrom)
       此方法的事件对象的属性有 : wheelDelta(若为正值,表示鼠标滚轮向上滑;负值,向下滑)

   (百度出来的)event 的某些属性值得到这些信息: 
   1. “mousewheel” 事件中的 “event.wheelDelta” 属性值:返回的值,如果是正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动;返回的值,均为 120 的倍数,即:幅度大小 = 返回的值 / 120。 
   
   2. “DOMMouseScroll” 事件中的 “event.detail” 属性值:返回的值,如果是负值说明滚轮是向上滚动(与 “event.wheelDelta” 正好相反),如果是正值说明滚轮是向下滚动;返回的值,均为 3 的倍数,即:幅度大小 = 返回的值 / 3。 



四. 键盘事件

   1. keydown   按下键盘按键时

   2. keyup     抬起键盘按键时

   3. keypress  按住键盘按键时

   4. keyCode   enter : 13
                shift : 16
                ctrl  : 17
                alt   : 18
   
   5. altkey, ctrlkey, shiftkey : 是否按下对应的键,是返回true,否返回false;


五. 检测事件类型 : type="事件"

    例如 : type = "click";  表示该事件的类型为点击事件

  

事件流

 一. 事件流(IE只支持冒泡型事件)

1. 冒泡型事件 : 从里往外冒泡;如果被点击的对象没有设置事件,但其仍然是事件源(点击哪个,哪个就是事件源),只是没有给它设置相应的事件,此时,它会把这个事件委托给其外层的对象;如果这个事件源里有需要执行的程序,这个程序会被执行之后再继续向外冒泡.(addEventLisener("事件",foo,false))

2. 捕获型事件 : 从最外层往里冒泡(最外层可到达window对象),(addEventLisener("事件",foo,true))


二. DOM标准的事件模型(冒泡和捕获都支持),当绑定了捕获和冒泡程序时,先执行捕获,在执行冒泡


三. 阻止事件流

1. IE :  事件对象 . cancelBubble = true;
2. FF :  事件对象 . stoppropagation;

解释 : 在A对象添加的方法内设置上面的两个属性,点击A对象,若为冒泡型,则冒泡到该对象就不会继续扩展了;
若为捕获型,则从最外层捕获到这层时,就不会继续向里捕获了.


四. 事件对象的属性

1. 事件对象的属性 : IE    target

                  FF     srcElement

 

 

事件委托 : 

理解 : 给一个对象A设置一个点击事件,此时这个事件会产生一个事件对象,这个事件对象包含了鼠标事件和键盘事件等;这个事件对象有一个属性 target/srcElement,当点击A对象内层的对象a时,此事件对象调用上句的属性时,会返回被点击的对象a,得到这个对象后,我们可以获取这个对象a的一些信息.这时的效果就好像是给a对象设置了点击事件,但其实我们在代码中并为给对象a设置点击事件,这就是事件委托. 原理上被点击的对象a把点击事件委托给了其外层设置有点击事件的对象
      
 
                

       

事件, 事件流, 事件委托

标签:

原文地址:http://www.cnblogs.com/Hrbacity/p/4803544.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!