为了转生而点技能-JavaScript，day26(Event初探

Event(事件)：当满足触发事件的条件时，会触发设定好的事件，并执行触发後的动作。

目标.addEventListener：`("Event reference",function(e){},options)`

1.目标：选择想要触发的标签或是css选择器。
2.Event reference
3. function(e){}
4. options

目标.addEventListener：`("Event reference",function(e){},options)`

1.目标
2.Event reference：为触发的事件类型，又分为标准事件跟非标准事件，标准事件是由官方的 Web 标准规范中所定义，且应适用於所有的浏览器。
3. function(e){}
4. options

目标.addEventListener：`("Event reference",function(e){},options)`

1.目标
2.Event reference
3. function(e){}：触发後的动作。
参数e：为捕捉滑鼠触发当下的资讯(物件型态)如下图，如果想要获得相关资讯(属性)，以e.属性即可。

4. options

目标.addEventListener：`("Event reference",function(e){},options)`

1.目标
2.Event reference
3. function(e){}
4. options：选择性输入，参数有以下三种

capture－Boolean 型别，送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false。

false，那就会使用bubbling，他是从内而外的流程，所以会先执行蓝色元素的click事件再执行红色元素的click事件。
true，那就是capture，和bubbling相反是由外而内，会先执行红色元素的click事件才执行蓝色元素的click事件。
once－Boolean 型别，用途就像是 jQuery 的one一样。
passive－Boolean 型别，用途是告诉浏览器，这个事件 handler function 会不会呼叫event.preventDefault来停止浏览器的原生行为。

let el = document.querySelector("a");
let passive = {
    passive: true               //true会使浏览器出现报错讯息，再执行後面的动作
};
el.addEventListener("click", function (e) {
    e.preventDefault();
    console.log('连结成功失效');
}, passive);

//透过document.querySelector选定目标(css选择器或是标签都可以)
let el = document.querySelector(".button");
let input = document.querySelector(".span");


el.addEventListener("click", function (e) {
    input.textContent = '已点击';
});

可以利用chorme的开发者工具来看是有否绑定。

`e.target`：用来获取触发当下的资料，也就是`function (e)`的参数`e`的资料。

例子1：

let el = document.querySelector(".button");
let input = document.querySelector(".span");
el.addEventListener("click", function (e) {
    console.log(e.target);
});

例子2：

let el = document.querySelector(".button");
let list = document.querySelector(".list");
console.log(list);
list.addEventListener("click", function (e) {
    console.log(e.target);
});

在例子2中，因为可以侦测点击的范围变大
当点击第1点的空白处时会出现下图：

当点击第2点的空白处时会出现下图：

可以利用`e.target.nodeName`来进行进一步取的事件触发当下的DOM位置：

从chrome可以观察到下列资讯

let list = document.querySelector(".list");
list.addEventListener("click", function (e) {
    console.log(e.target.nodeName);             //呈现滑鼠点击事件的DOM节点(值)
    if (e.target.nodeName == "LI") {
        alert("没点到按钮唷");
    }
    if (e.target.nodeName == "INPUT") {
        alert("恭喜，点到按钮了");
    }
});

参考文章：