和一个人最深的交流，用心看他画的画听他作的音乐读他写的诗，非要吃一顿饭不可，是为什么呢。他又不擅长吃饭。

事件流

  • 事件流描述的是从页面中接受事件的顺序。
  • IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

事件冒泡

  • 事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。

    事件捕获

  • 事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。 二、事件处理程序

事件处理程序

HTML事件处理程序

1
<input type="button" value="按钮" id="btn" onclick="showMes()">

Dom0级事件处理程序

1
2
3
4
5
6
7
var btn1 = document.getElementById('btn1');
//函数名后不叫括号
btn1.onclick = showMessage;
function showMessage() {
    alert("onclick");
}
btn1.onclick = null;

Dom2级事件处理程序

  • DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

    1
    2
    3
    4
    5
    6
    7
    var btn1 = document.getElementById('btn1');
    btn1.addEventListrner('click',showMssage,false)
    function showMessage() {
        alert("onclick");
    }
    //删除事件
    btn1.removeEventListener('click',showMssage,false);

  • IE

    • attachEvent() //添加事件
    • detachEvent() //删除事件
      这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数
      1
      2
      3
      4
      5
      6
      7
      var btn1 = document.getElementById('btn1');
      btn1.attachEvent('onclick',showMssage)
      function showMessage() {
          alert("onclick");
      }
      //删除事件
      btn1.detachEvent('onclick',showMssage);

  • 跨浏览器的事件处理程序(能力检测)

    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
    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;
          },
          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;
           }
         }
    }

事件对象(event)

DOM中的事件对象

  • type 获取事件类型
  • target 获取事件目标
  • stopProgation() 阻止事件冒泡
  • preventDefault() 阻止事件的默认行为

IE中的事件对象

  • type 获取事件类型
  • srcElement 获取事件的目标
  • cancelBubble 阻止事件冒泡
    true:阻止事件冒泡 false:不阻止事件冒泡
  • returnValue 阻止事件的默认行为
    false:不阻止事件默认行为