এক শ্রোতার কাছে একাধিক ইভেন্টের বাঁধাই (জ্যাকুয়ারি ছাড়াই)?

Question

ব্রাউজার ইভেন্টগুলির সাথে কাজ করার সময়, আমি মোবাইল ডিভাইসগুলির জন্য সাফারির টাচ এজেন্টগুলি অন্তর্ভুক্ত করা শুরু করেছি। আমি দেখতে পাচ্ছি যে addEventListenerশর্তসাপেক্ষে স্ট্যাক আপ রয়েছে। এই প্রকল্পটি JQuery ব্যবহার করতে পারে না।

একটি আদর্শ ইভেন্ট শ্রোতা:

/* option 1 */
window.addEventListener('mousemove', this.mouseMoveHandler, false);
window.addEventListener('touchmove', this.mouseMoveHandler, false);

/* option 2, only enables the required event */
var isTouchEnabled = window.Touch || false;
window.addEventListener(isTouchEnabled ? 'touchmove' : 'mousemove', this.mouseMoveHandler, false);

JQuery এর bindএকাধিক ইভেন্টের মঞ্জুরি দেয়:

$(window).bind('mousemove touchmove', function(e) {
    //do something;
});

JQuery উদাহরণ হিসাবে দুটি ইভেন্ট শ্রোতার একত্রিত করার কোন উপায় আছে? উদা:

window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);

কোন পরামর্শ বা টিপস প্রশংসা করা হয়!

Comments

@ রবজি সম্ভবত কারণ প্রশ্নটি জিজ্ঞাসা করছে যে কীভাবে jQuery এর কিছু কার্যকারিতা প্রতিলিপি করা যায়। আমি নিশ্চিত নই যে এটি কোনও ট্যাগের জন্য উপযুক্ত ব্যবহার কিনা।

— মাইকেল মার্টিন-স্মাকার 21

যথেষ্ট ভাল, কেবল আমার কাছে মনে হয়েছিল যে প্রশ্নের এটির প্রয়োজন নেই। মুছে ফেলা হলেও কিছুটা অস্বচ্ছল দেখাচ্ছে look

— রবজি

Answer 1

পিওজেএস-এ আপনি একবারে একটি শ্রোতা যুক্ত করেন। একই উপাদানটিতে দুটি ভিন্ন ইভেন্টের জন্য একই শ্রোতা যুক্ত করা সাধারণ নয়। কাজটি করার জন্য আপনি নিজের ছোট ফাংশনটি লিখতে পারেন, যেমন:

/* Add one or more listeners to an element
** @param {DOMElement} element - DOM element to add listeners to
** @param {string} eventNames - space separated list of event names, e.g. 'click change'
** @param {Function} listener - function to attach for each event as a listener
*/
function addListenerMulti(element, eventNames, listener) {
  var events = eventNames.split(' ');
  for (var i=0, iLen=events.length; i<iLen; i++) {
    element.addEventListener(events[i], listener, false);
  }
}

addListenerMulti(window, 'mousemove touchmove', function(){…});

আশা করি এটি ধারণাটি দেখায়।

2016-02-25 সম্পাদনা করুন

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

function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}

অনুরূপ কৌশল একই শ্রোতাকে একাধিক উপাদানগুলিতে যুক্ত করতে পারে তবে তা করার প্রয়োজন ইভেন্ট প্রতিনিধি দলের জন্য সূচক হতে পারে।

Comments

"It is not common to add the same listener for two different events on the same element."কখনও কখনও (সবুজ রঙের) বাক্যগুলির জন্য এই শব্দটি শুনতে হবে যে তারা এটি ঠিকঠাক করছে করছে:

— ইভান ডার্সট

আপনার মানে "এটি ইউএনকমন নয়"?

— ডালগার্ড

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

— রবজি

@ রবজি: আমি যে এপিআইয়ের সাথে ডিল করছি তা হ'ল ডোম, এবং হ্যাঁ, এর ত্রুটিগুলি হল শ্রদ্ধা :) তবে এটি শ্রোতাদের মধ্যে অনুরূপ কোডটি এড়ানো সহজভাবেই একটি প্রশ্ন হতে পারে।

— ডালগার্ড

@ পেড্রোফেরিরা - হ্যাঁ, সম্ভবত বর্তমানে ব্যবহৃত অর্ধশতাধিক ব্রাউজার তীর ফাংশন সমর্থন করে না, তবে তারা খেলতে মজা দেয় এবং সর্বদা বাবেল থাকে । ;-)

— রবিজি

Answer 2

কিছু কমপ্যাক্ট বাক্য গঠন যা কাঙ্ক্ষিত ফলাফল অর্জন করে, POJS:

   "mousemove touchmove".split(" ").forEach(function(e){
      window.addEventListener(e,mouseMoveHandler,false);
    });

Comments

বা সরাসরি['mousemove', 'touchmove'].forEach(...)

— ড্যান ড্যাসক্লেস্কু

+1 এবং এটির প্রয়োজন নেই C ECMAScript 2015 তীর ফাংশন »এক্সটেনশন! ;-)

— পেড্রো

@ জাকারবার্গ শুরু করার জন্য, অ্যারের হার্ডকোডিংয়ের পরিবর্তে আপনি স্ট্রিংকে হার্ডকড করে তারপরে বিভক্ত করলেন, আপনি কি সত্যিই নিশ্চিত যে এই পথে যাওয়ার উপায়? আপনি কি নিশ্চিত যে এটি এটি সবচেয়ে পঠনযোগ্য উপায়? ['mousemove', 'touchmove'].forEach(function(event) { window.addEventListener(event, handler);}); কেবলমাত্র আরও পঠনযোগ্য নয় কেবল স্ট্রিংকে বিভক্ত করা এবং তারপরে ফলাফলের অ্যারেতে প্রতিটি আইটেমের জন্য একটি ক্রিয়াকলাপ চালানো না হওয়াও অনেক দ্রুত হবে।

— ইহরব আল আসিমি 10'19

@ ইহারোবআলআসিমি এই কোডটি 4 বছর আগে লেখা হয়েছিল, আমি আমার স্পেসবারটি খুঁজে পেয়েছি। স্ট্রিং বিভাজনটি ওপি-র একটি স্ট্রিংয়ের ব্যবহারের সাথে সম্পর্কিত ছিল

— ইসহাক

@ ইহারোবআলআসিমি আমি কোডটি লিখিনি। আপনি বলেছিলেন এটি অপঠনযোগ্য ছিল। আপনি এবং আমি উভয়ই কোডটি পড়ার পক্ষে সক্ষম তাই স্পষ্টত এটি নয়। এটি ব্যাকরণ নিয়ে বিতর্ক করার মতো। সমস্ত প্রোগ্রামারদের 99% কোডটি বেশ সুন্দরভাবে পড়তে সক্ষম হন

— জাকারবার্গ

Answer 3

ইসহাকের উত্তর পরিষ্কার করা:

['mousemove', 'touchmove'].forEach(function(e) {
  window.addEventListener(e, mouseMoveHandler);
});

সম্পাদনা

ES6 সহায়ক ফাংশন:

function addMultipleEventListener(element, events, handler) {
  events.forEach(e => element.addEventListener(e, handler))
}

Comments

এফওয়াইআই: মানচিত্র! = ForEach

— jpoppe

Answer 4

আমার জন্য; এই কোডটি সূক্ষ্মভাবে কাজ করে এবং একই (ইনলাইন) ফাংশন সহ একাধিক ইভেন্ট হ্যান্ডেল করার জন্য সংক্ষিপ্ততম কোড।

var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."];
for(event of eventList) {
    element.addEventListener(event, function() {
        // your function body...
        console.log("you inserted things by paste or typing etc.");
    });
}

Comments

ঠিক আমি যা খুঁজছি ধন্যবাদ!

— এলহরনি

Answer 5

ES2015:

let el = document.getElementById("el");
let handler =()=> console.log("changed");
['change', 'keyup', 'cut'].forEach(event => el.addEventListener(event, handler));

Comments

বিকল্পভাবে ব্যবহার for...ofলুপ

— শহরবাসী

Answer 6

আপনার জন্য আমার একটি সহজ সমাধান রয়েছে:

window.onload = window.onresize = (event) => {
    //Your Code Here
}

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

Comments

শুধুমাত্র একটি .অনলোড সম্ভব। সম্ভবত আপনি কোনও পুরানো শ্রোতার উপরে ওভাররাইট করেছেন। আপনার পরিবেশের উপর নির্ভর করে এটি একটি সমস্যা হতে পারে।

— হলগার জেরমিন

Answer 7

অ্যাডএভেন্টলিস্টনার একটি সাধারণ স্ট্রিং নেয় যা ইভেন্ট.টাইপের প্রতিনিধিত্ব করে । সুতরাং একাধিক ইভেন্টের পুনরাবৃত্তি করতে আপনাকে একটি কাস্টম ফাংশন লিখতে হবে।

এটি স্পেস ("") ব্যবহার করে jQuery এ পরিচালনা করা হচ্ছে এবং তারপরে প্রতিটিটির জন্য ইভেন্টলিস্টনার সেট করতে তালিকার উপরে পুনরাবৃত্তি করুন types।

    // Add elem as a property of the handle function
    // This is to prevent a memory leak with non-native events in IE.
    eventHandle.elem = elem;

    // Handle multiple events separated by a space
    // jQuery(...).bind("mouseover mouseout", fn);
    types = types.split(" ");  

    var type, i = 0, namespaces;

    while ( (type = types[ i++ ]) ) {  <-- iterates thru 1 by 1

Answer 8

এটি করার এক উপায়:

const troll = document.getElementById('troll');

['mousedown', 'mouseup'].forEach(type => {
	if (type === 'mousedown') {
		troll.addEventListener(type, () => console.log('Mouse is down'));
	}
        else if (type === 'mouseup') {
                troll.addEventListener(type, () => console.log('Mouse is up'));
        }
});

img {
  width: 100px;
  cursor: pointer;
}

<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>