这个问题上eventListener和event.targe的区别

问题描述 投票:0回答:1

我正在尝试解决 Js 中的一个简单问题,我需要在 html 上旋转 js 中的字符串(仅),但是我面临着这两个事件处理程序的问题(我调用事件处理程序的 eventListener 和 event.target 因为我不是确定他们是否做同样的事情或类似的事情......)。

这是html代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="Training">
        <meta name="author" content="Vitor Mota">
        <title>Training</title><!--Practice-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                      
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="cssFile.css">
        <script src="JsExc.js" defer></script>
    </head>
    <body >

       
       <div class="Test_space" id="target">
        <button id="btnStart">Start</button>
          <div id="tt">w3resource</div> 
        <button id="btnStop">Stop</button>    
       </div>

        
       
        
    </body>
</html>

这是我的 JS 代码(当我使用

 if(event.target == btnStop){   }
 let btnStop= document.getElementById("btnStop");
时,它不起作用):

window.onclick = function(event){
    


    let Startbtn = document.getElementById("btnStart");
    let btnStop= document.getElementById("btnStop");

    let getId= document.getElementById("tt"); //Any id name
    let getSstringToReplace = getId.childNodes[0].data;


    let myInterval 
    

    if(event.target == btnStart){   
        myInterval = setInterval(start, 100);
    }

    if(event.target == btnStop){   
          clearInterval(myInterval);
    }

    function start(){   
        getSstringToReplace= getSstringToReplace[getSstringToReplace.length-1] + getSstringToReplace.substring(0, getSstringToReplace.length - 1);  
        
        getId.childNodes[0].data = getSstringToReplace;
    }
    
}

但是当我更改那部分代码时

if(event.target == btnStop){   }
 let btnStop= document.getElementById("btnStop");
,并添加一个新函数 stop() 并将我的 getelementbyid 更改为 addEventListener,如下所示:

window.onclick = function(event){
    


    let rodarbtn = document.getElementById("btnStart");
    document.getElementById("btnStop").addEventListener("click", stop);

    let getId= document.getElementById("tt");
    let getSstringToReplace = getId.childNodes[0].data;


    let myInterval 
    

    if(event.target == rodarbtn){   
        myInterval = setInterval(run, 100);
    }
    function stop(){
        clearInterval(myInterval);
    }
    function run(){   
        getSstringToReplace= getSstringToReplace[getSstringToReplace.length-1] + getSstringToReplace.substring(0, getSstringToReplace.length - 1);  
        
        getId.childNodes[0].data = getSstringToReplace;
    }
    
} 

这一项有效,有人可以解释为什么吗?

javascript html events event-handling event-listener
1个回答
0
投票

我在提问时忘记将“rodarBtn”中的葡萄牙语单词更改为“StartBtn”,正如ID名称所暗示的那样,但只是做了一点修改,希望它不会让任何人感到困惑。

© www.soinside.com 2019 - 2024. All rights reserved.