HTML DOM addEventListener() ਮੱਥੋਡ

تعریف اور استعمال

addEventListener() میتاویس کا ایکٹنٹ ہینڈلر ایلگا رہا ہے.

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਬਟਨ ਐਲੀਮੈਂਟ ਵਿੱਚ click ਈਵੈਂਟ ਜੋੜੋ:

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

亲自试一试

ਉਦਾਹਰਣ 2

ਹੋਰ ਸਥਿਰ ਕੋਡ:

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

亲自试一试

ਇੱਥੇ ਹੋਰ ਉਦਾਹਰਣ ਮਿਲ ਸਕਦੇ ਹਨ。

ਸਿਧਾਂਤ

element.addEventListener(type, ਫੰਕਸ਼ਨ, useCapture)

ਪੈਰਾਮੀਟਰ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
type

ਲਾਜ਼ਮੀ। ਈਵੈਂਟ ਦਾ ਨਾਮ

ਕਿਰਦ "on" ਪ੍ਰੋਫਾਈਲ ਨਹੀਂ ਕਰੋ

ਕਿਰਦ "click" ਵਰਗੇ ਉਪਯੋਗ ਕਰੋ ਨਹੀਂ, "onclick"


DOM 事件的完整列表
ਫੰਕਸ਼ਨ ਲਾਜ਼ਮੀ। ਈਵੈਂਟ ਹੰਡਲਿੰਗ ਲਈ ਚਲਾਇਆ ਜਾਣ ਵਾਲਾ ਫੰਕਸ਼ਨ
useCapture

ਚੋਣਵਾਂ (ਮੂਲ ਤੋਂ ਪੂਰਾ = ਸੱਚ)

  • ਫਲੈਗ (ਮੂਲ ਤੋਂ ਪੂਰਾ = ਸੱਚ) - ਬੱਬਲ ਪੜਾ ਵਿੱਚ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ。
  • ਸੱਚ - ਕੈਪਚਰ ਪੜਾ ਵਿੱਚ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ。

ਵਾਪਸ ਦਿੱਤਾ ਗਿਆ ਹੈ

ਨਹੀਂ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਇਹ ਮੇਥਡ ਨਿਰਦਿਸ਼ਟ ਈਵੈਂਟ ਲਿਸਨਰ ਫੰਕਸ਼ਨ ਨੂੰ ਮੌਜੂਦਾ ਨੋਡ ਦੇ ਲਿਸਨਰ ਸੈਕਟਿਓਨ ਵਿੱਚ ਜੋੜ ਦਿੰਦਾ ਹੈ ਤਾਂ ਕਿ ਉਹ ਨਿਰਦਿਸ਼ਟ ਈਵੈਂਟ ਦੇ ਹੰਡਲਿੰਗ ਲਈ ਚਲਾਇਆ ਜਾ ਸਕੇ。 type ਈਵੈਂਟ ਦੇ ਸਮੇਂ useCapture ਮੂਲ ਤੋਂ ਪੂਰਾ ਹੈ, ਤਾਂ ਲਿਸਨਰ ਪਕਸ਼ੀ ਈਵੈਂਟ ਲਿਸਨਰ ਦੇ ਰੂਪ ਵਿੱਚ ਰਜਿਸਟਰ ਕੀਤਾ ਗਿਆ ਹੈ। ਜੇਕਰ useCapture ਮੂਲ ਤੋਂ ਪੂਰਾ ਹੈ, ਉਹ ਆਮ ਈਵੈਂਟ ਲਿਸਨਰ ਦੇ ਰੂਪ ਵਿੱਚ ਰਜਿਸਟਰ ਕੀਤਾ ਗਿਆ ਹੈ。

addEventListener() ਕਈ ਵਾਰ ਬੱਚਾ ਹੋ ਸਕਦਾ ਹੈ, ਇੱਕ ਹੀ ਨੋਡ ਉੱਤੇ ਇੱਕ ਹੀ ਤਰ੍ਹਾਂ ਦੇ ਈਵੈਂਟ ਲਿਸਨਰ ਰਜਿਸਟਰ ਕਰਨ ਲਈ ਅਤੇ ਲੰਬੇ ਨਹੀਂ ਹੋਣੇ ਚਾਹੀਦੇ, DOM ਕਈ ਈਵੈਂਟ ਲਿਸਨਰਸ ਦੀ ਬੱਚਾ ਕਿਉਂਕਿ ਬੱਚਾ ਕਰਨ ਦੀ ਕਿਸਮ ਨਹੀਂ ਪਤਾ ਕਰ ਸਕਦਾ ਹੈ。

ਜੇਕਰ ਇੱਕ ਈਵੈਂਟ ਲਿਸਨਰ ਫੰਕਸ਼ਨ ਇੱਕ ਹੀ ਨੋਡ ਉੱਤੇ ਇੱਕ ਹੀ ਤਰ੍ਹਾਂ ਦੇ ਸਮਾਨ ਵਰਗ ਵਿੱਚ ਰਜਿਸਟਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ type ਅਤੇ useCapture ਪੈਰਾਮੀਟਰ ਦੋ ਵਾਰ ਰਜਿਸਟਰ ਕੀਤੇ ਗਏ ਹਨ, ਤਾਂ ਦੂਜੀ ਵਾਰ ਰਜਿਸਟਰ ਕੀਤਾ ਗਿਆ ਹੋਵੇਗਾ ਅਣਮਾਨਯੋਗ। ਜਦੋਂ ਇੱਕ ਨੋਡ ਉੱਤੇ ਈਵੈਂਟ ਦੇ ਸਮੇਂ ਇਸ ਨੋਡ ਉੱਤੇ ਨਵਾਂ ਈਵੈਂਟ ਲਿਸਨਰ ਰਜਿਸਟਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਸ ਈਵੈਂਟ ਲਈ ਨਵੇਂ ਈਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਕਿਰਦ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਜਦੋਂ Node.cloneNode() ਮੇਥਡ ਜਾਂ Document.importNode() ਜਦੋਂ Document ਨੋਡ ਨੂੰ ਕਾਪੀ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਮੂਲ ਨੋਡ ਉੱਤੇ ਰਜਿਸਟਰ ਕੀਤੇ ਗਏ ਈਵੈਂਟ ਲਿਸਨਰਸ ਨੂੰ ਕਾਪੀ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਇਹ ਵੀ ਮੇਥਡ ਡਾਕੂਮੈਂਟ ਅਤੇ ਵਿੰਡੋ ਇਹ ਵੀ ਅਧਿਐਨ ਕੀਤੇ ਗਏ ਹਨ ਅਤੇ ਉਹ ਇੱਕ ਜਿਹੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ。

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 3

ਤੁਸੀਂ ਇੱਕ ਹੀ ਐਲੀਮੈਂਟ ਵਿੱਚ ਕਈ ਈਵੈਂਟਸ ਜੋੜ ਸਕਦੇ ਹੋ:

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

亲自试一试

ਉਦਾਹਰਣ 4

ਤੁਸੀਂ ਇੱਕ ਹੀ ਐਲੀਮੈਂਟ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਈਵੈਂਟਸ ਜੋੜ ਸਕਦੇ ਹੋ:

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

亲自试一试

例子 5

如需传递参数值，请使用“匿名函数”：

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

亲自试一试

例子 6

更改

浏览器支持

element.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 事件的完整列表