à¨µà¨¿à¨à¨à¨¾à¨° à¨à© à¨«à¨°à¨ à¨¹à© stopPropagation() à¨à¨¤à© stopImmediatePropagation()?

ਇਹ ਸਮਝਣਾ ਕਿ ਕਿਵੇਂ JavaScript

Arthur Petit

ਐਤਵਾਰ, 29 ਸਤੰਬਰ 2024 5:30:23 ਪੂ.ਦੁ.

ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਇਵੈਂਟ ਪਛਾਣ ਦੇ ਪਿੱਛੇ ਦਾ ਜਾਦੂ

ਇਵੈਂਟਸ ਕਿਸੇ ਵੀ ਵਿਅਕਤੀ ਲਈ ਕੋਡਿੰਗ ਦਾ ਇੱਕ ਜ਼ਰੂਰੀ ਹਿੱਸਾ ਹਨ ਜਿਸਨੇ JavaScript ਨਾਲ ਥੋੜ੍ਹਾ ਜਿਹਾ ਪ੍ਰਯੋਗ ਵੀ ਕੀਤਾ ਹੈ। ਕੋਡ ਲਿਖਣਾ ਜਿਵੇਂ AddEventListener ਖਾਸ ਪਰਸਪਰ ਕ੍ਰਿਆਵਾਂ 'ਤੇ ਕਾਰਵਾਈਆਂ ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਜਿਵੇਂ ਕਿ ਇੱਕ ਬਟਨ ਜਾਂ ਕੁੰਜੀ ਦਬਾਉਣ, ਇੱਕ ਜਾਣਿਆ-ਪਛਾਣਿਆ ਅਨੁਭਵ ਹੋ ਸਕਦਾ ਹੈ। ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਉਤਸੁਕ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਕਿਵੇਂ JavaScript ਹਮੇਸ਼ਾ ਇਹ ਪਛਾਣਦਾ ਹੈ ਕਿ ਇਹ ਇੱਕ ਇਵੈਂਟ ਨੂੰ ਸੰਭਾਲ ਰਿਹਾ ਹੈ, ਭਾਵੇਂ ਉਹਨਾਂ ਸਥਿਤੀਆਂ ਵਿੱਚ ਜਦੋਂ ਫੰਕਸ਼ਨ ਦੇ ਆਰਗੂਮੈਂਟ ਨਾਮ ਨੂੰ "ਇਵੈਂਟ" ਵਜੋਂ ਘੋਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਖਾਸ ਤੌਰ 'ਤੇ ਜਦੋਂ ਇਹ ਜਾਪਦਾ ਹੈ ਕਿ ਇਵੈਂਟ ਆਬਜੈਕਟ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਨਹੀਂ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਤਾਂ ਇਹ ਪਰੇਸ਼ਾਨ ਕਰਨ ਵਾਲਾ ਹੋ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਇਸ ਗੱਲ ਵਿੱਚ ਉਤਸੁਕ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਇਹ ਕਿਵੇਂ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਿਹੜੀ ਜਾਣਕਾਰੀ ਦੇਣੀ ਹੈ ਅਤੇ ਕਿੱਥੇ ਘਟਨਾ ਕੋਡ ਲਿਖਣ ਵੇਲੇ ਤੋਂ ਉਤਪੰਨ ਹੁੰਦਾ ਹੈ ਜਿਵੇਂ document.addEventListener("keydown", function(event) {...})।

JavaScript ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਸਿਸਟਮ ਵਿੱਚ ਕੁਝ ਲੁਕਵੇਂ ਢੰਗ ਹਨ। ਪੈਰਾਮੀਟਰ ਨਾਮ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ, ਜਦੋਂ ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਅਟੈਚ ਹੁੰਦਾ ਹੈ ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਆਪਣੇ ਆਪ ਇੱਕ ਈਵੈਂਟ ਆਬਜੈਕਟ ਨੂੰ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਗਾਰੰਟੀ ਦਿੰਦਾ ਹੈ ਕਿ ਫੰਕਸ਼ਨ ਨੂੰ ਹਮੇਸ਼ਾ ਇਵੈਂਟ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ ਡਾਟਾ ਮਿਲਦਾ ਹੈ।

ਇਹ ਪੋਸਟ JavaScript ਦੇ ਇਵੈਂਟ ਸਿਸਟਮ ਦੇ ਅੰਦਰੂਨੀ ਕੰਮਕਾਜ ਦੀ ਪੜਚੋਲ ਕਰੇਗੀ ਅਤੇ ਇਹ ਦਰਸਾਏਗੀ ਕਿ ਇਵੈਂਟਾਂ ਦੀ ਪਛਾਣ ਅਤੇ ਪਾਸ ਕਿਵੇਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਦਲੀਲ ਦੇ ਨਾਮ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ।

ਹੁਕਮ	ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ
addEventListener()	ਇਸ ਤਕਨੀਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਇੱਕ ਖਾਸ ਇਵੈਂਟ ਕਿਸਮ (ਜਿਵੇਂ ਕਿ "ਕੀਡਾਊਨ") ਨਾਲ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਘਟਨਾ ਸੁਣੀ ਜਾਂਦੀ ਹੈ ਅਤੇ, ਜਦੋਂ ਇਹ ਵਾਪਰਦਾ ਹੈ, ਮਨੋਨੀਤ ਫੰਕਸ਼ਨ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।
KeyboardEvent()	ਇੱਕ ਕੀਬੋਰਡ ਇਵੈਂਟ ਕੰਸਟਰਕਟਰ ਕੰਸਟਰਕਟਰ। ਇਹ ਟੈਸਟਿੰਗ ਲਈ ਮਦਦਗਾਰ ਹੈ ਕਿਉਂਕਿ ਇਹ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਕੀਬੋਰਡ ਇਵੈਂਟ (ਜਿਵੇਂ ਕੀ-ਡਾਊਨ) ਨੂੰ ਪ੍ਰੋਗ੍ਰਾਮਿਕ ਤੌਰ 'ਤੇ ਨਕਲ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।
event.key	ਜਦੋਂ ਇੱਕ ਕੁੰਜੀ ਦਬਾਈ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਈਵੈਂਟ ਆਬਜੈਕਟ ਤੋਂ ਕੁੰਜੀ ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ। ਇਹ ਉਸ ਖਾਸ ਕੁੰਜੀ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜੋ ਦਬਾਈ ਗਈ ਸੀ, ਜਿਵੇਂ ਕਿ "a," "Enter," ਜਾਂ "Shift"।
jest.fn()	ਇੱਕ ਜੈਸਟ ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਤਿਆਰ ਕੀਤਾ ਇੱਕ ਜਾਅਲੀ ਫੰਕਸ਼ਨ। ਪੂਰੇ ਤਰਕ ਨੂੰ ਵਿਕਸਤ ਕੀਤੇ ਬਿਨਾਂ ਫੰਕਸ਼ਨ ਕਾਲਾਂ ਦੀ ਨਕਲ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਦੇ ਵਿਵਹਾਰ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ, ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਵਿੱਚ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ।
dispatchEvent()	ਇਸ ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਿਸੇ ਤੱਤ 'ਤੇ ਇੱਕ ਇਵੈਂਟ ਨੂੰ ਦਸਤੀ ਤੌਰ 'ਤੇ ਚਾਲੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਸਦੀ ਵਰਤੋਂ "ਕੀਡਾਊਨ" ਇਵੈਂਟ ਨੂੰ ਭੇਜਣ ਲਈ ਸਾਰੀਆਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਜਿਸ ਨੂੰ ਇੱਕ ਇਵੈਂਟ ਸੁਣਨ ਵਾਲਾ ਰੋਕ ਸਕਦਾ ਹੈ ਅਤੇ ਜਾਂਚ ਲਈ ਵਰਤ ਸਕਦਾ ਹੈ।
expect()	Expect(), ਜੇਸਟ ਟੈਸਟਿੰਗ ਫਰੇਮਵਰਕ ਦਾ ਇੱਕ ਹਿੱਸਾ, ਦੀ ਵਰਤੋਂ ਇਹ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਇੱਕ ਮੁੱਲ ਜਾਂ ਫੰਕਸ਼ਨ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਹ ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ ਉਦਾਹਰਨ ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਉਚਿਤ ਇਵੈਂਟ ਨਾਲ ਬੁਲਾਇਆ ਗਿਆ ਹੈ।
try...catch	ਗਲਤੀਆਂ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਸਮਰਪਿਤ ਇੱਕ ਭਾਗ। ਕੈਚ ਬਲਾਕ ਉਸ ਸਥਿਤੀ ਵਿੱਚ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਕੋਸ਼ਿਸ਼ ਬਲਾਕ ਦੇ ਅੰਦਰ ਕੋਈ ਵੀ ਕੋਡ ਇੱਕ ਤਰੁੱਟੀ ਪੈਦਾ ਕਰਦਾ ਹੈ, ਸਕ੍ਰਿਪਟ ਨੂੰ ਟੁੱਟਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।
console.error()	ਇਸ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੰਸੋਲ ਉੱਤੇ ਗਲਤੀ ਸੁਨੇਹੇ ਪ੍ਰਿੰਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਇਹ ਕੈਚ ਬਲਾਕ ਦੇ ਅੰਦਰ ਗਲਤੀ ਦੇ ਵੇਰਵਿਆਂ ਨੂੰ ਲੌਗ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜੋ ਸਮੱਸਿਆ ਨਿਪਟਾਰਾ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ।

ਕਿਵੇਂ JavaScript ਆਟੋਮੈਟਿਕਲੀ ਇਵੈਂਟ ਸੁਣਨ ਵਾਲਿਆਂ ਵਿੱਚ ਈਵੈਂਟਾਂ ਨੂੰ ਪਛਾਣਦਾ ਹੈ

AddEventListener ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ JavaScript ਫੰਕਸ਼ਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ। ਇਸ ਵਿਧੀ ਦੀ ਮਦਦ ਨਾਲ, ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਇੱਕ ਖਾਸ ਇਵੈਂਟ ਕਿਸਮ ਨਾਲ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ-ਜਿਵੇਂ "ਕਲਿੱਕ" ਜਾਂ "ਕੀਡਾਊਨ।" ਜਦੋਂ ਤੁਸੀਂ ਵਰਤਦੇ ਹੋ ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਆਪਣੇ ਆਪ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਨੂੰ ਇੱਕ ਇਵੈਂਟ ਆਬਜੈਕਟ ਭੇਜਦਾ ਹੈ AddEventListener. ਸਾਰੇ ਇਵੈਂਟ ਵੇਰਵੇ, ਜਿਸ ਵਿੱਚ ਕੁੰਜੀ ਪੁਸ਼ ਕੀਤੀ ਗਈ ਅਤੇ ਕਲਿਕ ਕੀਤਾ ਗਿਆ ਤੱਤ ਸ਼ਾਮਲ ਹੈ, ਇਸ ਵਸਤੂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ। ਦਿਲਚਸਪ ਗੱਲ ਇਹ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਹਮੇਸ਼ਾ ਈਵੈਂਟ ਆਬਜੈਕਟ ਪ੍ਰਦਾਨ ਕਰੇਗਾ, ਫੰਕਸ਼ਨ ਵਿੱਚ ਪੈਰਾਮੀਟਰ ਦੇ ਨਾਮ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ—"event," "e," ਜਾਂ "evt."

ਪਹਿਲਾਂ, ਅਸੀਂ ਉਪਰੋਕਤ ਉਦਾਹਰਣਾਂ ਵਿੱਚ "ਕੀਡਾਊਨ" ਇਵੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਸਧਾਰਨ ਸੈੱਟਅੱਪ ਦੇਖਦੇ ਹਾਂ। ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਇਵੈਂਟ ਆਬਜੈਕਟ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਭੇਜਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਇੱਕ ਕੁੰਜੀ ਦਬਾਈ ਜਾਂਦੀ ਹੈ। ਉਸ ਤੋਂ ਬਾਅਦ, ਫੰਕਸ਼ਨ ਈਵੈਂਟ ਨੂੰ ਕੰਸੋਲ ਵਿੱਚ ਲੌਗ ਕਰਦਾ ਹੈ, ਕੁੰਜੀ ਹਿੱਟ ਅਤੇ ਵਾਧੂ ਇਵੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸਮੇਤ ਸਾਰੀ ਢੁਕਵੀਂ ਜਾਣਕਾਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਯਾਦ ਰੱਖਣ ਵਾਲੀ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਇਹ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਇਵੈਂਟ ਆਬਜੈਕਟ ਨੂੰ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਘੋਸ਼ਿਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ ਕਿਉਂਕਿ JavaScript ਪਹਿਲਾਂ ਹੀ ਪਛਾਣਦਾ ਹੈ ਕਿ ਇਹ ਤੁਹਾਡੇ ਦੁਆਰਾ ਸਪਲਾਈ ਕੀਤੀ ਗਈ ਕਿਸਮ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਇਵੈਂਟ ਨੂੰ ਸੰਭਾਲ ਰਿਹਾ ਹੈ AddEventListener.

ਅਸੀਂ ਪਰੰਪਰਾਗਤ ਫੰਕਸ਼ਨ ਸਮੀਕਰਨਾਂ ਲਈ ਐਰੋ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਬਦਲਣ ਬਾਰੇ ਵੀ ਦੇਖਿਆ। ਐਰੋ ਫੰਕਸ਼ਨਾਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਵਧੇਰੇ ਸੰਘਣੇ ਸੰਟੈਕਸ ਲਈ ਵਿਵਹਾਰ ਇੱਕੋ ਜਿਹਾ ਹੈ: ਬ੍ਰਾਊਜ਼ਰ ਹਮੇਸ਼ਾ ਫੰਕਸ਼ਨ ਨੂੰ ਈਵੈਂਟ ਆਬਜੈਕਟ ਦੇਵੇਗਾ, ਭਾਵੇਂ ਫੰਕਸ਼ਨ ਕਿਵੇਂ ਵੀ ਬਣਾਇਆ ਗਿਆ ਹੋਵੇ। ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਬਣਾਉਣ ਲਈ, ਅਸੀਂ ਇਸਨੂੰ "handleKeyDown" ਨਾਮਕ ਇੱਕ ਵੱਖਰੇ ਢੰਗ ਵਿੱਚ ਮਾਡਿਊਲਰਾਈਜ਼ ਕੀਤਾ ਹੈ। ਇਹ ਇੱਕੋ ਫੰਕਸ਼ਨ ਨੂੰ ਕਈ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਨਾਲ ਲਿੰਕ ਕਰਨ ਜਾਂ ਤੁਹਾਡੇ ਕੋਡ ਦੇ ਵੱਖ-ਵੱਖ ਭਾਗਾਂ ਵਿੱਚ ਮੁੜ-ਵਰਤਣ ਲਈ ਸਮਰੱਥ ਬਣਾ ਕੇ ਕੋਡ ਨੂੰ ਸਾਫ਼ ਅਤੇ ਆਸਾਨ ਬਣਾ ਦਿੰਦਾ ਹੈ।

ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕੋਸ਼ਿਸ਼ ਕਰੋ...ਫੜੋ, ਤਰੁਟੀ ਸੰਭਾਲਣ ਨੂੰ ਹੋਰ ਵੀ ਮਜ਼ਬੂਤੀ ਵਧਾਉਣ ਲਈ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਸੀ। ਰੀਅਲ-ਵਰਲਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ, ਇਹ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਘਟਨਾਵਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦੌਰਾਨ ਇੱਕ ਅਣਕਿਆਸੀ ਸਥਿਤੀ ਪੈਦਾ ਹੋਣ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਕਰੈਸ਼ਾਂ ਨੂੰ ਰੋਕਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਇਵੈਂਟ ਆਬਜੈਕਟ ਉਮੀਦ ਅਨੁਸਾਰ ਨਹੀਂ ਬਣਦਾ ਹੈ ਤਾਂ ਕੈਚ ਬਲਾਕ ਸਕ੍ਰਿਪਟ ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਵਿੱਚ ਦਖਲ ਦਿੱਤੇ ਬਿਨਾਂ ਇੱਕ ਗਲਤੀ ਨੂੰ ਲੌਗ ਕਰੇਗਾ। ਅੰਤ ਵਿੱਚ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਹੈਂਡਲਰ ਉਮੀਦ ਅਨੁਸਾਰ ਵਿਵਹਾਰ ਕਰਦਾ ਹੈ, ਅਸੀਂ ਇੱਕ ਯੂਨਿਟ ਟੈਸਟ ਵਿਕਸਿਤ ਕੀਤਾ ਹੈ ਜੋ ਜੈਸਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕੀਪ੍ਰੈਸ ਇਵੈਂਟਾਂ ਦੀ ਨਕਲ ਕਰਦਾ ਹੈ। ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ, ਟੈਸਟਿੰਗ ਜ਼ਰੂਰੀ ਹੈ ਕਿਉਂਕਿ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡੀਆਂ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਵਿੱਚ ਸਹੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ।

JavaScript ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਦੀ ਪੜਚੋਲ ਕਰਨਾ: ਇਵੈਂਟ ਪੈਰਾਮੀਟਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ

ਉਪਭੋਗਤਾ ਇੰਪੁੱਟ ਲਈ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਦੇ ਨਾਲ ਫਰੰਟ-ਐਂਡ JavaScript

// Approach 1: Basic event listener with "event" parameter
document.addEventListener("keydown", function(event) {
    // The browser automatically passes the event object to this function
    console.log(event);  // Outputs the event object
});
// Explanation: The event object is implicitly passed to the function by the browser.

JavaScript ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਲਈ ਐਰੋ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ES6 ਐਰੋ ਫੰਕਸ਼ਨਾਂ ਨਾਲ ਫਰੰਟ-ਐਂਡ JavaScript

// Approach 2: Using ES6 arrow functions
document.addEventListener("keydown", (e) => {
    // Arrow function also accepts the event object, regardless of its name
    console.log(e);  // Outputs the event object
});
// Explanation: The event object is still passed, even with the shorthand arrow function syntax.

ਮਾਡਿਊਲਰ JavaScript: ਰੀਯੂਸੇਬਿਲਟੀ ਵਾਲਾ ਇਵੈਂਟ ਹੈਂਡਲਰ

ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਇਵੈਂਟ ਹੈਂਡਲਰਾਂ ਲਈ ਮਾਡਿਊਲਰ JavaScript

// Approach 3: Modularizing the event handler for reuse
function handleKeyDown(event) {
    // Function to handle keydown event, reusable in other contexts
    console.log("Key pressed:", event.key);  // Logs the key that was pressed
}
// Attaching the handler to the keydown event
document.addEventListener("keydown", handleKeyDown);
// Explanation: Separate function increases modularity and reusability.

ਗਲਤੀ ਨਾਲ ਨਜਿੱਠਣ ਦੇ ਨਾਲ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਦੀ ਮਜ਼ਬੂਤੀ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣਾ

ਮਜਬੂਤੀ ਲਈ ਤਰੁੱਟੀ ਸੰਭਾਲਣ ਦੇ ਨਾਲ ਅਨੁਕੂਲਿਤ JavaScript

// Approach 4: Adding error handling for more robust event handling
function handleKeyDown(event) {
    try {
        // Attempt to process the key event
        console.log("Key pressed:", event.key);
    } catch (error) {
        // Handle any potential errors
        console.error("Error handling keydown event:", error);
    }
}
document.addEventListener("keydown", handleKeyDown);
// Explanation: Adding try-catch blocks improves code reliability.

ਯੂਨਿਟ ਟੈਸਟਾਂ ਦੇ ਨਾਲ ਟੈਸਟਿੰਗ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ

ਈਵੈਂਟ ਸਰੋਤਿਆਂ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ JavaScript ਯੂਨਿਟ ਟੈਸਟਾਂ ਵਿੱਚ ਜੈਸਟ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

// Approach 5: Unit testing the event handler using Jest
const handleKeyDown = jest.fn((event) => {
    return event.key;  // Return the key for testing
});
// Simulate a keydown event in the test environment
test("handleKeyDown function receives keydown event", () => {
    const event = new KeyboardEvent("keydown", { key: "a" });
    document.dispatchEvent(event);
    expect(handleKeyDown).toHaveBeenCalledWith(event);
});
// Explanation: Unit tests ensure the event handler behaves correctly.

