JavaScript高级程序设计_第13章个人笔记_javascript高级程序设计第三版-CSDN博客

本文链接：https://blog.csdn.net/weixin_41075012/article/details/107622236

第13章——事件

事件流

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

冒泡

IE提出

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

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

<div id="myDiv">click me</div>
<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>

冒泡流程

捕获

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

捕获流程

DOM事件流

DOM2级规定三个阶段

捕获阶段
处于目标阶段
冒泡阶段

整体流程图

事件处理程序

HTML事件处理程序

<div id="div" onclick="alert(&quot;1&quot;')"></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

属性

cancelBubble——是否冒泡，event.cancelBubble = false
returnValue——是否触发默认事件，event.returnValue = false
srcElement——事件目标源（与target相同）
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">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
</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>