為div添加事件，不會產(chǎn)生事件冒泡而是彈出兩個(gè)相同showmes,這是為什么呢？對著視頻老師講解敲了好幾回都是這樣？拜托哪位大神幫忙解下疑惑，謝謝！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
</head>
</head>
<body>
? <div id="box">
??? <input type="button" value="按鈕3" id="btn3" />
??? <a href="聯(lián)系.html" id="go">跳轉(zhuǎn)</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>
2016-09-18
錯(cuò)誤：你addHandler里面所有的handler都用的showmes，所以不管綁定什么函數(shù)，都是showme。
解決辦法：把a(bǔ)ddHandler中所有showmes改為handler。removeHandler中亦是如此。
2016-11-02
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ?<title>無標(biāo)題文檔</title>
</head>
<body>
<div id="box">
? ?<input type="button" value="按鈕3" id="btn3" />
? ?<a href="聯(lián)系.html" id="go">跳轉(zhuǎn)</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>
試一下吧！
2016-09-18
var?eventUtil={ ????addHandler:function(element,type,handler){??//這里參數(shù)是handler ????????if(element.addEventListener){ ????????????element.addEventListener(type,showmes,false);??//錯(cuò)誤，將showmes改成handler ????????}else?if(element.attachEvent){ ????????????element.attachEvent('on'+type,showmes);??//錯(cuò)誤 ????????}else{ ????????????element['on'+type]=showmes;??//錯(cuò)誤 ????????} ????}