【後轉前要多久】# Day26 JS - 事件、監聽 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 26

Modern Web

後轉前要多久系列第 26 篇

【後轉前要多久】# Day26 JS - 事件、監聽

13th鐵人賽

gjlmotea

2021-10-11 22:25:57

1175 瀏覽

分享至

e - event

HTML

<body>

<input type="button" class="btn" value="點擊">
<script src="index.js"></script>

</body>

JavaScript

var el = document.querySelector('.btn');

el.onclick = function (event){
    console.log(event);
}

事件的物件中包含

target 觸發到的DOM目標物件
- e.target
- e.target.nodeName 目標的Tag
- e.target.value 目標的內容值
screenX、screenY 滑鼠觸發座標，相對於螢幕最左上角，不受滾動影響
clientX、clientY 滑鼠觸發座標，相對於瀏覽器左上角，不受滾動影響
pageX、pageY 滑鼠觸發座標，相對於檔案文件最左上角，受滾動影響
offsetX、offsetY 滑鼠觸發座標，相對於被觸發的DOM元件
layerx、layerY 與offset同(火狐版)
altKey、ctrlKey 是否同時按下Alt / Ctrl鍵

三種監聽事件

onClick 寫在 HTML(綁定標籤事件處理)

最老式的寫法，容易被攻擊、在onClick中被插入惡意程式碼

HTML

<body>

<input onclick="alert('我被點擊了!!');" type="button" value="點擊">
<script src="index.js"></script>

</body>

或者將function拿到JS當中

HTML

<body>

<input onclick="sayHello();" type="button" class="btn" value="點擊">
<script src="index.js"></script>

</body>

JavaScript

function sayHello(){
    alert("Hello");
}

onClick 寫在 JS內

可用程式控制綁定時機
不能同時綁定多個事件在同一個物件上(後面的程式碼會蓋過前面)

HTML

<input type="button" class="btn" value="點擊">
<script src="index.js"></script>

JavaScript

var btn = document.querySelector('.btn');

btn.onclick = function (){  // onclick 全部小寫
    alert("~~~~");
}
btn.onclick = function (){  // onclick 全部小寫
    alert("!!!!");
}

監聽 addEventListener

較新的寫法
可同時綁定多個事件在同一個物件上

JavaScript

var btn = document.querySelector('.btn');

// 選擇事件的參數 'click'、不是onClick
btn.addEventListener('click', function (){
    alert("監聽中-1");
})
btn.addEventListener('click', function (){
    alert("監聽中-2");
})

第三個參數options(預設為false)
false 事件氣泡(event bubbling) 按DOM節點從指定元素開始往外找
true 事件捕捉(event capture) 按DOM節點從最外層開始往內找

綁定事件到btn及body上，
點擊btn時會同時觸發btn、body事件

HTML

<body style="border: 5px solid black;height: 100vw">

<input type="button" class="btn" value="點擊">
<script src="index.js"></script>

</body>

JavaScript

var btn = document.querySelector('.btn');
var body= document.querySelector('body');
btn.addEventListener('click', function (){
    alert("監聽btn");
},false)
body.addEventListener('click', function (){
    alert("監聽body");
},false)

阻止、取消事件

阻止傳播 stopPropagation

觸發btn後就阻止其他事件發生，防止一鍵觸發太多事件
阻止當前事件繼續進行捕捉（capturing）及冒泡（bubbling）階段的傳遞。

JavaScript

var btn = document.querySelector('.btn');
var body= document.querySelector('body');
btn.addEventListener('click', function (e){
    e.stopPropagation()
    alert("監聽btn");

},false)
body.addEventListener('click', function (e){
    alert("監聽body");
},false)

取消預設事件 preventDefault

取消預設的
<a>連結 跳轉
sumbit 先透過JS查詢表單有無錯誤，再判斷送出。而非直接送出到後端。

HTML

<body>

<a id="link1" href="https://google.com">我是Google連結</a>
<a id="link2" href="#" style="margin-top: 1800px;display: block;">我是#連結</a>

<script src="index.js"></script>

</body>

JavaScript

var el1 = document.querySelector('#link1');
var el2 = document.querySelector('#link2');

el1.addEventListener('click', function (e){
    // 取消元素的默認行為，原本會跳到google網址
    e.preventDefault()
    console.log("取消元素的默認行為，原本會跳到google網址")
})

el2.addEventListener('click', function (e){
    // 取消元素的默認行為，原本會跳到最首頁(#處)
    e.preventDefault()
    console.log("取消元素的默認行為，原本會跳到最首頁(#處)")
})

偵測改變事件

.addEventListener('change',func,false);

HTML

<body>

<select id="level">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

<ul class="list"></ul>

<script src="index.js"></script>

</body>

JavaScript

document.getElementById("level").selectedIndex = -1; // 一開始讓Select處於未選狀態

var level = document.getElementById('level');
var list = document.querySelector('.list');

var students = [
    {name: 'Jason', level: 'A',},
    {name: 'Tom', level: 'B',},
    {name: 'Bob', level: 'B',},
    {name: 'Amber', level: 'A',},
    {name: 'Fenix', level: 'D'},
    {name: "York", level: "C",},
    {name: "Milly", level: "D",},
]

level.addEventListener('change', updateList, false);

function updateList(e) {
    var select = e.target.value;
    var str = '';
    for (var i = 0; i < students.length; i++) {
        if (select === students[i].level) {
            str += '<li>' + students[i].name + '</li>';
        }
        list.innerHTML = str;
    }
}