JavaScript之dom事件的事件对象

事件对象

事件对象封装了事件的相关信息

获取事件对象

通过事件处理函数的参数获取
旧版本的IE浏览器通过window.event获取

事件对象的通用成员

1. target & srcElement
   事件目标（事件源）

 <div>
        <button>Atque.</button>
        <button>Expedita.</button>
        <button>Laborum.</button>
        <button>Natus!</button>
    </div>
<script>
        var div = document.querySelector("div")
        div.onclick = function(e) {
            console.log(e.target);
        }
</script>

事件委托：通过给祖先元素注册事件，在程序处理程序中判断事件源进行不同的处理
通常，事件委托用于动态生成元素的区域。

<div>
        <p><span>舞文玩法</span><button>删除</button></p>
        <p><span>为常出现</span><button>删除</button></p>
        <p><span>派家具厂</span><button>删除</button></p>
        <p><span>究根结底</span><button>删除</button></p>
        <p><span>大江大河</span><button>删除</button></p>
    </div>
    <script>
        var div = document.querySelector("div")
        div.onclick = function(e) {
        if (e.target.tagName === "BUTTON") {
                e.target.parentElement.remove();
            }
        }
    </script>

点击区域内其他位置都可以触发点击事件，当点击button时，程序判断事件源是否是button，进行删除当前事件源。

2. currentTarget
   当前目标：获取绑定事件的元素，等效于this
   上面的程序，再加一句

console.log(this === e.currentTarget);

会打印出true

console.log(e.currentTarget);

无论你点击哪里，控制台都会出现div

3. type
   字符串，得到事件的类型
   上面的程序加一句

console.log(e.type);

每点击一次，控制台会打印一次click

4. preventDefault & returnValue
   阻止浏览器的默认行为

<a href="https://www.baidu.com">百度</a>
a.addEventListener("click", function(e) {
            e.preventDefault(); //阻止浏览器的默认行为
            console.log("被点击了！");
        })

dem0的方式：在事件处理程序中返回false

<form action="https://www.taobao.com">
        <p>
            <input type="text" name="account">
        </p>
        <p>
            <button>提交</button>
        </p>
    </form>
    btn.onclick = function(e) {
            return false;
            // e.preventDefault();
            // e.returnValue = false;
        }

针对a元素，可以设置为功能性链接解决跳转问题

<a href="javascript:;">百度</a>

5. stopPropagation方法
   阻止事件冒泡

 <div id="div1">
        <p id="div2">
            <span id="div3">
                <button>点击</button>
            </span>
        </p>
    </div>

    <script>
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");
        var btn = document.querySelector("button");
        
        div1.onclick = div3.onclick = btn.onclick = function(e){
            console.log(this.tagName);
        }
        
        div2.onclick = function(e){
            e.stopPropagation();
            console.log("p");
        }

点击之后，会得到以下结果。

6. eventPhase
   得到事件所处的阶段
   1、事件捕获
   2、事件目标
   3、事件冒泡