无法弹出alert,请帮忙看下是怎么回事,自己怎么也找不到问题点,谢谢了

来源:2-4 IE事件处理程序及跨浏览器解决

myrtis

2015-09-15 16:35


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨浏览器事件处理</title>

<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;
                }
            }
        }
        function showMes(){
            alert("跨浏览器的click事件");
        }
        var btn5=document.getElementById("btn");
        eventUtil.addHandler(btn,'click',showMes);
</script>
</head>
<body>
<div>
<input type="button" id="btn" value="按钮" >
</div>
</body>
</html>


写回答 关注

1回答

  • pardon110
    2015-09-15 17:00:55
    已采纳

    存在两个错误,第一个js必须在整个文档加载完毕才能执行,如果要写在头部,请用window.onload=function(){}

    第二个错误:完全是拼写错误你的代码出现了btn5,当然关键是第一个错误,是致命的。所以你应该这样写

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>跨浏览器事件处理</title>
     <script type="text/javascript">
    window.onload = 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;
                    }
                }
            }
            function showMes(){
                alert("跨浏览器的click事件");
            }
            var btn=document.getElementById("btn");
            eventUtil.addHandler(btn,'click',showMes);
    }
    </script>
    
    </head>
    <body>
    <div>
    <input type="button" id="btn" value="按钮" >
    </div>
    </body>
    </html>

    或者这样

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>跨浏览器事件处理</title>
    </head>
    <body>
    <div>
    <input type="button" id="btn" value="按钮" >
    </div>
    
    <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;
                    }
                }
            }
            function showMes(){
                alert("跨浏览器的click事件");
            }
            var btn=document.getElementById("btn");
            eventUtil.addHandler(btn,'click',showMes);
    </script>
    </body>
    </html>


    myrtis

    太感动,这如鲠在喉的问题终于被你解决了!

    2015-09-15 17:12:47

    共 1 条回复 >

DOM事件探秘

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

99545 学习 · 1197 问题

查看课程

相似问题