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

第13章——事件

事件流

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

冒泡

IE提出

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

依次从弹出提示框从divwindow

<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>

你可能感兴趣的:(JavaScript,笔记,javascript)