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

我过去做过这种方式的一种方法是使用旧的＆＃34; for in＆＃34;循环，并检查每个键值，看它是否以＆＃34; on＆＃34; （我见过的每个本机事件处理程序都是以这种方式开始的...）所以，例如：

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's dev blog

上查看有关hasOwnProperty的更多信息

Answer 7

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

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

有关这个事件支持的错误报告，即使是来自像...这样的老手，我们也不提名字 - 但是很明显onload事件很可能不会触发IMG元素SCRIPT元素和类似的，因为来源已经兑现，从现金中提取资源的元素不会触发onload事件。

异常：即使使用兑现文件，文档元素也会触发onload事件，因为它取决于readystate complete。

Javascript检测HTML元素上可用的事件处理程序

7 个答案: