event 事件对象

2020-09-01 本文已影响0人弱冠而不立

event 对象及使用

event 对象是什么？

event 对象表示事件的状态，当 dom 树中某个事件被触发时（鼠标单击，键盘按键等）会自动产生一个用来描述该事件所有的相关信息的对象，这个对象就是 event

event 对象如何使用呢？
直接通过event来获取（因为event 是属于window下的对象），例：
document.querySelector("#btn").onclick = function(){ console.log(event); }
通过函数传参的方式来使用
document.querySelector("#btn").onclick = function(e){ console.log(e); }

event 常用属性和方法

type: 获取当前触发事件的类型（只读），例：
document.querySelector("#btn").onclick = function(e){ console.log(e.type); } //click
bubbles: 获取当前事件类型是否冒泡[冒泡：true，不冒泡：false]（注：和事件处理机制无关，仅仅和当前事件类型是否冒泡有关），例：
document.body.onclick = function(e) { console.log(e.type,",",e.bubbles); } document.body.onmouseenter = function(e) { console.log(e.type,",",e.bubbles); }
mouseenter不支持冒泡，click支持冒泡
eventPhase：事件传递至 [当前节点] 时处于什么状态，有三个值对应三个状态:
1. 事件处于捕获状态
2. 事件处于真正的触发者
3. 事件处于冒泡状态
  例如：

    <body>
        <div id="div1">
        </div>
        <div id="div2">
        </div>
    </body>
    <script type="text/javascript">
        document.querySelector("#div1").onclick = function(e) {
            console.log("div1", e.eventPhase);
        }
        
        document.querySelector("#div2").addEventListener("click",function(e){
            console.log("div2", e.eventPhase);
        },true)
        
        document.body.onclick = function(e) {
            console.log("body-div1", e.eventPhase);
        }
        
        document.body.addEventListener("click",function(e){
            console.log("body-div2", e.eventPhase);
        },true)
    </script>

target 和 currentTarget
- target：返回事件真正的触发者，即引起冒泡或者触发捕获的元素
- currentTarget：返回事件的监听者，即当前触发事件的元素
  例如：

    <body>
        <div></div>
    </body>
    <script type="text/javascript">
        document.querySelector("div").onclick = function(e) {
            console.log("div-target", e.target);
            console.log("div-currentTarget", e.currentTarget);
        }

        document.body.onclick = function(e) {
            console.log("body-target", e.target);
            console.log("body-currentTarget", e.currentTarget);
        }
    </script>

点击 div 后，body 的 target 返回的是引发冒泡的 div 元素

button 属性（event.button == 0 || 1 || 2)
- 0：鼠标左键
- 1：鼠标中键
- 2：鼠标右键
  注：ie8及以下不同
key 和 keyCode

key :当前按下的是哪个键
keyCode:
- keydown, keyup: 按键的编码
- keypress: 按键上字符的 Unicode 编码

        document.onkeydown = function(e) {
            console.log("onkeydown", e.key, e.keyCode);
        }
        
        document.onkeypress = function(e) {
            console.log("onkeypress", e.key, e.keyCode);
        }

当前坐标的属性一览

clientX clinetY 当前屏幕可视区域 XY 的值（不包含滚动条）
screenX screenY 当前屏幕 XY 坐标的值
pageX pageY 当前屏幕可视区域 XY 的值（包含滚动条）

ie 中的常用属性和方法

srcElement 属性，和 target 属性是一样的，返回事件真正的触发者
cancleBubble 属性，取消冒泡。例:

if  (event.stopPropagation) {
    event.stopPropagation();
} else {
    event.cancleBubble = true;
}

returnValue 属性，阻止默认事件。例：

if  (event.preventDefault) {
    event.preventDefault();
} else {
    event.returnValue = false;
}

文档事件

节点加载成功\失败事件

load: 节点加载成功时自动回调

error: 节点加载失败时自动回调

例：

let myImg = docume nt.querySelector("img");
myImg.onload = function() {
    console.log("success");
}
myImg.onerror = function() {
    console.log("error");
}

当 DOM 加载完成时触发的事件：DOMContentLoaded
DOMContentLoaded 事件和 load 事件的区别就是触发的时机不一样，先触发 DOMContentLoaded 事件，后触发 load 事件。

注：DOM 文档的加载步骤为：解析HTML结构。加载外部脚本和样式文件。解析并执行脚本代码。DOM 树构建完成。即：
DOMContentLoaded 在HTML下载，解析完毕之后就触发，而无需等待样式表、图像和子框架的完成加载。
load 在页面的html、css、js、图片等资源都已经加载完之后才会触发。

事件委托

什么是事件委托(事件代理) ?
事件委托：事件委托机制就是利用事件冒泡，自己本身做不了的事情，可以让上一级来做，只指定一个事件处理程序，就可以管理某一类型的所有事件。（主要是通过事件的 target 属性）
具体实例：

有一个 ul ，下面有三个 li，给三个 li 都添加一个点击事件输出 li 的内容，然后再通过代码追加一个 li，如何让新加入的 li 也具有这个点击事件。

传统循环添加方法：

    <body>
        <ul>
            <li>123</li>
            <li>456</li>
            <li>789</li>
        </ul>
    </body>
    <script type="text/javascript">
        let ul = document.getElementsByTagName("ul")[0];
        let li = document.getElementsByTagName("li");
        for(let i=0; i<li.length; i++) {
            li[i].onclick = function() {
                alert(this.innerText);
            }
        }
        let newLi = document.createElement("li");
        newLi.innerText = "abc";
        ul.appendChild(newLi);
    </script>

这样写是无效的，点击内容为 abc 的 li 毫无效果。除非在创建时，也给它再写一遍 click 函数：

        let newLi = document.createElement("li");
        newLi.innerText = "abc";
        newLi.onclick = function() {alert(this.innerText);}
        ul.appendChild(newLi);

采用事件委托机制：(核心的关键点在于 event 的 target 属性)

    <script type="text/javascript">
        let ul = document.getElementsByTagName("ul")[0];
        ul.onclick = function(e) {
            console.log(e.target);
            alert(e.target.innerText);
        }
        let newLi = document.createElement("li");
        newLi.innerText = "abc";
        ul.appendChild(newLi);
    </script>

点击 li 后，click 事件冒泡至 ul，ul 通过 event.target 来获取产生该次冒泡的子元素