Method ya addEventListener() ya Document wa DOM HTML

Utekelezaji na Kifaa cha Kusoma

addEventListener() Mwendo huo unaingiza programu ya kumsaada huzuni kwa dokumenti.

Mfano

Mwongozo 1

Kuingiza huzuni kwa uharibifu wa dokumenti:

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

Jaribu kwa mafanikio

Inafaa kufaia inayofaa kufaia

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

Jaribu kwa mafanikio

Mfano 2

Unaweza kuingiza vingine vya matukio kwenye hatua:

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

Jaribu kwa mafanikio

Mfano 3

Unaweza kuingiza matukio ya kina tofauti:

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

Jaribu kwa mafanikio

Mfano 4

Kuwakilisha parameta, tumia "function inonyesha jina" kumtumia programu na parameta:

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

Jaribu kwa mafanikio

Mfano 5

Badilisha rangi ya mbili wa hatua ya siku:

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

Jaribu kwa mafanikio

Mfano 6

Tumia method ya removeEventListener():

// Kuingiza kwa kufaa kusikia matukio
document.addEventListener("mousemove", myFunction);
// Kuuza kwa kufaa kufaa kusikia matukio
document.removeEventListener("mousemove", myFunction);

Jaribu kwa mafanikio

Inafaa kufaia

document.addEventListener(type, function, capture)

Parameta

Parameta Maelezo
type

Inahitaji. Jina la matukio.

Hata hivyo tumia "on".

Tumia "click" hivyo "onclick".

Wote walio na matukio ya HTML DOM waliopangwa kwenye:

Mwongozo wa Taarifa ya Matukio ya HTML DOM
function

Inahitaji. Programu inayotumia wakati ya kifo cha matukio.

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

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

可选（默认 = false）。

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

返回值

无。

技术细节

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

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

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

Kama matokeo wa Node.cloneNode() Method ama Document.importNode() Method haitakae kopiwa kwa matukio ya kina kwa sababu ya kina ya asili kwa kina ya kina kwa sababu ya kina kina.

Hii method inadefiniwa kwenye vifaa vya kina vya Document na Window, na inafanya kama kina.

Msaada wa vifaa vya kina

document.addEventListener Ni DOM Level 2 (2001) mafanikio.

Wote wa vifaa vya kina hawana hisia ya kufikia hii:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Msaada 9-11 Msaada Msaada Msaada Msaada

Pangalia ukurasa wa kwanza

Method ya kitumiaji

Method ya addEventListener()

Method ya removeEventListener()

Method ya siri ya kitabu

Method ya addEventListener()

Method ya removeEventListener()

Mafunzo

HTML DOM EventListener

Orodha ya matukio ya DOM kwa ujumbe