ইভেন্ট.প্রিভেন্টডিফল্ট () বনাম মিথ্যা রিটার্ন (কোনও জিকুয়েরি নেই)

Question 1

আমি ভাবছিলাম event.preventDefault()এবং যদি return falseএকই ছিল।

আমি কিছু পরীক্ষা করেছি , এবং এটা মনে হয়

যদি ইভেন্ট হ্যান্ডলারটি পুরানো মডেল ব্যবহার করে যুক্ত করা হয়, উদাহরণস্বরূপ
```
elem.onclick = function(){
    return false;
};
```
তারপরে, return falseডিফল্ট ক্রিয়াকে বাধা দেয় event.preventDefault()।
যদি ইভেন্ট হ্যান্ডলারটি ব্যবহার করে যুক্ত করা হয় addEventListener, উদাহরণস্বরূপ
```
elem.addEventListener(
    'click',
    function(e){
        return false;
    },
    false
);
```
তারপরে, return falseডিফল্ট ক্রিয়াটি আটকাবে না।

সমস্ত ব্রাউজার কি এমন আচরণ করে?

তার মাঝে আরো পার্থক্য আছে event.preventDefault()এবং return false?

যেখানে আমি কিছু ক্ষেত্রে এর return falseমতো আচরণ সম্পর্কে কিছু ডকুমেন্টেশন (এমডিএন তে পারি না) পাই event.preventDefault()?

আমার প্রশ্ন শুধুমাত্র প্লেইন জাভাস্ক্রিপ্ট না jQuery এর, তাই সদৃশ হিসাবে চিহ্নিত করবেন না দয়া করে সম্পর্কে event.preventDefault () বনাম রিটার্ন মিথ্যা , এমনকি যদি উভয় প্রশ্নের প্রায় একই শিরোনাম আছে।

Question 2

W3C এর ডকুমেন্ট অবজেক্ট মডেল ঘটনাবলী নির্দিষ্টকরণ মধ্যে 1.3.1। ইভেন্ট রেজিস্ট্রেশন ইন্টারফেস বলে যে handleEventইভেন্টলাইস্টারে কোনও রিটার্নের মান নেই:

handleEvent এই ইভেন্টটি যখনই ইভেন্টটি তালিকার ইন্টারফেসের জন্য নিবন্ধিত হয়েছিল তখনই কোনও ঘটনা ঘটে। [...] কোনও ফেরতের মূল্য নেই

১.২.৪ এর অধীনে । ইভেন্ট বাতিলকরণ নথিতেও বলা আছে

ইভেন্টের প্রতিরোধ ডিফল্ট পদ্ধতিতে কল করে ক্যানসেশন সম্পন্ন হয়। ইভেন্ট প্রবাহের যে কোনও পর্যায়ে যদি এক বা একাধিক ইভেন্টলাইস্টেনরা প্রতিরোধ ডিফল্টকে কল করে তবে ডিফল্ট ক্রিয়া বাতিল হয়ে যাবে।

যা সত্য / মিথ্যা প্রত্যাবর্তনের যে কোনও ব্রাউজারে এবং ব্যবহারে যে কোনও প্রভাব থাকতে পারে তা ব্যবহার থেকে নিরুৎসাহিত করা উচিত event.preventDefault()।

হালনাগাদ

এইচটিএমএল 5 স্পেসটি কীভাবে কোনও রিটার্ন মানকে অন্যরকম আচরণ করবে তা নির্দিষ্ট করে। এইচটিএমএল স্পেসের 7.1.5.1 বিভাগে বলা আছে

যদি রিটার্ন মান কোনও ওয়েবআইডিএল বুলিয়ান মিথ্যা মান হয় তবে ইভেন্টটি বাতিল করুন।

"মাউসওভার" ইভেন্ট ব্যতীত সমস্ত কিছুর জন্য।

উপসংহার

আমি এখনও event.preventDefault()বেশিরভাগ প্রকল্পগুলিতে ব্যবহার করার পরামর্শ দেব কারণ আপনি পুরানো স্পেক এবং এভাবে পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্য থাকবেন। আপনার যদি কেবল প্রান্ত ব্রাউজারগুলিই সমর্থন করার প্রয়োজন হয় তবে বাতিল করে মিথ্যা ফিরিয়ে দেওয়া ঠিক।

Question 3

এখানে কয়েকটি উদাহরণ রয়েছে যা লোকেদের সমস্যাগুলি আরও ভালভাবে বুঝতে এবং সমস্যা সমাধানে সহায়তা করতে পারে।

টিএল; ডিআর

