JavaScript Day14 - event(1)

event

event(事件)：在 DOM 物件上所发生的事件，如点击、滑动、变更等都是
事件处理与监听：Day20 - 事件(01)
- DOM 事件处理器：亦可写在 HTML 上，目前较少使用
  - element.onevent = functionName;
- DOM 事件监听器：目前较常使用，BooLean 预设为 false，为事件气泡
  - element.addEventListener('event' , functionName , BooLean);
事件气泡与捕捉：Day21 - 事件(02)
- 事件气泡( Event Bubbling )：由指定元素所在的位置，往外层扩散
- 事件捕捉( Event Capturing )：由最外面往内至指定元素
事件终止与取消：Day21 - 事件(02)
- 中止：中止气泡或补捉
  - event.stopPropagation()
- 取消：取消预设的行为，一般用在会跳转的表单送出(submit)与连结(link)
  - event.preventDefault()
目标元件：Day22 - 事件(03)
- e.target：e.target 为事件的目标元件，可透过 e.target.nodeName 来取得名称

<body>
    <input type="button" value="点击" class="btn">
    <a href="#" class="link">连结</a>
    <script src="JS/test.js"></script>
</body>

JS 的部分

let btn = document.querySelector(".btn");
let link = document.querySelector(".link");

function click (){
    console.log("click");
}

btn.addEventListener('click' , click , false);

link.addEventListener('click' , function(e){
    console.log(e.target.nodeName);
    e.preventDefault();
},false);