JavaScript ਵਿੱਚ event.preventDefault() ਅਤੇ ਰਿਟਰਨ ਗਲਤ ਦੀ ਤੁਲਨਾ ਕਰਨਾ

JavaScript ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਨੂੰ ਸਮਝਣਾ

JavaScript ਵਿੱਚ ਇਵੈਂਟਾਂ ਨੂੰ ਸੰਭਾਲਦੇ ਸਮੇਂ, ਖਾਸ ਤੌਰ 'ਤੇ jQuery ਦੇ ਨਾਲ, ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਅਕਸਰ ਕਿਸੇ ਤੱਤ ਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਣ ਜਾਂ ਹੋਰ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਚਲਾਉਣ ਤੋਂ ਰੋਕਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਦੋ ਆਮ ਤਕਨੀਕਾਂ ਵਰਤ ਰਹੀਆਂ ਹਨ event.preventDefault() ਅਤੇ ਰਿਟਰਨ ਗਲਤ। ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਅਤੇ ਗਲਤੀ-ਰਹਿਤ ਕੋਡ ਲਿਖਣ ਲਈ ਇਹਨਾਂ ਤਰੀਕਿਆਂ ਵਿਚਕਾਰ ਅੰਤਰ ਨੂੰ ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ।

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

ਹੁਕਮ	ਵਰਣਨ
e.preventDefault()	ਕਿਸੇ ਤੱਤ ਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਹੋਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।
return false	ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਘਟਨਾ ਦੇ ਪ੍ਰਸਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ।
$(element).click(function(e){...})	ਇਵੈਂਟ ਪੈਰਾਮੀਟਰ ਦੇ ਨਾਲ ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ ਨਾਲ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਜੋੜਦਾ ਹੈ।
$(element).submit(function(e){...})	ਇਵੈਂਟ ਪੈਰਾਮੀਟਰ ਦੇ ਨਾਲ ਇੱਕ ਸਬਮਿਟ ਈਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਚੁਣੇ ਗਏ ਫਾਰਮ ਤੱਤਾਂ ਨਾਲ ਜੋੜਦਾ ਹੈ।
alert('message')	ਨਿਰਧਾਰਤ ਸੁਨੇਹੇ ਦੇ ਨਾਲ ਇੱਕ ਚੇਤਾਵਨੀ ਡਾਇਲਾਗ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ।
$('#selector')	ਉਹਨਾਂ ਦੀ ID ਦੁਆਰਾ ਐਲੀਮੈਂਟਸ ਨੂੰ ਚੁਣਨ ਲਈ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

JavaScript ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਦੀ ਵਿਆਖਿਆ ਕੀਤੀ ਗਈ

ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਕਿ JavaScript ਵਿੱਚ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਇਵੈਂਟਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ: ਅਤੇ . ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਨੂੰ ਐਂਕਰ ਟੈਗ ਨਾਲ ਜੋੜਦੀ ਹੈ (). ਜਦੋਂ ਐਂਕਰ ਟੈਗ ਨੂੰ ਕਲਿਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ event.preventDefault() ਵਿਧੀ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਇੱਕ ਨਵੇਂ ਪੰਨੇ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰਨਾ। ਇਹ ਪਹੁੰਚ ਲਾਭਦਾਇਕ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਦੀ ਬਜਾਏ ਕਸਟਮ ਕੋਡ ਨੂੰ ਚਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ, ਪੰਨੇ ਨੂੰ ਤਾਜ਼ਾ ਕੀਤੇ ਬਿਨਾਂ AJAX ਦੁਆਰਾ ਫਾਰਮ ਸਬਮਿਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣਾ।

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

$('a').click(function(e) {
    // Custom handling here
    e.preventDefault();
    // Additional code if needed
});
// Example of a form submission prevention
$('#myForm').submit(function(e) {
    e.preventDefault();
    // Handle form submission via AJAX or other methods
});
// Example of preventing a button's default action
$('#myButton').click(function(e) {
    e.preventDefault();
    alert('Button clicked, but default action prevented');
});

$('a').click(function() {
    // Custom handling here
    return false;
    // Additional code will not be executed
});
// Example of a form submission prevention
$('#myForm').submit(function() {
    // Handle form submission via AJAX or other methods
    return false;
});
// Example of preventing a button's default action
$('#myButton').click(function() {
    alert('Button clicked, but default action prevented');
    return false;
});

ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਤਰੀਕਿਆਂ ਵਿੱਚ ਡੂੰਘਾਈ ਨਾਲ ਗੋਤਾਖੋਰੀ ਕਰਨਾ

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

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

