5

有没有办法检测 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使事件不再“未定义”，无论它最终是否会触发。

4

7 回答 7

0

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

于 2010-05-19T09:50:12.273 回答
0

试试这个：

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的更多信息

于 2012-12-10T21:09:34.787 回答
0

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

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");
}

编辑：重新设计答案以显示示例。

于 2010-07-02T00:44:51.583 回答
0

这是一个从Modernizr进行事件检测的方式中提取的示例：

var tmp = document.createElement('script'); 
tmp.setAttribute('onload', '');
isSupported = typeof tmp.onload == 'function';
于 2011-11-22T12:46:56.563 回答
0

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

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

于 2012-02-08T02:44:17.080 回答
0

我以前做过这样的事情；在 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) { ... });
于 2010-10-08T11:43:22.140 回答
0 
isEventSupported =
    function(tag, event){
    return document.createElement(tag)[event]===null;
    };

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

即使是像......这样的退伍军人也有关于此事件支持的虚假报告，更不用说名称了 - 但很明显 onload 事件很可能不会在 IMG 元素 SCRIPT 元素和类似元素上触发，因为源已经cashed 和从 cash 中提取资源的元素不会触发 onload 事件。

例外：文档元素将触发 onload 事件，即使在处理已兑现的文件时也是如此，因为它依赖于 readystate 完成。

于 2016-05-02T23:22:30.910 回答