为了转生而点技能-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("恭喜，点到按钮了");    }});

参考文章：

O3noBLOG:addEventListener 的第三个参数：https://blog.othree.net/log/2007/02/06/third-argument-of-addeventlistener/O3noBLOG:addEventListener 的第三个参数(2)：https://blog.othree.net/log/2019/03/20/third-argument-of-addeventlistener-2/