ਜਾਵਾਸਕ੍ਰਿਪਟ ਐੱਚਟੀਐੱਲ ਡੋਮ ਈਵੈਂਟ ਲਿਸਟੇਨਰ

addEventListener() ਮੱਥਦਾ

ਇੰਸਟੈਂਸ

ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਨ ਉੱਤੇ ਈਵੈਂਟ ਲਿਸਨਰ ਜੋੜੋ:

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

addEventListener() ਮੱਥਦਾ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਸਪੱਸ਼ਟ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜਦਾ ਹੈ。

addEventListener() ਮੱਥਦਾ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜਦਾ ਹੈ ਅਤੇ ਮੌਜੂਦਾ ਈਵੈਂਟ ਹੈਂਡਲਰਾਂ ਨੂੰ ਓਵਰਰਾਇਡ ਨਹੀਂ ਕਰਦਾ。

ਤੁਸੀਂ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਕਈ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜ ਸਕਦੇ ਹੋ।

ਤੁਸੀਂ ਇੱਕ ਐਲੀਮੈਂਟ 'ਤੇ ਕਈ ਵੱਖ-ਵੱਖ ਤਰ੍ਹਾਂ ਦੇ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਦੋ ਵੱਖ-ਵੱਖ "click" ਈਵੈਂਟ

ਤੁਸੀਂ ਕਿਸੇ ਵੀ DOM ਆਬਜੈਕਟ 'ਤੇ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜ ਸਕਦੇ ਹੋ, ਨਾ ਕੇ ਸਿਰਫ਼ HTML ਐਲੀਮੈਂਟ 'ਤੇ ਹੀ, ਜਿਵੇਂ ਕਿ window ਆਬਜੈਕਟ。

addEventListener() ਮੱਥਦਾ ਵਰਤੋਂ ਕਰੋ, ਤਾਂ ਈਵੈਂਟ ਬੱਲੂਮਿੰਗ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਤੀਕਿਰਿਆ ਦੇਣ ਨੂੰ ਸੌਭਾਗਤ ਕਰਦਾ ਹੈ。

ਜਦੋਂ ਤੁਹਾਨੂੰ addEventListener() ਮੱਥਦਾ ਵਰਤੋਂ ਕਰੋ, ਤਾਂ JavaScript ਅਤੇ HTML ਟੈਗ ਵਿਚਕਾਰ ਵੱਖ-ਵੱਖ ਹੁੰਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਪੜ੍ਹਨ ਦੀ ਸੁਗਮਤਾ ਬਿਹਤਰ ਹੁੰਦੀ ਹੈ; ਹੁਣ ਵੀ HTML ਟੈਗ ਨੂੰ ਕੰਟਰੋਲ ਨਾ ਕਰਦੇ ਹੋਏ ਈਵੈਂਟ ਲਿਸਨਰ ਜੋੜ ਸਕਦੇ ਹੋ

ਜਦੋਂ ਤੁਹਾਨੂੰ removeEventListener() ਈਵੈਂਟ ਲਿਸਨਰ ਹਟਾਉਣ ਲਈ ਮੱਥਦਾ ਅਸਾਨ ਹੈ。

ਗਰੈਮਰ

ਐੱਲੀਮੈਂਟ.addEventListener(ਈਵੈਂਟ, ਫੰਕਸ਼ਨ, useCapture);

ਪਹਿਲਾ ਪੈਰਾਮੀਟਰ ਈਵੈਂਟ ਦੀ ਕਿਸਮ ਹੈ (ਜਿਵੇਂ ਕਿ "click" ਜਾਂ "mousedown")。

ਦੂਜਾ ਪੈਰਾਮੀਟਰ ਈਵੈਂਟ ਦੇ ਸਮੇਂ ਤੁਹਾਨੂੰ ਚੁਣਨ ਵਾਲੀ ਫੰਕਸ਼ਨ ਹੈ。

ਤੀਜਾ ਪੈਰਾਮੀਟਰ ਬੋਲੀਨ ਹੈ, ਜੋ ਈਵੈਂਟ ਬੱਲੂਮਿੰਗ ਜਾਂ ਈਵੈਂਟ ਕੈਪਚਰ ਦੀ ਚੋਣ ਕਰਦਾ ਹੈ। ਇਹ ਪੈਰਾਮੀਟਰ ਵਿਕਲਪੀ ਹੈ。

ਧਿਆਨ:ਈਵੈਂਟ 'ਤੇ "on" ਪ੍ਰੋਫਿਕਸ ਨਹੀਂ ਵਰਤੋਂ; ਇਸ ਦੀ ਥਾਂ "click" ਵਰਤੋਂ ਕਰੋ

ਐਲੀਮੈਂਟ 'ਤੇ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜੋ

ਇੰਸਟੈਂਸ

ਜਦੋਂ ਯੂਜ਼ਰ ਕਿਸੇ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਿੱਕ ਕਰੇ ਤਾਂ "Hello World!" ਸ਼ਬਦ ਦਿਸਾਓ:

ਐੱਲੀਮੈਂਟ.addEventListener("click", function(){ alert("Hello World!"); });

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਤੁਸੀਂ ਬਾਹਰੀ "ਨਾਮਿਤ" ਫੰਕਸ਼ਨ ਵੀ ਚੁਣ ਸਕਦੇ ਹੋ

ਇੰਸਟੈਂਸ

ਜਦੋਂ ਯੂਜ਼ਰ ਕਿਸੇ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਿੱਕ ਕਰੇ ਤਾਂ "Hello World!" ਸ਼ਬਦ ਦਿਸਾਓ:

ਐੱਲੀਮੈਂਟ.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇੱਕ ਹੀ ਐਲੀਮੈਂਟ 'ਤੇ ਕਈ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜੋ

addEventListener() ਇਹ ਮੱਥਦਾ ਤੁਹਾਨੂੰ ਇੱਕ ਹੀ ਐਲੀਮੈਂਟ 'ਤੇ ਕਈ ਈਵੈਂਟ ਜੋੜਨ ਦੀ ਇਜਾਜਤ ਦਿੰਦਾ ਹੈ, ਜਦੋਂ ਤੁਹਾਨੂੰ ਪਹਿਲੇ ਦੇ ਈਵੈਂਟ ਨੂੰ ਹਟਾਉਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ

ਇੰਸਟੈਂਸ

ਐੱਲੀਮੈਂਟ.addEventListener("click", myFunction);
ਐੱਲੀਮੈਂਟ.addEventListener("click", mySecondFunction);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਤੁਸੀਂ ਇੱਕ ਹੀ ਐਲੀਮੈਂਟ 'ਤੇ ਵੱਖ-ਵੱਖ ਤਰ੍ਹਾਂ ਦੇ ਈਵੈਂਟ ਜੋੜ ਸਕਦੇ ਹੋ

ਇੰਸਟੈਂਸ

ਐੱਲੀਮੈਂਟ.addEventListener("mouseover", myFunction);
ਐੱਲੀਮੈਂਟ.addEventListener("click", mySecondFunction);
ਐੱਲੀਮੈਂਟ.addEventListener("mouseout", myThirdFunction);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

Window ਆਬਜੈਕਟ ਨੂੰ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜੋ

addEventListener() ਇਹ ਤੁਹਾਨੂੰ ਈਵੈਂਟ ਲਿਸਨਰ ਕੋਲੋਂ ਕਿਸੇ ਵੀ HTML DOM ਆਬਜੈਕਟ 'ਤੇ ਜੋੜਨ ਦੀ ਇਜਾਜਤ ਦਿੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ HTML ਐਲੀਮੈਂਟ, HTML ਆਬਜੈਕਟ, window ਆਬਜੈਕਟ ਜਾਂ ਕਿਸੇ ਵੀ ਈਵੈਂਟ ਸਪੋਰਟਿੰਗ ਆਬਜੈਕਟ, ਜਿਵੇਂ ਕਿ xmlHttpRequest ਆਬਜੈਕਟ。

ਇੰਸਟੈਂਸ

ਜਦੋਂ ਯੂਜ਼ਰ ਵਿੰਡੋ ਦਾ ਅਕਾਰ ਸੋਧਦਾ ਹੈ ਤਾਂ ਇਹ ਈਵੈਂਟ ਲਿਸਨਰ ਟ੍ਰਿਗਰ ਕਰੋ:

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਪੈਰਾਮੀਟਰ ਪਾਸ ਕਰਨਾ

ਪੈਰਾਮੀਟਰ ਪਾਸ ਕਰਨ ਦੇ ਸਮੇਂ, ਸਪੁਰਦਗੀ ਵਾਲੀ ਫੰਕਸ਼ਨ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨ ਲਈ "ਅਨੋਨਮਸ ਫੰਕਸ਼ਨ" ਵਾਲੇ ਪੈਰਾਮੀਟਰ ਵਿੱਚ ਪਾਸ ਕਰੋ:

ਇੰਸਟੈਂਸ

ਐੱਲੀਮੈਂਟ.addEventListener("click", function(){ myFunction(p1, p2); });

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇਵੈਂਟ ਬੁੱਲਿੰਗ ਹੈ ਜਾਂ ਇਵੈਂਟ ਕੈਪਚਰ?

HTML DOM ਵਿੱਚ ਦੋ ਤਰ੍ਹਾਂ ਦਾ ਇਵੈਂਟ ਪ੍ਰਸਾਰ ਹੈ: ਬੁੱਲਿੰਗ ਅਤੇ ਕੈਪਚਰ。

ਇਵੈਂਟ ਪ੍ਰਸਾਰ ਇਹ ਇੱਕ ਤਰ੍ਹਾਂ ਹੈ ਜੋ ਇਵੈਂਟ ਹੋਣ ਉੱਤੇ ਇਲੈਕਟਰਨ ਦੀ ਕਿਸਮ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ। ਜੇਕਰ <div> ਇਲੈਕਟਰਨ ਵਿੱਚ ਇੱਕ <p> ਹੈ, ਅਤੇ ਵਰਤਕਾਰੀ <p> ਇਲੈਕਟਰਨ ਨੂੰ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਕਿਸ ਇਲੈਕਟਰਨ ਦੇ "click" ਇਵੈਂਟ ਨੂੰ ਪਹਿਲਾਂ ਹੈਂਡਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ?

ਬੁੱਲਿੰਗ ਵਿੱਚ, ਸਭ ਤੋਂ ਅੰਦਰ ਤੋਂ ਆਉਣ ਵਾਲੇ ਇਲੈਕਟਰਨ ਪਹਿਲਾਂ ਹੈ, ਫਿਰ ਬਾਹਰਵਾਰ ਤੋਂ ਆਉਣ ਵਾਲੇ: <p> ਇਲੈਕਟਰਨ ਦੇ ਕਲਿੱਕ ਇਵੈਂਟ ਪਹਿਲਾਂ ਹੈ, ਫਿਰ <div> ਇਲੈਕਟਰਨ ਦੇ ਕਲਿੱਕ ਇਵੈਂਟ ਹੈ।

ਕੈਪਚਰ ਵਿੱਚ, ਸਭ ਤੋਂ ਬਾਹਰਵਾਰ ਤੋਂ ਆਉਣ ਵਾਲੇ ਇਲੈਕਟਰਨ ਪਹਿਲਾਂ ਹੈ, ਫਿਰ ਅੰਦਰਲੇ ਤੋਂ ਆਉਣ ਵਾਲੇ: <div> ਇਲੈਕਟਰਨ ਦੇ ਕਲਿੱਕ ਇਵੈਂਟ ਪਹਿਲਾਂ ਹੈ, ਫਿਰ <p> ਇਲੈਕਟਰਨ ਦੇ ਕਲਿੱਕ ਇਵੈਂਟ ਹੈ।

