再次理解javascript中的事件

一、事件流的概念

   + 事件流描述的是从页面中接收事件的顺序。

 

二、事件捕获和事件冒泡

  +    事件冒泡接收事件的顺序：

     

 +   事件捕获接收事件顺序：

  +   IE中的事件流叫事件冒泡，IE中没有事件捕获，所有浏览器都支持事件冒泡（IE9、opera、safari、chrome、Firefox支持事件捕获，老版本浏览器不支持事件捕获）。

 

三、DOM事件流

    + DOM事件流的三个阶段： 事件捕获、处理目标、事件冒泡

   

     例子：（注：EventUtil对象代码在后面的第六个标题中）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var btn = document.getElementById("btn"); btn.onclick = function(event) {      var e = EventUtil.getEvent(event);      EventUtil.stopPropagation(e); //1、2     alert("2"); }; document.body.addEventListener("click",function(event) {     var e = EventUtil.getEvent(event);     // EventUtil.stopPropagation(e); //1     alert("1"); },true);   document.body.onclick = function(event) {     var e = EventUtil.getEvent(event);     // EventUtil.stopPropagation(e); //1、2、3     alert("3"); };

 

    + IE9、opera、safari、chrome、Firefox支持DOM事件流

四、事件处理程序

    +  事件处理程序以"on"开头，即在事件名称前加on即事件处理程序（如：onclick、onload等等）。

    + 下面这种方式无需引用表单元素就能显示表单字段（因为事件处理程序自动扩展了作用域）。 

?

1 2 3 4

<form>     <input type="text" name="username" value="21" id="adom">     <input type="text" onclick="alert(adom.value)"> <!--21--> </form>

    +  事件处理程序创建的封装属性值的函数中，有一个局部变量event，通过这个事件对象event可以获取事件对象中的一些信息。

        不同的事件类型，event具有的属性和方法不一样。

 

 五、事件对象

 +  DOM中的事件对象

       所有事件都会有的方法：

       

      

   +  IE中的事件对象

         所有事件都会有的方法：

       

 

 六、跨浏览器事件处理程序

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

<script>             var EventUtil = {                 //事件处理                 addHandler: function(element, type, handler) {                     if(element.addEventListener) {                         element.addEventListener(type, handler, false);                     } else if(element.attachEvent) {                         //ie9之前的浏览器的事件监听方式，和上面的方式不一样                         //attachEvent中的事件类型前有一个on                         element.attachEvent("on"+type,handler);                     } else {                         element["on"+type] = handler;                     }                 },                                   //ie8即更早版本只支持事件冒泡，ie中使用attachEvent                 //事件处理程序会在全局作用域中运行，所以回调函数中的this等于window，                 //而不是当前点击的元素                 getEvent: function(event) {                     return event ? event : window.event;                 },                                   //获取目标对象，即当前被点击的元素IE中用event.srcElement获取                 getTarget: function(event) {                     return event.target || event.srcElement;                 },                                   preventDefault: function(event) {                     if(event.preventDefault) {                         event.preventDefault();                     } else {//IE                         event.returnValue = false;                     }                 },                                   removeHandler: function(element, type, handler) {                     if(element.removeHandler) {                         element.removeListener(type, handler, false);                     } else if(element.detachEvent) {                          element.detachEvent("on"+type,handler);                     } else {                         element["on"+type] = null;                     }                 },                                   stopPropagation: function(event) {                     if(event.stopPropagation) {                         event.stopPropagation();                     } else {//IE                         event.cancelBubble = true;                     }                 }             };                           var btn = document.getElementById("btn");             EventUtil.addHandler(btn,"click",function(event) {                  var e = EventUtil.getEvent(event); //              alert("hello");             });         </script>

 事件一览表：https://developer.mozilla.org/zh-CN/docs/Web/Events

 addEventListener： https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener