Каков правильный способ проверки доступности attachEvent()?

Question

Я видел эти 3:

if(window.attacheEvent) 

if(document.attachEvent) 

if(element.attachEvent) 

Примечание:

• элемент легко доступен.

• нет библиотеки Пожалуйста

Прикладного с Fascade шаблоном на Ответ

$NS.addEventL = (function determineEventBinding(){ 
    if(window.attachEvent){ 
     return function attachEvent(element, type, callNow){ 
      element.attachEvent('on' + type, callNow); 
     } 
    } 
    else { 
     return function addEventListener(element, type, callNow){ 
      element.addEventListener(type, callNow); 
     } 
    } 
}()); 

Answer 1

Они все «правильно» в том, что они дают одинаковые результаты (при условии, element является DOM). Преимущество с window и document заключается в том, что вам не придется создавать или находить элемент для тестирования функциональности, что означает, что вы можете более эффективно выполнять свой тест.

Вы говорите, что element легко доступен: это предполагает, что вы пишете плагин/библиотеку/модуль, который создает элементы и связывает с ними события. Я бы сказал, раскошелиться свои события отдельно:

В то время как вы можете иметь такой код:

function createButton(){ 
    // Create element 
    var button = document.createElement('input'); 

    // Bind event 
    if(button.attachEvent){ 
     button.attachEvent('onclick', actionTrigger); 
    } 
    else { 
     button.addEventListener('click', actionTrigger, false); 
    } 

    return button; 
} 

Вы можете быть лучше писать свою собственную функцию-обертку, как таковой:

var bindEvent = (function determineEventBinding(){ 
    if(window.attachEvent){ 
     return function attachEvent(element, hook, func){ 
      element.attachEvent('on' + hook, func); 
     } 
    } 
    else { 
     return function addEventListener(element, hook, func){ 
      element.addEventListener(hook, func, false); 
     } 
    } 
}()); 

. .. И затем забудьте все о головной боли, используя вашу обертку при написании функционального кода:

function createButton(){ 
    // Create element 
    var button = document.createElement('input'); 

    // Bind event 
    bindEvent(button, 'click', actionTrigger); 

    return button; 
} 

Преимущества многообразны:

1. код для определения метода необходимо только один раз запустить
2. Этот код может работать, как только начинает выполнение сценария - оставаясь в пути производительности заторы горячих точках, как DOM готов, или пользователь CTA
3. Вы можете забыть обо всех различиях браузера при написании своего эзотерического функционального кода, и ваш код будет читать и лучше работать в результате
4. Если вам нужно поддерживать новые различия в браузере или исправить существующие, вы можете редактировать код в одном месте, а не трассировку каждый раз, когда вы связываете событие