制作一个用户友好的跨浏览器事件处理程序检查器

Question

我不是一个有经验的人 javascript programmer.I 试图在这里回答一个问题，我在我的 answer.I 中使用 addEventListener 作为我的事件处理程序被建议不要使用 addEventListener 用于特定的问题，因为它有一些跨浏览器问题。

Link to that question here

然后我想到了制作一个处理事件处理程序兼容性的函数 issue.Though 我已经设法制作了创建兼容事件处理程序所必需的函数，但我无法做到使它成为用户 friendly.I 意味着在我的代码中我在最后进行了一个函数调用，该函数调用将事件处理程序添加到 button.But 我想要我可以拥有的所有 html 元素我的文档将使用此函数来获得适当的事件处理程序 method.How 我可以吗 that.I 希望我已经正确描述了我的问题

var button=document.getElementById('btn');

function makeListener(elem,event,prefix){
    if(document.addEventListener){
       elem.addEventListener(event,function(e){
            alert('it has addEventListener method');
    });
 }else if(document.attachEvent){
        elem.attachEvent(prefix+event,function(e){
            alert('it has attachEvent method');
     }); 
 }else{
        add=prefix+event;
     elem.add=function(){
            alert('it has neither addEventListener nor attachEvent');
     }
 }
 
}
makeListener(window.button,'click','on');

<input type='button' value='listener tester' id='btn'>

Answer 1

您要创建的内容称为 polyfill。有很多漂浮在周围。

这是来自 Jonathan Neal 的一个 polyfill addEventListener、removeEventListener、dispatchEvent、CustomEvent 和 DOMContentLoaded.

https://github.com/jonathantneal/EventListener

document.getElementById('myButton1').addEventListener('click', function () {
  alert('Polyfill: You clicked me!');
});

<script src="https://raw.githubusercontent.com/jonathantneal/EventListener/master/EventListener.js"></script>
<button id="myButton1">Example using Polyfill</button>

编辑：http://youmightnotneedjquery.com/ 建议：

// IE8+
function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

addEventListener(el, eventName, handler);

EDIT2：这是一个如何使用它的示例。

(function () {
  var myDiv = document.getElementById('myDiv');
  var myInput = document.getElementById('myInput');
  var myButton = document.getElementById('myButton');

  addEventListener(myInput, 'keydown', myInputOnKeydownCallback);
  addEventListener(myButton, 'click', myButtonOnClickCallback);

  function myInputOnKeydownCallback() {
    myButton.style.backgroundColor = randomRGB();
    myDiv.textContent = myInput.value;
  }


  function myButtonOnClickCallback() {
    myInput.value = null;
    myButton.style.backgroundColor = 'black';
    myDiv.textContent = null;
  }

  function randomRGB() {
    return 'rgb(' + random(0, 255) + ', ' +
      random(0, 255) + ', ' +
      random(0, 255) + ')';
  }

  function random(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
  
})();

<script>
  function addEventListener(el, eventName, handler) {
    if (el.addEventListener) {
      el.addEventListener(eventName, handler);
    } else {
      el.attachEvent('on' + eventName, function(){
        handler.call(el);
      });
    }
  }
</script>

<input id="myInput"/>

<button id="myButton" style="background: black; color: white">Clear</button>

<div id="myDiv"></div>

制作一个用户友好的跨浏览器事件处理程序检查器

make a user friendly crossbrowser event handler checker

javascript

cross-browser

event-handling