简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - DOM事件，看看代码错在哪里(Uncaught SyntaxError: Unexpected identifier)
伊谢尔伦
伊谢尔伦 2017-04-11 09:45:28
0
6
411

一个简单的按钮弹出程序，代码检查了好几遍，就是找不错在哪里啊
运行不了，显示“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>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回覆(6)
伊谢尔伦
伊谢尔伦2017-04-11 09:47:28 6樓

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

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

點贊 +0
新增回覆
左手右手慢动作
左手右手慢动作2017-04-11 09:47:28 5樓

也就这样了

<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 4樓

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

<script type="text/javascript">   //最佳实践：script标签放在html文档尾部
    window.onload = function(){
     //你的代码都放到这里。
    }
</script>
點贊 +0
新增回覆
Ty80
Ty802017-04-11 09:47:28 3樓

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

點贊 +0
新增回覆
巴扎黑
巴扎黑2017-04-11 09:47:28 2樓

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

點贊 +0
新增回覆
洪涛
洪涛2017-04-11 09:47:28 1樓

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

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

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

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

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！