JavaScript DOM EventListener

สารบัญ

    แสดงสารบัญ

วิธีการ addEventListener()

ตัวอย่าง

เพิ่มฟังเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้คลิกปุ่ม:

document.getElementById("myBtn").addEventListener("click", displayDate);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

addEventListener() วิธีการแนบตัวจัดการเหตุการณ์ไปยังองค์ประกอบที่ระบุ

addEventListener() วิธีการแนบตัวจัดการเหตุการณ์ไปยังองค์ประกอบโดยไม่ต้องเขียนทับตัวจัดการเหตุการณ์ที่มีอยู่

คุณสามารถเพิ่มตัวจัดการเหตุการณ์จำนวนมากให้กับองค์ประกอบเดียวได้

คุณสามารถเพิ่มตัวจัดการเหตุการณ์ประเภทเดียวกันได้หลายตัวในองค์ประกอบเดียว นั่นคือเหตุการณ์ "คลิก" สองเหตุการณ์

คุณสามารถเพิ่มผู้ฟังเหตุการณ์ให้กับออบเจ็กต์ DOM ใดๆ ได้ ไม่ใช่แค่องค์ประกอบ HTML เท่านั้น นั่นคือวัตถุหน้าต่าง

เมธอด addEventListener() ช่วยให้ควบคุมวิธีที่เหตุการณ์ตอบสนองต่อฟองสบู่ได้ง่ายขึ้น

เมื่อใช้เมธอด addEventListener() JavaScript จะถูกแยกออกจากมาร์กอัป HTML เพื่อให้อ่านง่ายขึ้น และช่วยให้คุณสามารถเพิ่มผู้ฟังเหตุการณ์ได้แม้ว่าคุณจะไม่ได้ควบคุมมาร์กอัป HTML ก็ตาม

คุณสามารถลบตัวฟังเหตุการณ์ได้อย่างง่ายดายโดยใช้เมธอด removeEventListener()

ไวยากรณ์

element.addEventListener(event, function, useCapture);

พารามิเตอร์แรกคือประเภทของเหตุการณ์ (เช่น "คลิก" หรือ "mousedown" หรือเหตุการณ์ HTML DOM อื่นๆ)

พารามิเตอร์ตัวที่สองคือฟังก์ชันที่เราต้องการเรียกใช้เมื่อมีเหตุการณ์เกิดขึ้น

พารามิเตอร์ที่สามคือค่าบูลีนที่ระบุว่าจะใช้เหตุการณ์ bubbling หรือการจับเหตุการณ์ พารามิเตอร์นี้เป็นทางเลือก

โปรดทราบว่าคุณไม่ได้ใช้ คำนำหน้า "on" สำหรับเหตุการณ์ ใช้ "คลิก" แทน "onclick"

เพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบ

ตัวอย่าง

แจ้งเตือน "สวัสดีชาวโลก!" เมื่อผู้ใช้คลิกที่องค์ประกอบ:

element.addEventListener("click", function(){ alert("Hello World!"); });

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

คุณยังสามารถอ้างถึงฟังก์ชัน "ชื่อ" ภายนอกได้:

ตัวอย่าง

แจ้งเตือน "สวัสดีชาวโลก!" เมื่อผู้ใช้คลิกที่องค์ประกอบ:

 element.addEventListener("click",  myFunction);
function myFunction() {
  alert ("Hello World!");
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

เพิ่มตัวจัดการเหตุการณ์จำนวนมากให้กับองค์ประกอบเดียวกัน

addEventListener() วิธีการช่วยให้คุณสามารถเพิ่มเหตุการณ์จำนวนมากในเหตุการณ์เดียวกัน องค์ประกอบโดยไม่ต้องเขียนทับเหตุการณ์ที่มีอยู่:

ตัวอย่าง

element.addEventListener("click", myFunction);
 element.addEventListener("click", mySecondFunction);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click events to the same button.</p>

<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
  alert ("Hello World!");
}

