HTML DOM Document addEventListener() 方法

Paglalarawan at paggamit

addEventListener() Ang paraan ay nagkakabit ng event handler sa dokumento.

Sample

Mga halimbawa 1

Magdagdag ng click event sa dokumento:

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Subukan nang sarili

Mas madaling pangungusap:

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

Subukan nang sarili

Halimbawa 2

Maaari mong magdagdag ng ilang event listener sa dokumento:

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

Subukan nang sarili

Halimbawa 3

Maaari mong magdagdag ng iba't ibang uri ng pangyayari:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Subukan nang sarili

Halimbawa 4

Gamitin ang "anonymous function" para mailipat ang mga parametro kapag tinatawag ang function na may parametro:

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

Subukan nang sarili

Halimbawa 5

Palitan ang kulay ng background ng dokumento:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Subukan nang sarili

Halimbawa 6

Gamitin ang removeEventListener() method:

// Magdagdag ng event listener
document.addEventListener("mousemove", myFunction);
// Alisin ang event listener
document.removeEventListener("mousemove", myFunction);

Subukan nang sarili

Pangungusap

document.addEventListener(type, function, capture)

Parametro

Parametro Paglalarawan
type

Wastong. Ang pangalan ng pangyayari.

Huwag gumamit ng "on" na awit.

Gamitin ang "click" sa halip ng "onclick".

Lahat ng HTML DOM na pangyayari ay nakalista sa:

Mga Referensya sa Manwal ng HTML DOM Event
function

Wastong. Ang function na nagpapatuloy kapag nangyayari ang isang pangyayari.

当事件发生时，将事件对象作为第一个参数传递给函数。

事件对象的类型取决于指定的事件。例如，"click" 事件属于 MouseEvent 对象。
capture

可选（默认 = false）。

  • true - 处理程序在捕获阶段执行
  • false - 处理程序在冒泡阶段执行

返回值

无。

技术细节

该方法将把指定的事件监听器函数添加到当前节点的监听器集合中，以处理指定类型 type 的事件。如果 capture 为 true，则监听器被注册为捕捉事件监听器。如果 capture 为 false，它被注册为普通事件监听器。

addEventListener() 可能被调用多次，在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意，DOM 不能确定多个事件句柄被调用的顺序。

如果一个事件监听器函数在同一个节点上用相同的 type 和 capture 参数注册了两次，那么第二次注册将被忽略。如果正在处理一个节点上的事件时，在这个节点上注册了一个新的事件监听器，则不会为那个事件调用新的事件监听器。

当用 Node.cloneNode() 方法或 Document.importNode() 方法复制一个 Document 节点时，不会复制为原始节点注册的事件监听器。

这个方法也在 Document 和 Window 对象上定义了，而且工作方式类似。

浏览器支持

document.addEventListener 是 DOM Level 2 (2001) 特性。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相关页面

元素方法

addEventListener() 方法

removeEventListener() 方法

文档方法

addEventListener() 方法

removeEventListener() 方法

教程

HTML DOM EventListener

完整的 DOM 事件列表