on*ইভেন্ট হ্যান্ডলারগুলি (উদাহরণস্বরূপ onclickএকটি বোতামের উপাদানের উপরে বৈশিষ্ট্য): ইভেন্ট বাতিল করতে মিথ্যা প্রত্যাবর্তন করুন
addEventListenerএকটি পৃথক এপিআই, রিটার্ন মানগুলি (যেমন false) উপেক্ষা করা হয়: ব্যবহার করুন event.preventDefault()।
onclick="<somejs>"<somejs>একটি অনক্লিক ফাংশন শরীরে আবৃত কারণ এটির নিজস্ব সম্ভাব্য বিভ্রান্তি রয়েছে ।
getEventListenersআপনার ইভেন্ট হ্যান্ডলার যদি প্রত্যাশা অনুযায়ী আচরণ না করে তবে আপনার ইভেন্ট শ্রোতার সমস্যা সমাধানের জন্য দেখতে কেমন তা দেখার জন্য ব্রাউজার ডিভটোলগুলি এপিআই ব্যবহার করুন ।

উদাহরণ

এই উদাহরণটি clickকোনও <a>লিঙ্কযুক্ত ইভেন্টের সাথে সুনির্দিষ্ট ... তবে বেশিরভাগ ইভেন্টের ধরণের জন্যই সাধারণীকরণ করা যায়।

ক্লাসের সাথে আমাদের একটি অ্যাঙ্কর (লিঙ্ক) রয়েছে js-some-link-hookযা আমরা একটি মডেল খুলতে চাই এবং যে কোনও পৃষ্ঠা নেভিগেশন ঘটতে রোধ করতে চাই।

নীচের উদাহরণগুলি ম্যাকওস মোজাভেতে গুগল ক্রোমে (71) চালিত হয়েছিল।

একটি বড় সমস্যা হ'ল ধরে নেওয়া onclick=functionNameহচ্ছে এটি ব্যবহারের মতোই আচরণaddEventListener

ধরা যাক যে আমাদের কাছে একটি অ্যাঙ্কর ট্যাগ (লিঙ্ক) রয়েছে যা জাভাস্ক্রিপ্ট সক্ষম করার সময় আমরা জাভাস্ক্রিপ্ট সহ পরিচালনা করতে চাই। আমরা চাই না যে ক্লিক করার সময় ব্রাউজারটি লিঙ্কটি অনুসরণ করবে ("ডিফল্ট প্রতিরোধ" আচরণ)।

<a href="https://www.example.com/url/to/go/to/when/no/javascript"
   class="js-some-link-hook">click me!</a>

অনক্লিক বৈশিষ্ট্য

function eventHandler (event) {
    // want to prevent link navigation
    alert('eventHandler ran');
    return false;
}

function addEventListenerToElement () {
    var link = document.querySelector('.js-some-link-hook');
    link.setAttribute('onclick', eventHandler);
}
addEventListenerToElement();

তারপরে ব্রাউজারে ডিভটোল কনসোল চালান:

var el = document.querySelector('a.js-some-link-hook'),
        listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output

... এবং আপনি দেখুন:

function onclick(event) {
function eventHandler (event) {alert('eventHandler ran'); return false;}
}

এটি মোটেই কাজ করে না। onclick=আপনার হ্যান্ডলারের ফাংশনটি ব্যবহার করার সময় অন্য ফাংশনে আবৃত থাকে।

আপনি দেখতে পাচ্ছেন যে আমার ফাংশন সংজ্ঞাটি অন্তর্ভুক্ত রয়েছে তবে কল করা হয়নি কারণ আমি ফাংশনটির রেফারেন্সটি এটি না চাওয়া ছাড়াই নির্দিষ্ট করেছি। উদাহরণস্বরূপ, যখন উপাদানটি ক্লিক করা হয় তখন আমাদের চালানো নিশ্চিত হয় onclick="functionName()"না needonclick="functionName"functionName

আরও আপনি দেখতে পাচ্ছেন যে এমনকি আমার ফাংশনটি কল করা হয়েছিল এবং আমার ফাংশনটি মিথ্যা ফিরে এলেও ... onclickফাংশনটি সেই মিথ্যা মানটি ফিরিয়ে দেবে না ... যা ইভেন্টটি 'বাতিল' করা প্রয়োজন।

এটি ঠিক করার জন্য, আমরা এমনটি সেট onclickকরতে পারি return myHandlerFunc();যা নিশ্চিত করে যে এর থেকে onclickফেরতের মান (মিথ্যা) প্রদান করে myHandlerFunc।

