Javascript обнаруживает обработчики событий, доступные в элементе HTML

Question

Есть ли способ определить, какие обработчики событий изначально доступны для элемента HTML?

Например:

isAvailable(img.onload) === true;    // All browsers
isAvailable(script.onload) === true; // Non-IE only (Webkit, Firefox, Opera)
isAvailable(link.onload) === true;   // IE (and I think Opera) only

В идеале я хочу сделать обнаружение функций в моем сценарии, где, если элемент доступен для элемента, который использует это, в противном случае отступление. В настоящее время мне приходится делать браузерные форки (на основе IE), что раздражает, так как IE может начать поддерживать script.onload, а Webkit / Firefox может начать поддерживать link.onload.

К сожалению, присвоение element.onload делает событие больше не «неопределенным», независимо от того, будет ли оно в конечном итоге срабатывать.

Спасибо!

Answer 1

Попробуйте это:

var d = document.createElement('div');

if(d.hasOwnProperty('onclick')) {
    //then onclick is supported
}

вы также можете просмотреть свойства div (или взять любой другой элемент HTML) для динамической проверки:

var d = document.createElement('div'),
   el = 0;

for(el in d) {
    if(d.hasOwnProperty(el)) {
        console.log(d[el]); //or do anything else you like
    }
}

Вы можете проверить больше о hasOwnProperty в блоге разработчика Mozilla

Answer 2

isEventSupported =
    function(tag, event){
    return document.createElement(tag)[event]===null;
    };

>> isEventSupported("script", "onload"); 
true //on my current browser

Существуют ложные отчеты об этой поддержке событий даже от ветеранов, таких как ..., давайте не будем упоминать имена - но НЕ очевидно, что событие onload, скорее всего, не сработает на элементах IMG SCRIPT и подобных элементах, потому что источник уже обналичен, и Элементы, чьи ресурсы извлекаются из наличных, не будут запускать событие onload.

Исключение: элемент документа будет запускать событие onload, даже при работе с сохраненными файлами, поскольку это зависит от завершения готовности.

Answer 3

Один из способов, которыми я занимался в прошлом, - это использовать старый цикл «for» и проверять каждое значение ключа, чтобы увидеть, начинается ли оно с «on» (каждый обработчик родного события, который я когда-либо видел, запускает это кстати ...) Так, например:

var el = document.querySelector("*"), //this is the element (use whatever selector text)
elEventHandlers = [];                 //set up an array to hold 'em all

for (var prop in el)                  //loop through each prop of the element
    if (prop.substring(0,2)=="on")    //if the prop starts with "on" it's an event handler
        elEventHandlers.push(prop);   //so, add it to the array

console.log(elEventHandlers);         //then dump the array to the console (or whatever)

вуаля! Теперь вы знаете, какие обработчики событий могут быть зарегистрированы для этого элемента!

Answer 4

Вот пример, извлеченный из способа Modernizr делает обнаружение событий:

var tmp = document.createElement('script'); 
tmp.setAttribute('onload', '');
isSupported = typeof tmp.onload == 'function';

Answer 5

Я делал что-то подобное раньше; когда пишете что-то из-за пробелов в телефоне на iphone, в зависимости от того, запускаете ли вы приложение в симуляторе или на разных версиях устройства, у вас часто есть разные обработчики для обработки нажатия кнопок ввода (и большинства других вещей) - так вверху моего сценария я просто делаю быструю проверку;

var m_clickEvent = ''; 

if ( $('input').click != 'undefined')
   m_clickEvent = 'click'
else if ( $('input').tap != 'tap')
   m_clickEvent = 'tap'
else if ( $('input').touchstart!= 'touchstart')
   m_clickEvent = 'touchstart'
else 
   // some kind of error handling..

тогда я могу пойти дальше и связать свой обработчик событий;

$('.myButton').bind(m_clickEvent, function(e) { ... });

Answer 6

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

var apple = new Object;
    apple.load = function() { alert("I am a method.") };
    apple.color = "red"

function isAvailable(obj, mp) { 
    // obj = element to test for method or property. 
    // mp = name of method or property. 

    if (obj[mp]) {
        return true;
    } else {
        return false;
    }
}

if (isAvailable(apple, "color")) {
    alert("apple object has a 'color' property");
}

if (isAvailable(apple, "load")) {
    alert("apple object has a 'load' method");
}

Редактировать: Переработал ответ, чтобы показать пример.

Answer 7

( Редактировать См. Ниже, это не работает.) Вы можете проверить, имеет ли элемент свойство onload:

var img = document.createElement('img');
alert("img onload? " + ('onload' in img));
var script = document.createElement('script');
alert("script onload? " + ('onload' in script));

В IE7 я получаю true для img и false для script.

Редактировать Это не работает для Firefox. Если оставить это так, чтобы другие не пошли по тому же пути.