جاوا اسکریپت ایونٹ

HTML ਈਵੈਂਟ ਹਰ ਇਲੈਕਟ੍ਰੌਨਿਕ ਇਕਾਈ 'ਤੇ ਹੋਣ ਵਾਲਾ 'ਕੰਮ' ਹੈ。

HTML ਪੰਨੇ 'ਤੇ JavaScript ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ JavaScript ਈਵੈਂਟਸ ਨੂੰ 'ਪ੍ਰਤਿਕਿਰਿਆ' ਕਰ ਸਕਦਾ ਹੈ。

HTML ਈਵੈਂਟ

HTML ਈਵੈਂਟ ਬਰਾਉਜ਼ਰ ਜਾਂ ਯੂਜ਼ਰ ਦੇ ਕੁਝ ਕੰਮ ਹੋ ਸਕਦੇ ਹਨ。

ਹੇਠਾਂ HTML ਈਵੈਂਟਸ ਦੇ ਕੁਝ ਉਦਾਹਰਣ ਹਨ:

  • HTML ਵੈੱਬਸਾਈਟ ਲੋਡ ਹੋਈ
  • HTML ਇਨਪੁਟ ਫੀਲਡ ਬਦਲਿਆ ਗਿਆ
  • HTML ਬਟਨ ਦਬਾਇਆ ਗਿਆ

ਆਮ ਤੌਰ 'ਤੇ ਈਵੈਂਟ ਹੋਣ ਉੱਤੇ ਯੂਜ਼ਰ ਨੂੰ ਕੁਝ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

JavaScript ਈਵੈਂਟ ਸੰਜਾਲਿਤ ਹੋਣ ਉੱਤੇ ਕੋਡ ਚਲਾਉਣ ਦੀ ਇਜਾਜਤ ਦਿੰਦਾ ਹੈ。

ਜਰੀਏ JavaScript ਕੋਡ،HTML ਇਲੈਕਟ੍ਰੌਨਿਕ ਇਕਾਈ ਨੂੰ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗੀ ਜੋੜਨ ਦੀ ਇਜਾਜਤ ਦਿੰਦਾ ਹੈ。

ਇੱਕ ਚੋਣ ਕਰੋ

<element event='ਕੁਝ JavaScript>

ਦੁਬਾਰਾ ਚੁਣੋ

<element event="ਕੁਝ JavaScript">

ਹੇਠਾਂ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚonclick ਪ੍ਰਤੀਯੋਗੀ (ਅਤੇ ਕੋਡ) ਨੂੰ ਜੋੜਿਆ ਗਿਆ ਹੈ <button> ਇਲੈਕਟ੍ਰੌਨਿਕ ਇਕਾਈ:

ਉਦਾਹਰਣ

<button onclick='document.getElementById("demo").innerHTML=Date()'>ਹੁਣ ਦਾ ਸਮਾਂ ਕੀ ਹੈ?</button>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ،JavaScript ਕੋਡ id="demo" ਦੇ ਇਲੈਕਟ੍ਰੌਨਿਕ ਇਕਾਈ ਦਾ ਸਮਾਂ ਬਦਲ ਦਿੱਤਾ:

ਆਉਣ ਵਾਲੇ ਉਦਾਹਰਣ ਵਿੱਚ，ਕੋਡ (ਵਰਤੋਂ this.innerHTML）ਆਪਣੇ ਇਲੈਕਟ੍ਰੌਨਿਕ ਇਕਾਈ ਦਾ ਸਮਾਂ ਬਦਲ ਦਿੱਤਾ:

ਉਦਾਹਰਣ

<button onclick="this.innerHTML=Date()">ਹੁਣ ਦਾ ਸਮਾਂ ਕੀ ਹੈ?</button>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

JavaScript ਕੋਡ ਮਾਤਰਾਂ ਵਿੱਚ ਹੈ। ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗੀ ਫੰਕਸ਼ਨ ਬੁਲਾਉਣਾ ਆਮ ਹੈ:

ਉਦਾਹਰਣ

<button onclick="displayDate()">ਹੁਣ ਦਾ ਸਮਾਂ ਕੀ ਹੈ?</button>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਆਮ HTML ਈਵੈਂਟਸ

ਹੇਠਾਂ ਕੁਝ ਆਮ HTML ਈਵੈਂਟਸ ਹਨ:

ਈਵੈਂਟ ਵਰਣਨ
onchange HTML ਇਲੈਕਟ੍ਰੌਨਿਕ ਇਕਾਈ ਬਦਲ ਦਿੱਤੀ ਗਈ ਹੈ
onclick ਉਪਯੋਗਕਰਤਾ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਿੱਕ ਕਰ ਰਿਹਾ ਹੈ
onmouseover ਉਪਯੋਗਕਰਤਾ ਮਾਉਸ ਨੂੰ HTML ਐਲੀਮੈਂਟ 'ਤੇ ਲਿਆ ਰਿਹਾ ਹੈ
onmouseout ਉਪਯੋਗਕਰਤਾ ਮਾਉਸ ਨੂੰ HTML ਐਲੀਮੈਂਟ ਤੋਂ ਹਟਾ ਰਿਹਾ ਹੈ
onkeydown ਉਪਯੋਗਕਰਤਾ ਕੀਬੋਰਡ ਬਟਨ ਦਬਾ ਰਿਹਾ ਹੈ
onload ਬਰਾਅਜ਼ਰ ਪੰਨਾ ਲੋਡ ਕਰ ਲਿਆ ਹੈ

ਪੂਰੀ ਸੂਚੀ:CodeW3C.com JavaScript ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ HTML DOM ਈਵੈਂਟ.

JavaScript ਕੀ ਕਰ ਸਕਦਾ ਹੈ?

ਈਵੈਂਟ ਹੈਂਡਲਰ ਉਪਯੋਗਕਰਤਾ ਇਨਪੁਟ, ਉਪਯੋਗਕਰਤਾ ਕਾਰਵਾਈ ਅਤੇ ਬਰਾਅਜ਼ਰ ਕਾਰਵਾਈ ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ:

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

ਜਾਵਾਸਕ੍ਰਿਪਟ ਈਵੈਂਟ ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਦੇ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਬਹੁਤ ਹਨ:

  • HTML ਈਵੈਂਟ ਪ੍ਰਾਪਰਟੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਚਲਾ ਸਕਦੀ ਹੈ
  • HTML ਈਵੈਂਟ ਪ੍ਰਾਪਰਟੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫੰਕਸਨ ਨੂੰ ਬੁਲਾ ਸਕਦੀ ਹੈ
  • ਤੁਸੀਂ ਆਪਣੇ ਈਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ HTML ਐਲੀਮੈਂਟ ਨੂੰ ਅਲਾਟ ਕਰ ਸਕਦੇ ਹੋ
  • ਤੁਸੀਂ ਈਵੈਂਟ ਨੂੰ ਭੇਜਣ ਜਾਂ ਹੈਂਡਲ ਕਰਨ ਤੋਂ ਰੋਕ ਸਕਦੇ ਹੋ
  • ਆਦਿ

ਤੁਸੀਂ HTML DOM ਚੈਪਟਰ ਵਿੱਚ ਈਵੈਂਟ ਅਤੇ ਈਵੈਂਟ ਹੈਂਡਲਰ ਬਾਰੇ ਵੱਧ ਤੋਂ ਵੱਧ ਜਾਣੋਗੇ。