事件委托&判断鼠标是否点击到元素外部区域

此文章讲解的是事件委托的基本概念和原理实现；以及拓展到的常见场景问题“判断鼠标是否点击到元素外部区域”。

一. 事件委托

1. 概念

事件流：事件捕获阶段（外至内）–>处于目标阶段（事件响应到触发事件的最底层元素上）–>事件冒泡阶段（内至外，默认false冒泡）
事件委托：将一个元素的绑定事件委托到另一个 元素上
优点：减少内存的消耗、动态绑定事件

2. 场景问题

一个ul下有十个li，需要每次点击li标签的时候，打印出被点击的li的innerHTML文本内容，如何做？

3. 代码实现

人们最常见的惯性思维：取到ul下的所有li标签元素数组集合，遍历元素添加监听事件。这种思路可以实现，但是冗余，性能差。如果有1000个li呢？下面借用事件委托的原理实现：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
...
var ul = document.getElementsByTagName("ul")[0];
ul.addEventListener("click", function(e) {
    var event = e || window.event;
    var target = event.target || event.srcElement;
    if(target.nodeName.toLowerCase() == "li") {
        console.log(target.innerHTML);
    }
}) 

解析：事件流中添加监听事件的方式默认是false冒泡的，触发函数的执行是由内至外的，所以当我们点击每一个li的时候，会向上冒泡至ul元素，遂可。

二. 判断鼠标是否点击到元素外部区域

1. 场景问题

在一个div里面有个input，判断鼠标是否点击到input外部区域

2. 代码实现

<div id="app_out_in">
    姓名<input id="name" type="text" aria-label="姓名">
</div>
...
document.getElementById("app_out_in").addEventListener("click", function(e) {
    var event = e || window.event;
    var target = event.target || event.srcElement;
    // if(target.id == "name") {
    if(document.getElementById("name").contains(target)) {
        console.log("in");
    } else {
        console.log("out");
    }
}) 

解析：在父元素div上添加监听事件，获取当前点击的目标target后，有两种判断方式1）判断点击的target的id是否为input框的id；2）判断点击的target是否被input框区域所包围。

忙碌于伪学习和满足项目的需求，很多时候都忘记了最基础的知识点，这是学习道路上的欲速不达！