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”吗？

回答

相关问题