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

HTML DOM ਜ਼ਰੀਏ JavaScript ਘਟਨਾ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰ ਸਕਦਾ ਹੈ:

ਮਾਉਸ ਉੱਪਰ ਆਇਆ!
ਕਲਿੱਕ ਕਰੋ

ਘਟਨਾ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨਾ

JavaScript ਘਟਨਾ ਪੈਦਾ ਹੋਣ ਉੱਤੇ ਚਲਦਾ ਹੈ, ਉਦਾਹਰਣ ਵਜੋਂ ਜਦੋਂ ਯੂਜ਼ਰ ਕਿਸੇ HTML ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਕਲਿੱਕ ਕਰਦਾ ਹੈ

ਯੂਜ਼ਰ ਕਲਿੱਕ ਕਰਦੇ ਹੋਏ ਕੋਡ ਚਲਾਉਣ ਲਈ, ਤੁਸੀਂ HTML ਘਟਨਾ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ JavaScript ਕੋਡ ਜੋੜ ਸਕਦੇ ਹੋ

onclick=JavaScript

HTML ਘਟਨਾ ਦੇ ਉਦਾਹਰਣ:

  • ਜਦੋਂ ਯੂਜ਼ਰ ਮਾਉਸ ਨੂੰ ਕਲਿੱਕ ਕਰਦਾ ਹੈ
  • ਜਦੋਂ ਵੈੱਬਸਾਈਟ ਲੋਡ ਹੋਇਆ ਹੈ
  • ਜਦੋਂ ਚਿੱਤਰ ਲੋਡ ਹੋਇਆ ਹੈ
  • ਜਦੋਂ ਮਾਉਸ ਐਲੀਮੈਂਟ 'ਤੇ ਰਹਿੰਦਾ ਹੈ
  • ਜਦੋਂ ਇਨਪੁਟ ਫੀਲਡ ਦਾ ਸਮਾਨਤਾ ਬਦਲਦਾ ਹੈ
  • ਜਦੋਂ HTML ਫਾਰਮ ਭੇਜਦਾ ਹੈ
  • ਜਦੋਂ ਯੂਜ਼ਰ ਕੀਬੋਰਡ ਦਾ ਬਟਨ ਦਬਾਉਂਦਾ ਹੈ

ਜਦੋਂ ਯੂਜ਼ਰ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰੇ <h1> ਜਦੋਂ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾਵੇਗਾ ਤਾਂ ਉਸ ਦਾ ਸਮਾਨਤਾ ਬਦਲ ਜਾਵੇਗਾ:

ਉਦਾਹਰਣ

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">ਇਹ ਟੈਕਸਟ ਕਲਿੱਕ ਕਰੋ!</h1>
</body>
</html>

ਸੁਭਾਵਿਕ ਕਰੋ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਈਵੈਂਟ ਹੈਂਡਲਰ ਵਿੱਚ ਫੰਕਸ਼ਨ ਚਲਾਇਆ ਗਿਆ ਹੈ:

ਉਦਾਹਰਣ

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">ਇਹ ਟੈਕਸਟ ਕਲਿੱਕ ਕਰੋ!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

ਸੁਭਾਵਿਕ ਕਰੋ

HTML ਈਵੈਂਟ ਅਟਰੀਬਿਊਟ

ਜਦੋਂ ਤੁਸੀਂ HTML ਐਲੀਮੈਂਟ ਨੂੰ ਈਵੈਂਟ ਅਲਾਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਈਵੈਂਟ ਅਟਰੀਬਿਊਟ ਵਰਤ ਸਕਦੇ ਹੋ

ਉਦਾਹਰਣ

ਬਟਨ ਐਲੀਮੈਂਟ ਨੂੰ ਈਵੈਂਟ ਅਲਾਟ ਕਰਨਾ onclick �ਵੈਂਟ:

<button onclick="displayDate()">ਪ੍ਰਯੋਗ ਕਰੋ</button>

ਸੁਭਾਵਿਕ ਕਰੋ

ਉਸ ਉਦਾਹਰਣ ਵਿੱਚ ਨਾਮ displayDate ਵਾਲੀ ਫੰਕਸ਼ਨ ਬਟਨ ਦੇ ਕਲਿੱਕ ਕੀਤੇ ਜਾਣ 'ਤੇ ਚਲਾਇਆ ਜਾਵੇਗੀ。

HTML DOM ਦੇ ਰਾਹੀਂ ਈਵੈਂਟ ਅਲਾਟ ਕਰਨਾ

HTML DOM ਆਪਣੇ ਹੱਥੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਰਾਹੀਂ HTML ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਈਵੈਂਟ ਅਲਾਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ:

ਉਦਾਹਰਣ

ਬਟਨ ਐਲੀਮੈਂਟ ਨੂੰ ਸੰਦੇਸ਼ ਦੇਣਾ onclick �ਵੈਂਟ:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

ਸੁਭਾਵਿਕ ਕਰੋ

ਉਸ ਉਦਾਹਰਣ ਵਿੱਚ ਨਾਮ displayDate ਵਾਲੀ ਫੰਕਸ਼ਨ ਨੂੰ id="myBtn" ਵਾਲੇ HTML ਐਲੀਮੈਂਟ ਨੂੰ ਅਲਾਟ ਕੀਤਾ ਗਿਆ ਹੈ。

ਜਦੋਂ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾਵੇਗਾ ਤਾਂ ਫੰਕਸ਼ਨ ਚਲਾਇਆ ਜਾਵੇਗਾ。

onload ਅਤੇ onunload ਈਵੈਂਟ

ਜਦੋਂ ਯੂਜ਼ਰ ਪੇਜ ਵਿੱਚ ਆਉਂਦਾ ਹੈ ਅਤੇ ਬਾਹਰ ਨਿਕਲਦਾ ਹੈ ਤਾਂ ਚਲਾਇਆ ਜਾਵੇਗਾ onload ਅਤੇ onunload �ਵੈਂਟ

onload �ਵੈਂਟ ਯੂਜ਼ਰ ਦੇ ਬਰਾਉਜ਼ਰ ਦੇ ਪ੍ਰਕਾਰ ਅਤੇ ਵਰਜਨ ਨੂੰ ਪਤਾ ਲਗਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ ਉਸ ਸੂਚਨਾ ਦੇ ਅਧਾਰ 'ਤੇ ਵੈੱਬਸਾਈਟ ਦੀ ਸਹੀ ਵਰਜਨ ਲੋਡ ਕਰਦਾ ਹੈ。

onload ਅਤੇ onunload �ਵੈਂਟ ਕੂਕੀਜ਼ ਦੇ ਹੱਲ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。

ਉਦਾਹਰਣ

<body onload="checkCookies()">

ਸੁਭਾਵਿਕ ਕਰੋ

onchange ਈਵੈਂਟ

onchange ਆਮ ਤੌਰ 'ਤੇ ਇਨਪੁਟ ਫੀਲਡ ਵਰਤੀ ਜਾਂਦੀ ਹੈ।

ਈਵੈਂਟ ਦੀ ਇਕ ਉਦਾਹਰਣ onchange ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ। ਜਦੋਂ ਯੂਜ਼ਰ ਇਨਪੁਟ ਫੀਲਡ ਦਾ ਸਮਾਨਤਾ ਬਦਲਦਾ ਹੈ ਤਾਂ upperCase() ਫੰਕਸ਼ਨ ਚਲਾਇਆ ਜਾਵੇਗਾ。

ਉਦਾਹਰਣ

<input type="text" id="fname" onchange="upperCase()">

ਸੁਭਾਵਿਕ ਕਰੋ

onmouseover ਅਤੇ onmouseout ਈਵੈਂਟ

onmouseover ਅਤੇ onmouseout ਈਵੈਂਟ ਇਹ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜਦੋਂ ਯੂਜ਼ਰ ਮਾਉਸ ਨੂੰ HTML ਐਲੀਮੈਂਟ ਉੱਤੇ ਲਿਆਉਂਦਾ ਹੈ ਜਾਂ ਉਸ ਤੋਂ ਬਾਹਰ ਲਿਆਉਂਦਾ ਹੈ ਅਤੇ ਕੋਈ ਫੰਕਸ਼ਨ ਚਲਾਉਂਦਾ ਹੈ:

ਮਾਉਸ ਉੱਪਰ ਆਇਆ!

ਸੁਭਾਵਿਕ ਕਰੋ

onmousedown, onmouseup ਅਤੇ onclick ਈਵੈਂਟ

onmousedown, onmouseup ਅਤੇ onclick ਈਵੈਂਟ ਮਲਟੀਪਲ ਹਨ ਅਤੇ ਉਹ ਸਾਰੇ ਮਾਉਸ ਕਲਿੱਕ ਈਵੈਂਟ ਬਣਾਉਂਦੇ ਹਨ。

ਪਹਿਲਾਂ ਜਦੋਂ ਮਾਉਸ ਬਟਨ ਕਲਿੱਕ ਹੁੰਦਾ ਹੈonmousedown ਈਵੈਂਟ ਸਰਗਰਮ ਹੋਇਆ ਹੈ; ਫਿਰ ਜਦੋਂ ਮਾਉਸ ਬਟਨ ਛੱਡਿਆ ਹੈonmouseup ਈਵੈਂਟ ਸਰਗਰਮ ਹੋਇਆ ਹੈ; ਅੰਤ ਵਿੱਚ ਜਦੋਂ ਮਾਉਸ ਕਲਿੱਕ ਪੂਰਾ ਹੋਇਆ ਹੈonclick ਈਵੈਂਟ ਸਰਗਰਮ ਹੋਇਆ ਹੈ。

ਕਲਿੱਕ ਕਰੋ

ਸੁਭਾਵਿਕ ਕਰੋ

ਹੋਰ ਉਦਾਹਰਣ

onmousedown ਅਤੇ onmouseup
ਜਦੋਂ ਯੂਜ਼ਰ ਮਾਉਸ ਬਟਨ ਦਬਾ ਦਿੰਦਾ ਹੈ ਤਾਂ ਚਿੱਤਰ ਬਦਲਦਾ ਹੈ。
onload
ਜਦੋਂ ਪੰਨਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋ ਜਾਵੇ ਤਾਂ ਅਲਰਟ ਬਾਕਸ ਦਿਖਾਉਂਦਾ ਹੈ。
onfocus
ਜਦੋਂ ਇੰਪੁਟ ਫੀਲਡ ਫੋਕਸ ਮਿਲਦਾ ਹੈ ਤਾਂ ਉਸ ਦਾ ਪੱਗਲ ਰੰਗ ਬਦਲਦਾ ਹੈ。
ਮਾਉਸ ਈਵੈਂਟ
ਜਦੋਂ ਨਿਰਧਾਰਕ ਮੌਜੂਦ ਹੋਣ ਤੇ ਉਸ ਦਾ ਰੰਗ ਬਦਲਦਾ ਹੈ。

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

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