首页  >  问答  >  正文

javascript - DOM事件,看看代码错在哪里(Uncaught SyntaxError: Unexpected identifier)

一个简单的按钮弹出程序,代码检查了好几遍,就是找不错在哪里啊
运行不了,显示“new1.html:38 Uncaught SyntaxError: Unexpected identifier”

大神帮忙检查下代码,指点一下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title>0421_DOM0级与DOM2级处理事件</title>
    <script type="text/javascript">
        function showM(){
            alert("Hello world!");
        }
        
        //DOM0级处理事件
        var btn2=document.getElementById("btn2");
        var btn3=document.getElementById("btn3");
        btn2.onclick=function(){
        alert('时间2号');};
        btn2.onclick=null;

        //DOM2级处理事件
        //btn3.addEventListener('click',showM,false);
        //btn3.attachEvent('onclick',showM);
        
        //解决浏览器兼容性问题
        var eventUtil={
            //添加句柄
            addHandler:function(element, type, handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                    //DOM2级处理事件兼容chrome和火狐
                }else if(element.attachEvent){
                    element.attachEvent('on'+type,handler);        
                    //DOM2级处理事件兼容IE8以及更早的浏览器版本,只支持事件冒泡        
                }else{
                    element['on'+type]=handler;
                    //DOM0级处理事件element.onclick等价于element['onclick']
                }
            }
            //删除句柄
            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;
               }
             },
        }
        eventUtil.addHandler(btn3,'click',showM);        
    
    </script>
    
</head>
<body>
<input type="button" value="按钮一" id="btn1" onclick="showM()">

<input type="button" value="按钮二" id="btn2">

<input type="button" value="按钮三" id="btn3">

</body>
</html>
伊谢尔伦伊谢尔伦2771 天前417

全部回复(6)我来回复

  • 伊谢尔伦

    伊谢尔伦2017-04-11 09:47:28

    把你的的script放在body的尾部。

    你的script执行时body里的dom都还没渲染,所以getElementById什么都找不到。

    回复
    0
  • ringa_lee

    ringa_lee2017-04-11 09:47:28

    也就这样了

    <input type="button" value="按钮一" id="btn1" onclick="showM()">
    
    <input type="button" value="按钮二" id="btn2">
    
    <input type="button" value="按钮三" id="btn3">
    
    <script type="text/javascript">
            function showM(){
                alert("Hello world!");
            }
            
            //DOM0级处理事件
            var btn2=document.getElementById("btn2");
            var btn3=document.getElementById("btn3");
    
            console.log(btn2);
    
    
            btn2.onclick=function(){
                alert('时间2号');
            };
            btn2.onclick=null;
    
            //DOM2级处理事件
            //btn3.addEventListener('click',showM,false);
            //btn3.attachEvent('onclick',showM);
            
            //解决浏览器兼容性问题
            var eventUtil={
                //添加句柄
                addHandler:function(element, type, handler){
                    if(element.addEventListener){
                        element.addEventListener(type,handler,false);
                        //DOM2级处理事件兼容chrome和火狐
                    }else if(element.attachEvent){
                        element.attachEvent('on'+type,handler);        
                        //DOM2级处理事件兼容IE8以及更早的浏览器版本,只支持事件冒泡        
                    }else{
                        element['on'+type]=handler;
                        //DOM0级处理事件element.onclick等价于element['onclick']
                    }
                },
                //删除句柄
                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;
                   }
                 }
            }
            eventUtil.addHandler(btn3,'click',showM);        
        

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-11 09:47:28

    html元素是自上而下渲染的,如果放在head中,这时候body还没有被渲染,javascript代码操作的对象都没有,报错是很正常的。

    <script type="text/javascript">   //最佳实践:script标签放在html文档尾部
        window.onload = function(){
         //你的代码都放到这里。
        }
    </script>

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 09:47:28

    ...........................

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-11 09:47:28

    除了上面几位说的问题,还有一个就是在removeHandler这个方法上面的花括号后面要加一个逗号。因为eventUtil 是一个对象。里面有两个方法,所以要加一个逗号,但是一般对象的最后一个属性或者方法不加逗号。

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 09:47:28

    谢谢几位大神的指点,终于弄好了。
    主要调整了两点:

    1. 把javascript代码放在body结束标签前,input代码后;

    2. 在removeHandler这个方法上面的花括号后面加一个逗号。这个影响挺大的,后来测试了一下,一去掉逗号,马上出问题;逗号加上就好了。

    最后,各位回答得都有帮助,因为只能采纳一个答案,决定还是把采纳给到第一个回答问题的人吧。

    回复
    0
  • 取消回复