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

（编辑见下文，这不起作用。）您可以检查该元素是否具有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。留下这个只是为了让其他人不要走同样的路。

Answer 2

我不确定这是否是您所要求的，但这会让您知道您是否有可用于给定对象的特定方法或属性。

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 3

我以前做过类似的事情；当在 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 4

以下是从 Modernizr 进行事件检测的方式中提取的示例：

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

Answer 5

我过去这样做的一种方法是使用旧的“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)

瞧！现在您知道可以在该元素上注册哪些事件处理程序了！

Answer 6

试试这个：

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 的开发博客

Answer 7

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

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

有一些关于此事件支持的虚假报告，甚至来自像...这样的退伍军人，我们不提名字 - 但不明显的是，onload 事件很可能不会在 IMG 元素、SCRIPT 元素和类似元素上触发，因为来源已经是cashed 和从现金中提取资源的元素不会触发 onload 事件。

例外：即使在处理已兑现的文件时，文档元素也会触发 onload 事件，因为它取决于就绪状态完成。