Прикрепление обработчика события click в кросс-браузер образом


Я пытался есть вызов метода с параметром, внутри тернарного оператора, чтобы упростить код.

Код:

 if (window.addEventListener) {
     btnArray[index].addEventListener('click', function() {
        doMassClick( btnArray[index], nameArray[index]);
     });
 } else {
     btnArray[index].attachEvent('onclick', function() {
        doMassClick( btnArray[index], nameArray[index]);
     });
 }

Мне удалось упростить это:

btnArray[index][ window.addEventListener ? 'addEventListener' : 'attachEvent'](window.addEventListener ? 'click' : 'onclick', function() {
    doMassClick( btnArray[index], nameArray[index]);
});

Я бы хотел знать, как это может быть упрощенный/очищено более..



Комментарии
2 ответа

Обычное дело в вашем коде слушателя.

function massClickListener() {
doMassClick( btnArray[index], nameArray[index]);
}

Тогда легче использовать троичную:

btnArray[index][ window.addEventListener ? 'addEventListener' : 'attachEvent'](window.addEventListener ? 'click' : 'onclick', massClickListener);

Однако лично я думаю, что это лучше:

if (window.addEventListener) {
btnArray[index].addEventListener('click', massClickListener);
} else {
btnArray[index].attachEvent('onclick', massClickListener);
}

Используя условный оператор, чтобы выбрать различные методы не очень читаемый.

Другой вариант может заключаться в использовании фреймворк, который делает эти вещи для вас.

4
ответ дан 6 апреля 2018 в 08:04 Источник Поделиться

Некоторые моменты


  • window по умолчанию объект. Вы никогда не должны ссылаться на него, если вы используете кронштейн нотации, или текущей области есть name что заменил window.name. Таким образом if (window.addEventListener) { идентично if (addEventListener) {

  • addEventListener и attachEvent оба свойства EventTarget.prototype и должны быть использованы для определения которого используется, а не глобальный объект window

  • Вы только сделать тест, для которого функция, чтобы использовать один раз при запуске. Если когда-нибудь вы найдете себе делать то же самое снова и снова, то это верный sugn есть путь проще.

Более простое решение.

Данное решение предполагает, что вы не используете какие-либо библиотеки, которые управляют слушателей (но тогда вы бы не нужна).

Для решения проблемы выполните следующие в начале вашего кода.

if (!EventTarget.prototype.addEventListener) {         
EventTarget.prototype.addEventListener = function(eventName, callback) {
this.attachEvent("on" + eventName, callback);
}
}

Теперь вы можете добавить слушателя, используя addEventListener для любой цели в IE < 9

btnArray[index].addEventListener("click", massClickListener);

Возможно, вы захотите сделать то же самое с detachEvent .

if (!EventTarget.prototype.addEventListener) {         
EventTarget.prototype.addEventListener = function(eventName, callback) {
this.attachEvent("on" + eventName, callback);
}
// assumes removeEventListener does not exist if addEventListener
EventTarget.prototype.removeEventListener = function(eventName, callback) {
this.detachEvent("on" + eventName, callback);
}
}

3
ответ дан 7 апреля 2018 в 05:04 Источник Поделиться