chrome是否支持“addeventlistener”?

Does chrome support "addEventListener"?

本文关键字：addeventlistener 是否支持 chrome 更新时间：2023-09-26

当我使用chrome测试跨浏览器事件处理时，该功能不起作用。它说"未捕获的类型错误:不能读取属性'addEventListener'的null"。据我所知，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>

代码有什么问题?如何解决这个问题?

它不起作用，因为input标签被放置在script标签下面，代码将在创建元素之前执行，所以什么都不起作用。你可以通过在输入标签下添加script标签或者添加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>

没有找到相关文章