Question

我不是一个经验丰富的javascript程序员。我试着在这里回答一个问题，我在我的答案中将addEventListener作为我的事件处理程序。我被建议不要对该特定问题使用addEventListener，因为它有一些跨浏览器问题。

然后我想到了一个能够处理事件处理程序兼容性问题的函数。虽然我已经设法创建了一个兼容的事件处理程序所必需的功能，但是我无法设法让它变得用户友好我的意思是在我的代码中，我在最后调用了一个函数调用函数，该函数调用一个按钮添加事件处理程序。但是我希望我文档中可以拥有的所有html元素都将使用此函数来获得正确的事件处理方法我怎么能这样做。我希望我已经正确地描述了我的问题

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的内容，其中填充了addEventListener，removeEventListener，dispatchEvent，CustomEvent和DOMContentLoaded。

https://github.com/jonathantneal/EventListener

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：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：以下是您如何使用它的示例。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: