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>
代码有什么问题?如何解决它?
答
它不会因为工作输入标签放置在脚本标签下,代码将在元素创建之前得到执行,因此没有任何工作。你可以通过在输入标签下放置脚本标签或添加window.onload(){\来执行你的指令}来解决这个问题,你可以在其中放置你需要执行的操作,你可以在任何地方初始化函数,但这是你叫他们
答
页面加载后执行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>
是的,它支持,在[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'。 –