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

理想情況下，我想在我的腳本中進行特征檢測，如果onload可用於元素使用它，否則回退。 目前我不得不做瀏覽器分支（基於 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
    }
}

您可以在mozilla 的開發博客上查看有關 hasOwnProperty 的更多信息

Answer 2

（編輯見下文，這不起作用。）您可以檢查元素是否具有onload屬性：

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

在 IE7 上，我對img得到true ，對script得到false 。

編輯這不適用於 Firefox。 離開這個只是為了讓其他人不會走同樣的路。

Answer 3

我不確定這是否是您所要求的，但這會讓您知道您是否有可用於給定對象的特定方法或屬性。

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 4

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

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

有關於此事件支持的錯誤報告，甚至來自像...這樣的退伍軍人，更不用說名字了 - 但很明顯 onload 事件很可能不會在 IMG 元素、SCRIPT 元素和類似元素上觸發，因為來源已經cashed 和從現金中提取資源的元素不會觸發 onload 事件。

例外：document 元素將觸發 onload 事件，即使在處理現金文件時也是如此，因為它依賴於就緒狀態完成。

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

這是從Modernizr 進行事件檢測的方式中提取的示例：

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

Answer 7

我過去這樣做的一種方法是使用舊的“for in”循環，並檢查每個鍵值以查看它是否以“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)

瞧！ 現在您知道可以在該元素上注冊哪些事件處理程序了！