Chrome支持「addEventListener」嗎？

當我使用chrome來測試跨瀏覽器事件處理時，該函數不起作用。它說「未捕獲的TypeError：無法讀取null的屬性'addEventListener'」。據我所知，chrome支持「addEventListener」函數，但它不能識別函數。這是我的代碼。Chrome支持「addEventListener」嗎？

<!DOCTYPE html> 
<html> 
<head> 
    <title>event test</title> 
</head> 
<body> 
<script type="text/javascript"> 
    var EventUtil = { 
     addHandler : function(element, type, handler){ 
      if (element.addEventListener){ 
       element.addEventListener(type,handler,false); 
      }else if (element.attachEvent){ 
       element.attachEvent("on" + type,handler); 
      }else{ 
       element["on" + type] = handler; 
      } 
     }, 
     removeHandler : function(element, type, handler){ 
      if (element.removeEventListener){ 
       element.removeEventListener(type,handler,false); 
      }else if (element.detachEvent){ 
       element.detachEvent("on" + type,handler); 
      }else{ 
       element["on" + type] = null; 
      } 
     } 
    }; 
    var btn = document.getElementById('myBtn'); 
    var handler1 = function(){ 
     alert("Hello!"); 
    }; 
    EventUtil.addHandler(btn,"click",handler1); 
</script> 
<input type="button" name="mybutton" id="myBtn" value="myButton"> 
</body> 
</html>

代碼有什麼問題？如何解決它？

來源

2015-10-21 chensunn

是的，它支持，在[DOMContentLoaded]（https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded）中包裝代碼或將其移動到'body的底部' – Tushar

問題是你的腳本放在dom元素之前，要麼將腳本放在元素之後，要麼等待dom準備好 - https：//developer.mozilla.org/en-US/docs/Web/Events/ DOMContentLoaded＃Browser_compatibility –

'「未捕獲的類型錯誤：無法讀取null的屬性'addEventListener'」'表示您正在嘗試執行'null.addEventListener'。即問題是什麼填充'btn'，而不是'addEventListener'。 –

它不會因爲工作輸入標籤放置在腳本標籤下，代碼將在元素創建之前得到執行，因此沒有任何工作。你可以通過在輸入標籤下放置腳本標籤或添加window.onload（）{\來執行你的指令}來解決這個問題，你可以在其中放置你需要執行的操作，你可以在任何地方初始化函數，但這是你叫他們

來源

2015-10-21 05:41:49 Noctisdark

頁面加載後執行JavaScript代碼或將其放置在HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>event test</title> 
</head> 
<body> 
<input type="button" name="mybutton" id="myBtn" value="myButton"> 
</body> 
<script type="text/javascript"> 
    var EventUtil = { 
     addHandler : function(element, type, handler){ 
      if (element.addEventListener){ 
       element.addEventListener(type,handler,false); 
      }else if (element.attachEvent){ 
       element.attachEvent("on" + type,handler); 
      }else{ 
       element["on" + type] = handler; 
      } 
     }, 
     removeHandler : function(element, type, handler){ 
      if (element.removeEventListener){ 
       element.removeEventListener(type,handler,false); 
      }else if (element.detachEvent){ 
       element.detachEvent("on" + type,handler); 
      }else{ 
       element["on" + type] = null; 
      } 
     } 
    }; 
    var btn = document.getElementById('myBtn'); 
    var handler1 = function(){ 
     alert("Hello!"); 
    }; 
    EventUtil.addHandler(btn,"click",handler1); 
</script> 
</html>

使用jQuery的最後，你可以做這樣的事情：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var EventUtil = { 
     addHandler : function(element, type, handler){ 
      if (element.addEventListener){ 
       element.addEventListener(type,handler,false); 
      }else if (element.attachEvent){ 
       element.attachEvent("on" + type,handler); 
      }else{ 
       element["on" + type] = handler; 
      } 
     }, 
     removeHandler : function(element, type, handler){ 
      if (element.removeEventListener){ 
       element.removeEventListener(type,handler,false); 
      }else if (element.detachEvent){ 
       element.detachEvent("on" + type,handler); 
      }else{ 
       element["on" + type] = null; 
      } 
     } 
    }; 
    var btn = document.getElementById('myBtn'); 
    var handler1 = function(){ 
     alert("Hello!"); 
    }; 
    EventUtil.addHandler(btn,"click",handler1); 
    }; 
</script>

來源

2015-10-21 05:39:56 Thariama

Chrome支持「addEventListener」嗎？

回答

相關問題