JavaScript ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਵਿੱਚ ਇਵੈਂਟ ਪ੍ਰਸਾਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਘਟਨਾ ਦਾ ਪ੍ਰਚਾਰ JavaScript ਇਵੈਂਟ ਸਿਸਟਮ ਦਾ ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਹੈ। ਇੱਕ ਇਵੈਂਟ, ਜਿਵੇਂ ਕਿ "ਕੀਡਾਊਨ" ਜਾਂ "ਕਲਿੱਕ," ਸਿਰਫ਼ ਵਾਪਰਦਾ ਹੀ ਨਹੀਂ ਹੈ ਅਤੇ ਉੱਥੇ ਹੀ ਖਤਮ ਹੁੰਦਾ ਹੈ। ਇਹ ਕੰਮ ਕਰਨਾ ਜਾਰੀ ਰੱਖਦਾ ਹੈ. ਇਸ ਦੀ ਬਜਾਇ, ਇਹ ਇੱਕ ਘਟਨਾ ਪ੍ਰਵਾਹ ਵਿੱਚ ਭਾਗਾਂ ਦੇ ਪ੍ਰਬੰਧ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ। ਕੈਪਚਰਿੰਗ ਪੜਾਅ, ਟੀਚਾ ਪੜਾਅ, ਅਤੇ ਬਬਲਿੰਗ ਪੜਾਅ ਇਸ ਪ੍ਰਵਾਹ ਦੇ ਤਿੰਨ ਪੜਾਅ ਹਨ। ਜ਼ਿਆਦਾਤਰ ਘਟਨਾਵਾਂ ਬਬਲਿੰਗ ਪੜਾਅ ਵਿੱਚ ਮੂਲ ਰੂਪ ਵਿੱਚ ਹੁੰਦੀਆਂ ਹਨ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਉਹ ਟੀਚੇ ਦੇ ਤੱਤ ਤੋਂ ਇਸਦੇ ਪੂਰਵਜਾਂ ਤੱਕ ਇੱਕ ਲਹਿਰ ਪ੍ਰਭਾਵ ਵਾਂਗ ਫੈਲਦੇ ਹਨ।

ਵਰਗੀਆਂ ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ stopPropagation() ਅਤੇ stopImmediatePropagation(), JavaScript ਡਿਵੈਲਪਰ ਨਿਯੰਤ੍ਰਿਤ ਕਰ ਸਕਦੇ ਹਨ ਕਿ ਘਟਨਾਵਾਂ ਕਿਵੇਂ ਫੈਲਦੀਆਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ event.stopPropagation() ਕਿਸੇ ਇਵੈਂਟ ਨੂੰ ਬੁਲਬੁਲੇ ਹੋਣ ਤੋਂ ਰੋਕਣ ਲਈ ਜੇਕਰ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਕਿ ਇਹ DOM ਲੜੀ ਵਿੱਚ ਉੱਚਾ ਹੋਵੇ। ਜਦੋਂ ਇੱਕੋ ਘਟਨਾ ਲਈ ਇੱਕ ਤੋਂ ਵੱਧ ਤੱਤ ਸੁਣ ਰਹੇ ਹੁੰਦੇ ਹਨ, ਪਰ ਤੁਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਖਾਸ ਹੈਂਡਲਰ ਨੂੰ ਚਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਇਹ ਅਸਲ ਵਿੱਚ ਮਦਦਗਾਰ ਹੁੰਦਾ ਹੈ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਕ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕਾ ਜੋ ਇਵੈਂਟ ਪ੍ਰਸਾਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਉਹ ਹੈ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ. ਤੁਸੀਂ ਇੱਕ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਹਰ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਜੋੜਨ ਦੇ ਉਲਟ, ਇਸ ਵਿੱਚ ਇਵੈਂਟਸ ਨੂੰ "ਬਬਲ ਅਪ" ਕਰਨ ਦੇ ਸਕਦੇ ਹੋ। ਅਜਿਹੀਆਂ ਸਥਿਤੀਆਂ ਵਿੱਚ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪੇਸ਼ ਕੀਤੀਆਂ ਆਈਟਮਾਂ 'ਤੇ ਘਟਨਾਵਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਇਹ ਪਹੁੰਚ ਬਹੁਤ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ। ਇਹ ਕੋਡ ਪ੍ਰਸ਼ਾਸਨ ਨੂੰ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਮੈਮੋਰੀ ਦੀ ਵਰਤੋਂ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਬਹੁਤ ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ਕੰਪੋਨੈਂਟਾਂ ਵਾਲੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ।

