                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /DOM事件探秘

为div添加事件，不会产生事件冒泡而是弹出两个相同showmes,这是为什么呢？对着视频老师讲解敲了好几回都是这样？拜托哪位大神帮忙解下疑惑，谢谢！

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

</head>
<body>
<div id="box">
    <input type="button" value="按钮3" id="btn3" />
    <a href="联系.html" id="go">跳转</a>
</div>
<script type="text/javascript">
var eventUtil={
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,showmes,false);
        }else if(element.attachEvent){
            element.attachEvent('on'+type,showmes);
        }else{
            element['on'+type]=showmes;
        }
    },
     removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,showmes,false);
        }else if(element.detachEvent){
            element.detachEvent('on'+type,showmes);
        }else{
            element['on'+type]=null;
        }
    },
}

function showmes(){
    alert('hello world');
}

function showbox(){
    alert('这是放按钮的BOX');
}

function stopgoto(){
    alert('');
}

var btn3=document.getElementById('btn3');
var box=document.getElementById('box');
var go=document.getElementById('go');

eventUtil.addHandler(btn3,'click',showmes);
eventUtil.addHandler(box,'click',showbox);

</script>
</body>
</html>

control123

2016-09-18

源自：DOM事件探秘 3-1

关注问题我要回答

1013

操作

收起

3 回答

慕粉3589554 回答被采纳 +3 积分
2016-09-18

错误：你addHandler里面所有的handler都用的showmes，所以不管绑定什么函数，都是showme。

解决办法：把addHandler中所有showmes改为handler。removeHandler中亦是如此。

0 回复有任何疑惑可以回复我~

收起回答

qq_若相惜卟弃_3
2016-11-02

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="box">
<input type="button" value="按钮3" id="btn3" />
<a href="联系.html" id="go">跳转</a>
</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('hello world');
}

function showbox(){
alert('这是放按钮的BOX');
}

function stopgoto(event){
event.stopPropagation();
event.preventDefault();
}

var btn3=document.getElementById('btn3');
var box=document.getElementById('box');
var go=document.getElementById('go');

eventUtil.addHandler(btn3,'click',showmes);
eventUtil.addHandler(box,'click',showbox);
eventUtil.addHandler(go,'click',stopgoto);

</script>
</body>
</html>

试一下吧！

0 回复有任何疑惑可以回复我~

收起回答

J2167
2016-09-18

var eventUtil={
    addHandler:function(element,type,handler){  //这里参数是handler
        if(element.addEventListener){
            element.addEventListener(type,showmes,false);  //错误，将showmes改成handler
        }else if(element.attachEvent){
            element.attachEvent('on'+type,showmes);  //错误
        }else{
            element['on'+type]=showmes;  //错误
        }
    }

0 回复有任何疑惑可以回复我~

收起回答