【JS】使用者事件

event

 發表於 2021-02-17  |  4 分鐘  |  800 個字

【JS】使用者事件

event

 發表於 2021-02-17  |  4 分鐘  |  800 個字

點擊事件(Click Event)

  • .onclick = function(){…} 。

  • 直接在DOM元素上 onclick="…" (不建議使用)。

  • .addEventListener(“click”,function(){…}) 。

.onclick只能綁定最後一次事件，.addEventListener可以綁定多次事件，

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// <-----html----->
button.btn1 按鈕1
button.btn2(onclick="console.log('您點擊了，按鈕2')") 按鈕2
button.btn3 按鈕3

// <-----js----->
let btn1 = document.querySelector(".btn1");
let btn3 = document.querySelector(".btn3");

btn1.onclick = function(){
  console.log("您點擊了，按鈕1");
}

btn3.addEventListener("click",function(){
  console.log("您點擊了，按鈕3");
});

監聽事件(Listener Event)

  • .addEventListener (“事件”,“方法”,false/true)。

事件名稱 監控 例如
click 滑鼠點擊時
change 值被切換時 下拉選單
keydown 按下鍵盤時
mousemove 移動滑鼠時
focus 進入焦點時 輸入框
blur 離開焦點時 輸入框
mouseenter 游標進入時
mouseleave 游標離開時

事件冒泡(Event Bubbling)

  • .addEventListener (“事件”,“方法”,false)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// <-----html----->
button.btn1 按鈕

// <-----js----->
let body = document.body;
let btn = document.querySelector(".btn1");

body.addEventListener("click",function(){
    console.log("你點擊了，body");
},false);

btn.addEventListener("click",function(){
    console.log("你點擊了，btn");
},false)

// <-----結果----->
//點擊"按鈕"時  //你點擊了，btn  //你點擊了，body

從指定元素往外層找

事件捕捉(Event Capturing)

  • .addEventListener (“事件”,“方法”,true)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// <-----html----->
button.btn1 按鈕

// <-----js----->
let body = document.body;
let btn = document.querySelector(".btn1");

body.addEventListener("click",function(){
    console.log("你點擊了，body");
},true);

btn.addEventListener("click",function(){
    console.log("你點擊了，btn");
},true);

// <-----結果----->
//點擊"按鈕"時  //你點擊了，body  //你點擊了，btn

從外層找到指定元素

阻止事件冒泡(stopPropagation)

  • 使用 .stopPropagation() 可阻止向外查找事件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// <-----html----->
body
  button.btn1 按鈕

// <-----js----->
let body = document.body;
let btn = document.querySelector(".btn1");

body.addEventListener("click",function(){
    console.log("你點擊了，body");
},false);

btn.addEventListener("click",function(event){
    event.stopPropagation();
    console.log("你點擊了，btn");
},false);

// <-----結果----->
//點擊"按鈕"時  //你點擊了，btn

取消預設行為(preventDefault)

  • 使用 .preventDefault() 可阻止預設事件。

可阻止href連結、submit送出

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// <-----html----->
a(href="https://www.google.com.tw/") 連結

// <-----js----->
let a = document.querySelector("a");

a.addEventListener("click",function(event){
  event.preventDefault();
},false);

// <-----結果----->
//點擊"連結"時  //不會跳轉到指定網頁

click + target

  • 取得滑鼠的點擊的目標。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// <-----html----->
ul
  li 
    a 連結

// <-----js----->
let a = document.querySelector("a");

a.addEventListener("click",function(event){
  let target = event.target;
  console.log(target);
});

// <-----結果----->
//點擊"連結"時  //<a>連結</a>

click + target 進階範例

  1. 使用 for 迴圈將資料列印在清單上。

  1. 在清單上監聽 click 事件。

  1. 使用 event.target.tagName 取得點擊的目標。

  1. 使用 if…else 判斷目標是否正確。

  1. 使用 .textContent 將目標的文字顯示出來。

 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

// <-----html----->
ul

// <-----js----->
let fruits=[
  {
    name: "蘋果",
    amount: 100,
    prod:["美國","日本"] 
  },
  {
    name: "香蕉",
    amount: 300,
    prod:["台灣","泰國"] 
  },
  {
    name: "鳳梨",
    amount: 500,
    prod:["夏威夷","新加玻"] 
  },
];

