JavaScript高级程序设计_第13章 个人笔记

第13章——事件

事件流

是从页面中接收事件的顺序

冒泡

IE提出

是由具体的节点（触发事件的那个元素）至不具体的节点（document）

依次从弹出提示框从div至window

<div id="myDiv">click mediv>
<script>
    // 事件冒泡
    window.onload = function () {
        document.getElementById("myDiv").onclick = function () {
            alert("div");
        };
        document.body.onclick = function () {
            alert("body");
        };
        document.documentElement.onclick = function () {
            alert("html");
        };
        document.onclick = function () {
            alert("document");
        };
        window.onclick = function () {
            alert("window");
        };
    };
script>

冒泡流程

window

document

html

body

div 事件源

捕获

Netscape提出

由不具体的节点（window）至具体的节点（事件触发源）

点击div，则事件从window一直捕获到div

window.onload=function(){
    // 事件捕获
    window.addEventListener(
        "click",
        function () {
            alert("window");
        },
        true
    );
    document.addEventListener(
        "click",
        function () {
            alert("document");
        },
        true
    );
    document.documentElement.addEventListener(
        "click",
        function () {
            alert("html");
        },
        true
    );
    document.body.addEventListener(
        "click",
        function () {
            alert("body");
        },
        true
    );
}

捕获流程

window

document

html

body

div 事件源

DOM事件流

DOM2级规定三个阶段

1. 捕获阶段
2. 处于目标阶段
3. 冒泡阶段

整体流程图

window

document

html

body

div 事件源

事件处理程序

HTML事件处理程序

<div id="div" onclick="alert("1"')">div>

<div id="myDiv" onclick="func(event)">div>
<script>
    function func(event){
        alert(1)
    }
script>

DOM0级事件处理程序

添加

• div.onclick=function(){}

移除

• div.onclick=null

DOM2级事件处理程序

优点：

• 相对于DOM0级，addEventListener可以为一个元素添加多个事件处理函数，依次触发

添加

• div.addEventListener('事件名','事件处理函数','true/false')

• 接收三个参数：

  1. 事件名（没有on）
  2. 事件处理函数
  3. (true:捕获/false:冒泡)——默认false

移除

• div.removeEventListener('事件名','事件处理函数名','true/false')

IE事件处理程序

IE的事件名要加上on

添加

• attachEvent('事件名','事件处理函数')

移除

• detachEvent('事件名','事件处理函数名')

兼容写法

var eventUtil = {
    addEventListener: 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;
        }
    },
    removeEventListener: 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;
        }
    },
};

事件对象

event || window.event

event

属性

• bubbles——是否冒泡
• cancelable——是否可取消默认行为
• currentTarget——事件处理程序正在处理的那个节点
• defaultPrevented——是否阻止了默认行为
• detail——事件相关细节信息
• eventPhase——事件阶段：1. 捕获 2. 事件处理 3. 冒泡
• target——事件触发的节点（事件目标）
• isTrusted——是否由浏览器生成
• type——事件类型

方法

• preventDefault()——阻止默认行为
• stopImmediatePropagation()——取消进一步捕获、冒泡，同时阻止事件处理函数被调用
• stopPropagation()——阻止冒泡或捕获

事件处理函数的this指向

var div = document.getElemnetById('mydiv')
div.onclick=function(event){
    console.log(event.currentTarget == this) // true
    console.log(event.target == this) // true
}
document.body.onclick=function(){
    console.log(event.currentTarget == this) // true
    console.log(event.target == this) // false
}

• this指向事件处理函数的调用者
• event.currentTarget指向事件处理函数的调用（处理）节点
• event.target指向事件的触发节点，目标源

IE中的event

IE中的event作为window对象中第一个属性window.event

属性

1. cancelBubble——是否冒泡，event.cancelBubble = false
2. returnValue——是否触发默认事件，event.returnValue = false
3. srcElement——事件目标源（与target相同）
4. type——事件类型

兼容处理IE的事件

// 事件属性兼容IE写法
var eventUtil = {
   addEventListener,
   removeEventListener,
   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 () {
       if (event.stopPropagation) {
           event.stopPropagation();
       } else {
           event.cancelable = false;
       }
   },
};

事件类型

UI事件

• load

• unload

• resize

• scroll

焦点事件

• focus
• blur
• focusin
• focusout

鼠标滚轮事件

• click

• dbclick

• mousedown

• mousemove

移入移出，子元素不触发

• mouseenter
• mouseleave

移入移出，子元素也算触发

• mouseout
• mouseover

客户区坐标位置

• event.clientX

• event.clientY

页面坐标位置

• event.pageX

• event.pageY

  function(event){
      var pageX=event.pageX;
      if(pageX===undefined){
          event.clientX + (document.body.scrollLeft) || document.documentElement.scrollLeft
      }
      var pageY=event.pageY;
      if(pageY===undefined){
          event.clientY + (docuemnt.body.scrollTop) || document.documentElement.scrollTop
      }
  }
  

兼容IE写法

屏幕坐标位置

• event.screenX

• event.screenY

键盘与文本事件

• keydown——任意键按下，按住则会一直触发
• keypress——字符键按下，按住则会一直触发
• keyup——释放键盘上的按键

键值

event.keycode

兼容写法

event.charcode

HTML5事件

• hashchange——window.addEventListener('hashchange')

事件委托

对DOM添加过多事件处理函数会占用过多内存，导致性能不佳，而事件委托可以解决

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理同一类型的所有事件

<ul id="list">
    <li id="item1">1li>
    <li id="item2">2li>
    <li id="item3">3li>
ul>
<script>
    window.onload = function () {
        document.getElementById("list").onclick = function (event) {
            var event = event || window.event;
            var target = event.target || event.srcElement;
            switch (target.id) {
                case "item1":
                    alert(1);
                    break;

                case "item2":
                    alert(2);
                    break;

                case "item3":
                    alert(3);
                    break;
            }
        };
    };
script>