আপনি এর return false;থেকে মুছে ফেলতে myHandlerFuncএবং এটিতে পরিবর্তনও onclickকরতে পারেন myHandlerFunc(); return false;তবে আপনি সম্ভবত হ্যান্ডলার ফাংশনে লজিকটি একসাথে রাখতে চাইলে এটি বোধগম্য হয় না।

onclickজাভাস্ক্রিপ্টের সাথে সেট করার সময় নোট করুন , যখন আপনি জাভাস্ক্রিপ্টেরonclick পরিবর্তে সরাসরি এইচটিএমএল-এ স্থাপন করছেন (আমার উদাহরণগুলির মতো), onclickবৈশিষ্ট্যটির মানটি টাইপ স্ট্রিং এবং সমস্ত কিছুই কাজ করে। আপনি যদি onclickজাভাস্ক্রিপ্ট ব্যবহার করে সেট করে থাকেন তবে আপনার টাইপের দিকে মনোযোগ দিতে হবে। আপনি যদি বলেন element.setAttribute('onclick', myHandlerFunc()) myHandlerFuncএখনই চালানো হবে এবং ফলাফলটি প্রতিটি ক্লিকে চালানোর চেয়ে ... বৈশিষ্ট্যে সংরক্ষণ করা হবে। পরিবর্তে আপনার নিশ্চিত হওয়া উচিত যে বৈশিষ্ট্যটির মানটি একটি স্ট্রিং হিসাবে সেট করা আছে। element.setAttribute('onclick', 'return myHandlerFunc();')

এখন আমরা দেখতে পাচ্ছি যে এটি কীভাবে কাজ করছে, আমরা যা চাই তা করতে কোডটি সংশোধন করতে পারি। উদাহরণের জন্য অদ্ভুত উদাহরণ (এই কোডটি ব্যবহার করবেন না):

function eventHandler (e) {
    // want to prevent link navigation
    alert('eventHandler ran');
    console.log(e);
    return false;
}

function addEventListenerToElement () {
    var link = document.querySelector('.js-some-link-hook');
    link.setAttribute('onclick', 'return ('+eventHandler+')(event);');
}
addEventListenerToElement();

আপনি দেখতে পান যে আমরা আমাদের ইভেন্টহ্যান্ডলার ফাংশন সংজ্ঞাটিকে স্ট্রিংয়ে আবদ্ধ করেছি। বিশেষত: সামনে একটি রিটার্ন বিবৃতি সহ একটি স্ব-কার্যকরকারী ফাংশন।

আবার ক্রোম ডেভটোল কনসোলে:

var el = document.querySelector('a.js-some-link-hook'),
        listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output

... শো:

function onclick(event) {
return (function eventHandler (e) {
        // want to prevent link navigation
        alert('eventHandler ran');
        console.log(e);
        return false;
    })(event);
}

... হ্যাঁ, এটি কাজ করা উচিত। নিশ্চিতভাবেই যদি আমরা লিঙ্কটিতে ক্লিক করি আমরা সতর্কতা পেয়েছি এবং সতর্কতাটি খারিজ করে পৃষ্ঠাটি কোথাও নেভিগেটে বা রিফ্রেশ না করে।

সম্পর্কে আরও একটি নোট onclick... আপনি যদি eventইভেন্টের সময় প্যারামিটারটি গ্রহণ ও ব্যবহার করতে চান তবে আপনার অবশ্যই লক্ষ্য করা উচিত যে এটির নাম "ইভেন্ট" রাখা হয়েছে। নামটি ব্যবহার করে আপনি নিজের হ্যান্ডলারের মধ্যে এটি অ্যাক্সেস করতে পারেন event(প্যারেন্ট onclickফাংশন স্কোপের মাধ্যমে উপলব্ধ )। অথবা আপনি eventপরামিতি হিসাবে গ্রহণের জন্য আপনার হ্যান্ডলারটি তৈরি করতে পারেন (পরীক্ষার জন্য আরও ভাল) ... উদাহরণস্বরূপ onclick="return myEventHandler(event);"বা আপনি আগের উদাহরণটিতে দেখুন।

addEventListener

function eventHandler (ev) {
    // want to prevent link navigation
    alert('eventHandler ran');
    console.log(ev);
    return false;
}

function addEventListenerToElement () {
    var link = document.querySelector('.js-some-link-hook');
    link.addEventListener('click', eventHandler, false);
}
addEventListenerToElement();

ব্রাউজার ডেভলগুলি:

var el = document.querySelector('a.js-some-link-hook'),
        listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output

ফলাফল:

function eventHandler (ev) {
    // want to prevent link navigation
    alert('eventHandler ran');
    console.log(ev);
    return false;
}