let ul = document.querySelector("ul");
let str = "";

for(let i=0 ; i<fruits.length ; i++){
  str += `<li>${fruits[i].name}</li>`;
  ul.innerHTML = str;
}

ul.addEventListener("click",function(event){
  let targetTag = event.target.tagName;
  let targetText = event.target.textContent;
  if(targetTag != "LI"){
    console.log(targetText);
  }
});

change + target

  • 顯示下單選單的裡值。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// <-----html----->
select
  option(hidden) 請選擇
  option(value="蘋果") 蘋果
  option(value="香蕉") 香蕉
  option(value="鳳梨") 鳳梨
p

// <-----js----->
let a = document.querySelector("select");

a.addEventListener("change",function(event){
  let p = document.querySelector("p");
  let targetValue = event.target.value;
  p.textContent = targetValue;
});

// <-----結果----->
//點擊"連結"時  //<a>連結</a>

change + target 進階範例

  1. 使用 for 迴圈將資料列印在選項上。

  1. 在清單上監聽 change 事件。

  1. 使用 event.target.value 取得點擊目標的值。

  1. 使用 if…else 判斷目標得值是否正確。

  1. 使用 .textContent 將目標的文字顯示出來。

 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

// <-----html----->
select
p

// <-----js----->
let fruits=[
  {
    name: "蘋果",
    amount: 100,
    prod:["美國","日本"] 
  },
  {
    name: "香蕉",
    amount: 300,
    prod:["台灣","泰國"] 
  },
  {
    name: "鳳梨",
    amount: 500,
    prod:["夏威夷","新加玻"] 
  },
];

let select = document.querySelector("select");
let p = document.querySelector("p");
let str = "";

for(let i=0 ; i<fruits.length ; i++){
  str += `<option value="${fruits[i].name}">${fruits[i].name}</option>`;
  select.innerHTML = `<option hidden>請選擇</option>${str}`;
};

select.addEventListener("change",function(event){
  let targetVal = event.target.value;
  for(let i=0 ; i<fruits.length ; i++){
    if(targetVal === fruits[i].name){
      p.textContent = `數量:${fruits[i].amount}，產地:${fruits[i].prod}`;
    }
  }
});

keydown + keyCode

  • 可以取得當前按下的按鍵。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// <-----js----->
let body = document.body;

body.addEventListener("keydown",function(event){
  let b = event.keyCode;
  console.log(b);
});

// <-----結果----->
//按下"enter"鍵時  //13

focus + blur

  • 可以監控使用者是否正在使用輸入框。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// <-----html----->
input(type="text")

// <-----js----->
let input = document.querySelector("input");

input.addEventListener("focus",function(){
  console.log("進入輸入框");
});

input.addEventListener("blur",function(){
  console.log("離開輸入框");
});

mouseenter、mouseleave

  • 可以監控滑鼠進入或離開該元素。

進入離開都觸發，可使用mousemove

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// <-----html----->
p 蘋果

// <-----js----->
let p = document.querySelector("p");

p.addEventListener("mouseenter",function(){
  console.log("滑鼠觸碰蘋果了");
});

p.addEventListener("mouseleave",function(){
  console.log("滑鼠離開蘋果了");
});

mousemove + event

  • 讓圖片取代滑鼠游標。

 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

// <-----html----->
body
  .box

// <-----css----->
body
  width: 100%
  height: 1000px
  cursor: none
  
.box
  width: 30px
  height: 30px
  background-color: red
  position: fixed

// <-----js----->
let a = document.querySelector(".box");
let body = document.body;

body.addEventListener("mousemove",function(event){
  let mouseX = event.clientX;
  let mouseY = event.clientY;
  a.style.left = mouseX + "px";
  a.style.top = mouseY + "px";
});

取得滑鼠座標

方法 取得
page(X/Y) 滑鼠在整個網頁的座標
client(X/Y) 滑鼠在當前瀏覽器視窗的座標
screen(X/Y) 滑鼠在當前使用裝置的螢幕座標
javaScript 

其他相關