function someOtherFunction() {
  alert ("This function was also executed!");
}
</script>

</body>
</html>

คุณสามารถเพิ่มเหตุการณ์ประเภทต่างๆ ให้กับองค์ประกอบเดียวกันได้:

ตัวอย่าง

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on the same button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

เพิ่มตัวจัดการเหตุการณ์ให้กับวัตถุหน้าต่าง

addEventListener() วิธีการช่วยให้คุณสามารถเพิ่มผู้ฟังเหตุการณ์ใน HTML ใด ๆ วัตถุ DOM เช่นองค์ประกอบ HTML เอกสาร HTML วัตถุหน้าต่าง หรืออื่นๆ ออบเจ็กต์ที่รองรับเหตุการณ์ เช่น ออบเจ็กต์ xmlHttpRequest

ตัวอย่าง

เพิ่มตัวฟังเหตุการณ์ที่เริ่มทำงานเมื่อผู้ใช้ปรับขนาดหน้าต่าง:

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

การส่งผ่านพารามิเตอร์

เมื่อส่งค่าพารามิเตอร์ให้ใช้ "ฟังก์ชันที่ไม่ระบุชื่อ" ที่เรียกใช้ฟังก์ชันที่ระบุพร้อมกับพารามิเตอร์:

ตัวอย่าง

element.addEventListener("click", function(){ myFunction(p1, p2); });

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

function myFunction(a, b) {
  document.getElementById("demo").innerHTML = a * b;
}
</script>

</body>
</html>

เหตุการณ์เดือดพล่านหรือการจับภาพเหตุการณ์?

มีสองวิธีในการเผยแพร่เหตุการณ์ใน HTML DOM คือ bubbling และ capture

การเผยแพร่เหตุการณ์เป็นวิธีหนึ่งในการกำหนดลำดับองค์ประกอบเมื่อมีเหตุการณ์เกิดขึ้น หากคุณมีองค์ประกอบ <p> อยู่ภายในองค์ประกอบ <div> และผู้ใช้คลิกที่องค์ประกอบ <p> ซึ่งองค์ประกอบนั้น เหตุการณ์ "คลิก" ควรได้รับการจัดการก่อนหรือไม่

ใน bubbling เหตุการณ์ขององค์ประกอบส่วนใหญ่ภายในจะถูกจัดการก่อน จากนั้นจึงจัดการภายนอก: เหตุการณ์การคลิกขององค์ประกอบ <p> จะได้รับการจัดการก่อน จากนั้นเหตุการณ์การคลิกขององค์ประกอบ <div>

ในการ จับภาพ เหตุการณ์ขององค์ประกอบภายนอกส่วนใหญ่จะถูกจัดการก่อน จากนั้นจึงจัดการเหตุการณ์ภายใน: เหตุการณ์การคลิกขององค์ประกอบ <div> จะถูกจัดการก่อน จากนั้นเหตุการณ์การคลิกขององค์ประกอบ <p>

ด้วยเมธอด addEventListener() คุณสามารถระบุประเภทการขยายพันธุ์ได้โดยใช้พารามิเตอร์ "useCapture":

addEventListener(event, function, useCapture);

ค่าเริ่มต้นคือเท็จ ซึ่งจะใช้การเผยแพร่แบบ bubbling เมื่อตั้งค่าเป็นจริง เหตุการณ์จะใช้การเผยแพร่แบบจับภาพ

ตัวอย่าง

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

วิธีการ RemoveEventListener()

removeEventListener() วิธีการลบตัวจัดการเหตุการณ์ที่ได้รับ ที่แนบมากับเมธอด addEventListener():

ตัวอย่าง

element.removeEventListener("mousemove", myFunction);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
  <p>Click the button to remove the div's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

อ้างอิงวัตถุเหตุการณ์ HTML DOM

สำหรับรายการเหตุการณ์ HTML DOM ทั้งหมด โปรดดูการอ้างอิงวัตถุเหตุการณ์ HTML DOM ฉบับสมบูรณ์ของเรา