addEventListener() ਮੇਥੋਡ ਵਿੱਚ, ਤੁਸੀਂ "useCapture" ਪੈਰਾਮੀਟਰ ਦੇ ਇਸਤੇਮਾਲ ਨਾਲ ਪ੍ਰਸਾਰ ਪ੍ਰਕਾਰ ਨਿਰਧਾਰਿਤ ਕਰ ਸਕਦੇ ਹੋ

addEventListener(ਈਵੈਂਟ, ਫੰਕਸ਼ਨ, useCapture);

ਮੂਲ ਮੁੱਲ ਹੈ falseਤਾਂ ਬੁੱਲਿੰਗ ਪ੍ਰਸਾਰ ਦਾ ਇਸਤੇਮਾਲ ਕਰਦਾ ਹੈ, ਜੇਕਰ ਇਹ ਮੁੱਲ trueਤਾਂ ਇਵੈਂਟ ਕੈਪਚਰ ਪ੍ਰਸਾਰ ਦਾ ਇਸਤੇਮਾਲ ਕਰਦਾ ਹੈ。

ਇੰਸਟੈਂਸ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

removeEventListener() ਮੇਥੋਡ

removeEventListener() ਮੇਥੋਡ ਨਾਲ ਇਸਤੇਮਾਲ ਕੀਤੇ ਗਏ ਹਨ addEventListener() ਮੇਥੋਡ ਜੋ ਇਸਤੇਮਾਲ ਕੀਤੇ ਗਏ ਹਨ ਦੇ ਇਵੈਂਟ ਹੈਂਡਲਰ:

ਇੰਸਟੈਂਸ

ਐੱਲੀਮੈਂਟ.removeEventListener("mousemove", myFunction());

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਇਹ ਮੇਥੋਡਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਦੇਣ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਊਜ਼ਰ ਸੰਸਕਰਣ ਦੇ ਨੰਬਰ ਸਾਰੇ ਟੇਬਲ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਹਨ。

ਮੇਥੋਡ
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

ਟਿੱਪਣੀਆਂ:IE 8, Opera 6.0 ਅਤੇ ਉਸ ਤੋਂ ਪਹਿਲੇ ਦੇ ਸੰਸਕਰਣ ਇਹਨਾਂ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦੇ addEventListener() ਅਤੇ removeEventListener() ਮੇਥੋਡ। ਪਰ, ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ ਬਰਾਊਜ਼ਰ ਸੰਸਕਰਣਾਂ ਲਈ, ਤੁਸੀਂ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ attachEvent()}} ਮਿਥਕ ਐੱਲੀਮੈਂਟ ਨੂੰ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜਨ ਵਾਲਾ ਮਿਥਕ, ਅਤੇ detachEvent() ਮਿਥਕ ਹਟਾਓ:

ਐੱਲੀਮੈਂਟ.attachEvent(ਈਵੈਂਟ, ਫੰਕਸ਼ਨ);
ਐੱਲੀਮੈਂਟ.detachEvent(ਈਵੈਂਟ, ਫੰਕਸ਼ਨ);

ਇੰਸਟੈਂਸ

ਕਰਸਬਰਾਊਜ਼ਰ ਸਲਿਊਸ਼ਨ

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // ਮੁੱਖ ਬਰਾਊਜ਼ਰਾਂ ਲਈ, ਇਕੱਲੇ IE 8 ਅਤੇ ਪੁਰਾਣੇ ਹਨ
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // ਐੱਲੀਮੈਂਟ ਇੱਕ ਸਾਲ ਪਹਿਲਾਂ ਅਤੇ ਅਧਿਕ
    x.attachEvent("onclick", myFunction);
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

HTML DOM Event ਆਬਜੈਕਟ ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ

ਸਾਰੇ HTML DOM ਈਵੈਂਟਾਂ ਦੀ ਸੂਚੀ ਲਈ, ਸਾਡੀ ਪੂਰੀ HTML DOM Event ਆਬਜੈਕਟ ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ。