js事件学习的小demo

时间：2022-06-20 19:26:19

直接上代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>JavaScript事件</title>

    </head>

    <body>

        <p>示例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>

        <button id="myBtn">点我</button>

        <p id="demo"></p>

        <script>

        var obj = document.getElementById("myBtn");

        obj.addEventListener("mouseover", myFunction);

        obj.addEventListener("click", mySecondFunction);

        obj.addEventListener("mouseout", myThirdFunction);

        function myFunction() {

            document.getElementById("demo").innerHTML += "Moused over!<br>"

        }

        function mySecondFunction() {

            document.getElementById("demo").innerHTML += "Clicked!<br>"

        }

        function myThirdFunction() {

            document.getElementById("demo").innerHTML += "Moused out!<br>"

        }

        </script>

    </body>

</html>

相关文章