সুতরাং আপনি ইতিমধ্যে পার্থক্য দেখতে পারেন। addEventListenerআমরা একটি onclickফাংশন আবৃত না সঙ্গে । আমাদের হ্যান্ডলার eventসরাসরি প্যারামিটারটি গ্রহণ করে (এবং তাই আমরা এটি যা চাই তা কল করতে পারি)। এছাড়াও আমাদের return falseএখানে "শীর্ষ স্তরের" রয়েছে এবং এর মতো অতিরিক্ত রিটার্নের বিবৃতি যোগ করার বিষয়ে আমাদের চিন্তা করতে হবে না onclick।

সুতরাং দেখে মনে হচ্ছে এটি কাজ করা উচিত। লিঙ্কটি ক্লিক করা আমরা সতর্কতা পেতে। সতর্কতা বাতিল করুন এবং পৃষ্ঠা নেভিগেট / রিফ্রেশ করুন। অর্থাত্ মিথ্যা ফিরিয়ে দিয়ে ইভেন্টটি বাতিল করা হয়নি।

যদি আমরা অনুমানটি অনুসন্ধান করি (নীচে থাকা সংস্থানগুলি দেখুন), আমরা দেখতে পাচ্ছি যে অ্যাডএভেন্টলাইস্টেনারের জন্য আমাদের কলব্যাক / হ্যান্ডলার ফাংশন কোনও রিটার্নের ধরণকে সমর্থন করে না। আমরা যা চাই তা ফিরিয়ে দিতে পারি, তবে এটি ব্রাউজারের API / ইন্টারফেসের অংশ না হওয়ায় এর কোনও প্রভাব নেই।

সমাধান: এর event.preventDefault()পরিবর্তে ব্যবহার করা হচ্ছে return false;...

function eventHandler (ev) {
    // want to prevent link navigation
    ev.preventDefault();
    alert('eventHandler ran');
}

function addEventListenerToElement () {
    var link = document.querySelector('.js-some-link-hook');
    link.addEventListener('click', eventHandler, false);
}
addEventListenerToElement();

ব্রাউজার ডেভলগুলি ...

var el = document.querySelector('a.js-some-link-hook'),
        listener = getEventListeners(el).click[0].listener;
console.log(''+listener); // to avoid truncation of output

দেয় ...

function eventHandler (ev) {
    // want to prevent link navigation
    ev.preventDefault();
    alert('eventHandler ran');
}

...প্রত্যাশিত.

আবার পরীক্ষা:

লিঙ্ক ক্লিক করুন।
সতর্কতা পান
সতর্কতা বাতিল করুন।
কোনও পৃষ্ঠা নেভিগেশন বা রিফ্রেশ ঘটে না ... যা আমরা চাই।

মিথ্যা প্রত্যাবর্তন হিসাবে addEventListenerব্যবহার করে তাই event.preventDefault()কিছুই করে না।

রিসোর্স

https://www.w3.org/TR/dom41/#dom-eventtarget-addeventlistener
- ইভেন্ট নিবন্ধকরণ (উদাঃ অ্যাডভেন্টলিস্টনার)
https://www.w3.org/TR/dom41/#callbackdef-eventlistener
- কলব্যাক / হ্যান্ডলার / শ্রোতা Def।
- নোট ফেরতের প্রকারটি অকার্যকর। অর্থাত্ রিটার্ন মান ইন্টারফেসের অংশ নয় এবং এর কোনও প্রভাব নেই।
https://www.w3.org/TR/dom41/# আগস্ট
- ইভেন্ট অবজেক্ট (যেমন ইভেন্ট.প্রিভেন্টডিফল্ট)