1. ਕੀ ਇਹ ਕਰਦੇ ਹਾਂ?
2. ਇਹ ਇਵੈਂਟ ਨਾਲ ਸੰਬੰਧਿਤ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਇੱਕ ਲਿੰਕ ਦਾ ਅਨੁਸਰਣ ਕਰਨਾ ਜਾਂ ਇੱਕ ਫਾਰਮ ਜਮ੍ਹਾਂ ਕਰਨਾ।
3. ਕਿਵੇਂ ਕਰਦਾ ਹੈ ਤੋਂ ਵੱਖਰਾ ਹੈ ?
4. ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਘਟਨਾ ਦੇ ਪ੍ਰਸਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ, ਜਦਕਿ ਸਿਰਫ ਡਿਫਾਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ।
5. ਸਕਦਾ ਹੈ ਘਟਨਾ ਦੇ ਪ੍ਰਸਾਰ ਨੂੰ ਰੋਕਣਾ ਹੈ?
6. ਨਹੀਂ, ਇਹ ਸਿਰਫ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ; ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ ਪ੍ਰਸਾਰ ਨੂੰ ਰੋਕਣ ਲਈ.
7. ਮੈਨੂੰ ਕਦੋਂ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ ?
8. ਇਸਦੀ ਵਰਤੋਂ ਉਦੋਂ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕਣ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ ਪਰ ਦੂਜੇ ਇਵੈਂਟ ਹੈਂਡਲਰ ਨੂੰ ਚੱਲਣ ਦਿਓ।
9. ਹੈ ਇੱਕ jQuery-ਵਿਸ਼ੇਸ਼ ਵਿਧੀ?
10. ਜਦੋਂ ਕਿ ਆਮ ਤੌਰ 'ਤੇ jQuery ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਇਹ ਪ੍ਰਸਾਰ ਨੂੰ ਰੋਕਣ ਅਤੇ ਡਿਫੌਲਟ ਕਾਰਵਾਈਆਂ ਨੂੰ ਰੋਕਣ ਲਈ ਸਧਾਰਨ JavaScript ਵਿੱਚ ਵੀ ਕੰਮ ਕਰਦਾ ਹੈ।
11. ਕਰਦਾ ਹੈ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਪ੍ਰਭਾਵਿਤ?
12. ਇਹ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਵਰਤਣ ਦੇ ਮੁਕਾਬਲੇ ਗੁੰਝਲਦਾਰ ਘਟਨਾ ਦ੍ਰਿਸ਼ਾਂ ਵਿੱਚ ਥੋੜ੍ਹਾ ਘੱਟ ਕੁਸ਼ਲ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ .
13. ਕੀ ਹੁੰਦਾ ਹੈ ਜੇਕਰ ਮੈਂ ਦੋਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ ਅਤੇ ?
14. ਦੋਵਾਂ ਦੀ ਵਰਤੋਂ ਬੇਲੋੜੀ ਹੈ; ਤੁਹਾਨੂੰ ਪ੍ਰਸਾਰ ਨੂੰ ਰੋਕਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਜਾਂ ਨਹੀਂ ਇਸ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਚੁਣੋ।
15. ਸਕਦਾ ਹੈ ਕਿਸੇ ਵੀ ਘਟਨਾ ਹੈਂਡਲਰ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ?
16. ਹਾਂ, ਇਸਨੂੰ ਡਿਫੌਲਟ ਕਾਰਵਾਈਆਂ ਨੂੰ ਰੋਕਣ ਅਤੇ ਘਟਨਾ ਦੇ ਪ੍ਰਸਾਰ ਨੂੰ ਰੋਕਣ ਲਈ ਕਿਸੇ ਵੀ ਇਵੈਂਟ ਹੈਂਡਲਰ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
17. ਦਾ ਕੋਈ ਆਧੁਨਿਕ ਬਦਲ ਹੈ ?
18. ਆਧੁਨਿਕ JavaScript ਅਕਸਰ ਵਰਤਣਾ ਪਸੰਦ ਕਰਦਾ ਹੈ ਅਤੇ ਸਪਸ਼ਟਤਾ ਅਤੇ ਨਿਯੰਤਰਣ ਲਈ.

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