Vue

js addEventListener事件監聽

addEventListener語法解析

1
target.addEventListener(event, function, useCapture)

target: 元素
event:事件名稱
function：事件運行函式
useCapture：事件是否應該補獲或是冒泡，默認為false

Ex.新增class，刪除class，toggle

綁定點擊按鈕元件 ＝> 執行事件函式
新增clss, Visible
刪除clss, Visible
toggle, Visible
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
html
<a class="addBtn">Add</a>
<a class="removeBtn">Remove</a>
<a class="toggleBtn">Toggle</a>
<div class="menu-list"> 
  <ul>
    <li>One</li>
    <li>Two</li>
     <li>Three</li>
  </ul>
</div>
Scss
body{
  padding:20px;
}
a {
  padding:6px 22px;
  color:white;
  border-radius: 8px 8px 0px 0px;
}
.addBtn{
   background-color:green;
}
.removeBtn{
   background-color:red;
}
.toggleBtn{
   background-color:#009688;
}
.menu-list{
  display:none;
  background-color:#eee;
   margin-top:8px;
  padding:15px;
  ul{
    padding-inline-start: 30px;
    margin-block-start: 0em;
    list-style-type: none;
    li{
       list-style-type: none;
       padding-inline-start: 0px;
    }
  }
}
.Visible{
  display:flex;
}

js
const addBtn = document.querySelector(".addBtn");
addBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.add("Visible")
})

const removeBtn = document.querySelector(".removeBtn");
removeBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.remove("Visible")
})

const toggleBtn = document.querySelector(".toggleBtn");
toggleBtn.addEventListener('click',() => {
  const menuList = document.querySelector(".menu-list");
  menuList.classList.toggle("Visible")
})

Ex.新增動態表單

1
2
3
4
5
6
7
8
9
10
11
12
<div class='app'>
    <div>
      <button class="add-btn">新增聯絡人</button>
    </div>
    <div class="contacts">
      <div class="row">
        姓名：<input name="name"/>
        電話：<input name="phone"/>
        <button class="delete-btn">刪除</button>
      </div>
    </div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
js
// 綁定按鈕
const btn= document.querySelector(".add-btn");
//addEventListener 監聽
btn.addEventListener('click',function () {
  //建立一個 div
  const div = document.createElement("div");
  div.classList.add("row");
  div.innerHTML = `
        姓名：<input name="name" />
        電話：<input name="phone"  />
        <button class="delete-btn">刪除</button>
  `;
  //插入div
  document.querySelector(".contacts").appendChild(div);
})  
  //綁定刪除列
const contacts= document.querySelector(".contacts");
//addEventListener 監聽
contacts.addEventListener('click',function (e) {
  console.log(e.target)
  //e.target包含刪除按鈕
  const deleteBtn= e.target.classList.contains('delete-btn');
  if(deleteBtn){
    // closest.js方法用於檢索該元素的父節點，或者元素的父級與選擇器匹配
    contacts.removeChild(e.target.closest('.row'))
  }
})
參考資料