Event 表示在 DOM 物件上所发生的事件，例如
而当 Event 发生时，就会需要 EventListener（事件监听）来了解 Event 发生的始末。
element.addEventListener(event, function, useCapture)
第一个参数是 Event 的类型，第二个参数是在 Event 发生时调用的函数，第三个参数是一个布林值，表示使用事件冒泡(false)或是事件捕获(true)，若没写第三个参数，会预设为 false。
例如：
<button id="myBtn">Try it</button>
// 绑定 id 为 myBtn 的这个元素
let myBtn = document.getElementById("myBtn");
// 对 myBtn 做事件监听，点击 button 时会触发 myFunction
myBtn.addEventListener("click", myFunction);
function myFunction() {
alert("Hello!");
}
执行上面的程序码，点击 button 後就会跳出一个视窗写 Hello!
<body>
<h1>This is h1</h1>
</body>
let h1 = document.querySelector('h1');
h1.addEventListener('click',e =>{
console.log(e)//得到一个click的event object
console.log(e.target)//得到点击的所在位置，点h1时得到<h1>
console.log(e.target.innerHTML)//按下h1时，得到This is h1
console.log(e.target.parentElement)//<body>
console.log(typeof e.target)//object
})
submit会导致提交时网页会重新整理过一遍，想取消这个预设动作可以用preventDefault()，使表单不提交出去
<form>
<button type="submit">送出</button>
</form>
let btn = document.querySelector('button');
btn.addEventListener('click',e =>{
e.preventDefault();
})
则点按钮时，表单不会被提交出去，页面也不会重刷
点选元素时，他的parent element也会跟着被启动，像泡泡一样一直扩散出去
<div class="adiv">
<button class="btn">click</button>
</div>
let adiv = document.querySelector('div.adiv');
let btn = document.querySelector('div.button');
adiv.addEventListener("click",()=>{
alert('div的callback正在执行');
})
btn.addEventListener("click",()=>{
alert('button的callback正在执行');
})
执行上面程序码後，点击按钮後除了会跳出按钮的视窗之外，也会跳出div的视窗(往父层扩散)，但如果点击div则指会跳出div的视窗
停止Event Bubbling
<div class="adiv">
<button class="btn">click</button>
</div>
let adiv = document.querySelector('div.adiv');
let btn = document.querySelector('div.button');
adiv.addEventListener("click",()=>{
alert('div的callback正在执行');
})
btn.addEventListener("click",e =>{
e.stopPropagation();
alert('button的callback正在执行');
})
执行上面程序码停止Event Bubbling後，点击按钮後就不会也跳出div的视窗了
参考资料：
w3schools - Dom Event Objects
>>: 从 JavaScript 角度学 Python(10) - 容器型别(下)
这篇的程序码在 https://github.com/DanSnow/ironman-2020/t...
CKEditor 官方网站：CKEditor 5 | Powerful Framework with...
在前一篇我们提到binlog可以当作资料恢复的重要纪录，今天要介绍的是binlog另一个主要功能用...
贪婪(Greedy)演算法 贪婪演算法是考虑局部最佳解，在子结构中解决问题是相当有利的，但放入整体问...
什麽是伪类变体 又来一个专有名词，还没学就心慌慌... 但是发现有一个熟悉名词：伪类(看到这个我就...