JavaScript ਸਮਾਗਮਾਂ ਅਤੇ ਸਰੋਤਿਆਂ ਬਾਰੇ ਆਮ ਸਵਾਲ

JavaScript ਵਿੱਚ ਇਵੈਂਟ ਬਬਲਿੰਗ ਕੀ ਹੈ?
"ਇਵੈਂਟ ਬਬਲਿੰਗ" ਵਜੋਂ ਜਾਣੀ ਜਾਂਦੀ ਘਟਨਾ ਇਹ ਦੱਸਦੀ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਘਟਨਾ DOM ਲੜੀ ਦੇ ਸਭ ਤੋਂ ਅੰਦਰਲੇ ਤੱਤ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ਅਤੇ ਸਭ ਤੋਂ ਬਾਹਰਲੇ ਹਿੱਸਿਆਂ ਤੱਕ ਉੱਪਰ ਵੱਲ ਜਾਂਦੀ ਹੈ।
ਮੈਂ ਘਟਨਾ ਦੇ ਪ੍ਰਸਾਰ ਨੂੰ ਕਿਵੇਂ ਰੋਕ ਸਕਦਾ ਹਾਂ?
ਬਬਲਿੰਗ ਪੜਾਅ ਵਿੱਚ, ਤੁਸੀਂ ਵਰਤ ਕੇ ਇੱਕ ਘਟਨਾ ਨੂੰ ਅੱਗੇ ਫੈਲਣ ਤੋਂ ਰੋਕ ਸਕਦੇ ਹੋ event.stopPropagation() ਤਕਨੀਕ.
ਵਿਚਕਾਰ ਕੀ ਫਰਕ ਹੈ stopPropagation() ਅਤੇ stopImmediatePropagation()?
ਘਟਨਾ ਨੂੰ ਬੁਲਬੁਲਾ ਹੋਣ ਤੋਂ ਰੋਕਿਆ ਜਾਂਦਾ ਹੈ stopPropagation(), ਅਤੇ ਇਸ ਨੂੰ ਕਿਸੇ ਵੀ ਸਰੋਤਿਆਂ ਨਾਲ ਇਕੱਠੇ ਕੀਤੇ ਜਾਣ ਤੋਂ ਰੋਕਿਆ ਜਾਂਦਾ ਹੈ ਜੋ ਅਜੇ ਵੀ ਮੌਜੂਦ ਹਨ stopImmediatePropagation().
JavaScript ਵਿੱਚ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਕੀ ਹੈ?
ਹਰੇਕ ਵਿਅਕਤੀਗਤ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਦੀ ਬਜਾਏ ਇੱਕ ਈਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਇੱਕ ਮਾਪੇ ਤੱਤ ਨਾਲ ਜੋੜ ਕੇ, ਤੁਸੀਂ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਤਕਨੀਕ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਮਾਪਿਆਂ ਨੂੰ ਸੂਚਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਬੱਚਿਆਂ ਤੋਂ ਕੁਝ "ਬੁਲਬੁਲਾ" ਹੁੰਦਾ ਹੈ।
ਕੀ ਮੈਂ ਇੱਕੋ ਈਵੈਂਟ ਲਈ ਕਈ ਸਰੋਤਿਆਂ ਨੂੰ ਜੋੜ ਸਕਦਾ/ਦੀ ਹਾਂ?
ਦਰਅਸਲ, ਤੁਸੀਂ JavaScript ਵਿੱਚ ਇੱਕੋ ਈਵੈਂਟ ਕਿਸਮ ਲਈ ਇੱਕ ਤੱਤ ਨਾਲ ਇੱਕ ਤੋਂ ਵੱਧ ਇਵੈਂਟ ਸੁਣਨ ਵਾਲਿਆਂ ਨੂੰ ਕਨੈਕਟ ਕਰ ਸਕਦੇ ਹੋ। ਉਹਨਾਂ ਨੂੰ ਜੋੜੇ ਗਏ ਕ੍ਰਮ ਵਿੱਚ, ਹਰੇਕ ਸਰੋਤੇ ਨੂੰ ਬੁਲਾਇਆ ਜਾਵੇਗਾ।

JavaScript ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਬਾਰੇ ਅੰਤਿਮ ਵਿਚਾਰ

ਸਮਕਾਲੀ ਵੈੱਬ ਵਿਕਾਸ ਲਈ JavaScript ਦੀ ਆਟੋਮੈਟਿਕ ਈਵੈਂਟ ਪਛਾਣ ਵਿਸ਼ੇਸ਼ਤਾ ਜ਼ਰੂਰੀ ਹੈ। ਫੰਕਸ਼ਨ ਦੇ ਨਾਮ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ, ਭਾਸ਼ਾ ਹੈਂਡਲਿੰਗ ਬਣਾਉਂਦੀ ਹੈ ਕੀਡਾਊਨ ਅਤੇ ਇਵੈਂਟ ਆਬਜੈਕਟ ਨੂੰ ਆਟੋਮੈਟਿਕ ਹੀ ਦੇ ਕੇ ਇਵੈਂਟਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।

ਇਸ ਪ੍ਰਣਾਲੀ ਦੀ ਵਰਤੋਂ ਅਤੇ ਪ੍ਰਸਾਰ ਨਿਯੰਤਰਣ ਅਤੇ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ ਵਰਗੇ ਅਤਿ-ਆਧੁਨਿਕ ਤਰੀਕਿਆਂ ਨਾਲ, ਡਿਵੈਲਪਰ ਗੁੰਝਲਦਾਰ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਦਾ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰਬੰਧਨ ਕਰ ਸਕਦੇ ਹਨ। ਇਹਨਾਂ ਤਕਨੀਕਾਂ ਤੋਂ ਜਾਣੂ ਹੋ ਕੇ, ਤੁਸੀਂ ਅਜਿਹੀਆਂ ਵੈਬਸਾਈਟਾਂ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਉਪਭੋਗਤਾ ਇੰਪੁੱਟ ਲਈ ਵਧੇਰੇ ਗਤੀਸ਼ੀਲ, ਪਰਸਪਰ ਪ੍ਰਭਾਵਸ਼ੀਲ ਅਤੇ ਜਵਾਬਦੇਹ ਹਨ।

JavaScript ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਲਈ ਸਰੋਤ ਅਤੇ ਹਵਾਲੇ

JavaScript 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਦਸਤਾਵੇਜ਼ AddEventListener ਵਿਧੀ ਅਤੇ ਘਟਨਾ ਆਬਜੈਕਟ ਹੈਂਡਲਿੰਗ 'ਤੇ ਲੱਭੀ ਜਾ ਸਕਦੀ ਹੈ MDN ਵੈੱਬ ਡੌਕਸ - ਐਡ ਈਵੈਂਟ ਲਿਸਟੇਨਰ .
JavaScript ਇਵੈਂਟ ਪ੍ਰਸਾਰ ਅਤੇ ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਡੂੰਘਾਈ ਨਾਲ ਖੋਜ ਲਈ, ਵੇਖੋ JavaScript.info - ਬਬਲਿੰਗ ਅਤੇ ਕੈਪਚਰਿੰਗ .
ਜੇਸਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ JavaScript ਇਵੈਂਟ ਟੈਸਟਿੰਗ ਦੀਆਂ ਮੁੱਖ ਧਾਰਨਾਵਾਂ ਨੂੰ ਸਮਝਣਾ ਇੱਥੇ ਵਿਸਤ੍ਰਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਜੈਸਟ ਦਸਤਾਵੇਜ਼ .

ਇਹ ਸਮਝਣਾ ਕਿ ਕਿਵੇਂ JavaScript ਪਰਿਵਰਤਨਸ਼ੀਲ ਨਾਮਾਂ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ ਘਟਨਾਵਾਂ ਦੀ ਪਛਾਣ ਕਰਦੀ ਹੈ