Home > Article > Web Front-end > Adding events to scripts in Javascript is overridden

Adding events to scripts in Javascript is overridden

autoloadOriginal: 2021-04-08 15:35:521549browse

Question: Is it overwritten when added to the script?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>php.cn</title>
</head>
<body>
    <button onclick="">按钮2</button>
    <script>
           const btn2=document.querySelector("button");
           btn2.onclick=function(){
               alert("你好");
           }
           btn2.onclick=function(){  //这个会覆盖上面的onclick
               alert("我也很好");
           }
    </script>
</body>
</html>

Solution:

1. Merge the two together

 <script>
           const btn2=document.querySelector("button");
           btn2.onclick=function(){
               alert("你好");
                alert("我也很好");
           }
    </script>

2. Add event listener

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>php.cn</title>
</head>
<body>
    <button>按钮2</button>
    <script>     
         const btn1=document.querySelector("button");
           console.log(btn1);
           btn1.addEventListener("click",()=>alert("你好"));
           btn1.addEventListener("click",function(){
               alert("我也很好")
           });
    </script>
</body>
</html>

The above is the detailed content of Adding events to scripts in Javascript is overridden. For more information, please follow other related articles on the PHP Chinese website!

JavaScript JS 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to delete a table in javascriptNext article：How to delete a table in javascript

See more

Adding events to scripts in Javascript is overridden

Related articles