এইচটিএমএল 5 স্পেস ( https://www.w3.org/TR/html5/webappapis.html#events ) বিষয়গুলিকে বিভ্রান্ত করে কারণ তারা উভয়ই onclickএবং addEventListenerতাদের উদাহরণগুলিতে ব্যবহার করে এবং তারা নিম্নলিখিতটি বলে:

ইভেন্ট হ্যান্ডলার এইচ এবং ইভেন্ট অবজেক্ট ইয়ের জন্য ইভেন্ট হ্যান্ডলার প্রসেসিং অ্যালগরিদমটি নীচে রয়েছে:

...

প্রক্রিয়া ফেরতের মান নিম্নরূপ:

...

যদি রিটার্ন মান কোনও ওয়েব আইডিএল বুলেটিয়ান মিথ্যা মান হয়, তবে ইভেন্টটি বাতিল করুন।

সুতরাং এটি পরোক্ষভাবে মনে হচ্ছে যে return falseউভয় জন্য ইভেন্ট বাতিল addEventListenerএবং onclick।

তবে, আপনি যদি তাদের সংযুক্ত সংজ্ঞাটি event-handlerদেখেন তবে:

ইভেন্টের হ্যান্ডলারের একটি নাম থাকে যা সর্বদা "চালু" দিয়ে শুরু হয় এবং ইভেন্টটির নামটি অনুসরণ করে যার জন্য এটি উদ্দেশ্য হয়।

...

ইভেন্ট হ্যান্ডলারগুলি দুটি উপায়ে একটির মধ্যে প্রকাশিত হয়।

প্রথম ইভেন্ট, সমস্ত ইভেন্ট হ্যান্ডলারের কাছে সাধারণ, ইভেন্ট হ্যান্ডলার আইডিএল বৈশিষ্ট্য।

দ্বিতীয় উপায়টি ইভেন্ট হ্যান্ডলার সামগ্রী বৈশিষ্ট্য হিসাবে। এইচটিএমএল উপাদানগুলিতে ইভেন্ট হ্যান্ডলারগুলি এবং উইন্ডো অবজেক্টগুলিতে ইভেন্ট হ্যান্ডলারগুলির কিছু এইভাবে প্রকাশিত হয়।

https://www.w3.org/TR/html5/webappapis.html#event-handler

সুতরাং দেখে মনে হচ্ছে return falseইভেন্টটি বাতিল করা কেবলমাত্র onclick(বা সাধারণত on*) ইভেন্ট হ্যান্ডলারের ক্ষেত্রে প্রযোজ্য এবং ইভেন্ট হ্যান্ডলারের ক্ষেত্রে নয় যাঁর মাধ্যমে addEventListenerআলাদা আলাদা এপিআই রয়েছে।

যেহেতু addEventListenerAPI টি এইচটিএমএল 5 স্পেসের আওতাভুক্ত নয় (কেবল on*ইভেন্ট হ্যান্ডলারগুলি) ... তারা যদি on*উদাহরণগুলিতে স্টাইল ইভেন্ট হ্যান্ডলারের সাথে আটকে থাকে তবে এটি কম বিভ্রান্ত হবে ।

Question 4

ডিফল্ট, স্টপপ্রোগেশন, মিথ্যা ফেরতের মধ্যে পার্থক্য

সারণী পার্থক্য প্রদর্শন করছে

ডিফল্ট অ্যাকশন - ইভেন্ট ইভেন্ট বাড়াতে সার্ভার সাইড অ্যাকশন।

ধরুন আমাদের ডিভ কন্ট্রোল রয়েছে এবং এর ভিতরে আমাদের একটি বোতাম রয়েছে। সুতরাং ডিভ বোতামের পিতা-মাতার নিয়ন্ত্রণ। আমাদের ক্লায়েন্টের সাইড ক্লিক এবং সার্ভারের সাইড ক্লিক বোতামটির ইভেন্ট রয়েছে। এছাড়াও আমাদের ডিভাইসের ক্লায়েন্ট সাইড ক্লিক ইভেন্ট রয়েছে।

ক্লায়েন্ট পক্ষের বোতামটির ক্লিক ইভেন্টে, আমরা নীচের তিনটি উপায় ব্যবহার করে প্যারেন্ট নিয়ন্ত্রণ এবং সার্ভার সাইড কোডের ক্রিয়াগুলি নিয়ন্ত্রণ করতে পারি:

return false- এটি নিয়ন্ত্রণের কেবল ক্লায়েন্টের ইভেন্টের অনুমতি দেয়। সার্ভার সাইড ইভেন্ট এবং পিতামাতার নিয়ন্ত্রণের ক্লায়েন্টের সাইড ইভেন্টটি বরখাস্ত করা হয়নি।
preventDefault()- এটি ক্লায়েন্টের পক্ষের ইভেন্টের নিয়ন্ত্রণ এবং এর প্যারেন্ট নিয়ন্ত্রণের অনুমতি দেয়। সার্ভার পার্শ্ব ইভেন্ট। নিয়ন্ত্রণের ডিফল্ট ক্রিয়া বরখাস্ত করা হয় না।
stopPropogation()- এটি ক্লায়েন্ট পক্ষের পাশাপাশি নিয়ন্ত্রণের সার্ভার সাইড ইভেন্টের অনুমতি দেয়। নিয়ন্ত্রণের ক্লায়েন্ট সাইড ইভেন্টটি অনুমোদিত নয়।

Question 5

return falseকেবলমাত্র আই এর জন্য, event.preventDefault()ক্রোম, এফএফ ... আধুনিক ব্রাউজারগুলি দ্বারা সমর্থিত