js绑定事件的方式

最新推荐文章于 2024-04-27 07:39:35 发布

九木德员工

最新推荐文章于 2024-04-27 07:39:35 发布

阅读量995

点赞数

本文链接：https://blog.csdn.net/weixin_43694639/article/details/87546108

版权

一、在行内绑定时间
例：
在行内写事件，在js里写事件的方法

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function winload(){
            alert("窗体刷新了")
        }
        function btn(){
            alert("1");
        }

    </script>
</head>
<body "winload()">//onload加载窗体事件
<button onclick="btn()">按钮</button>//点击事件
</body>

二、js动态绑定事件
例:

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        /*脚本写在元素之前得考虑获取的元素是否存在*/
      //脚本写在元素之前，用窗口加载事件先获取元素
        window.onload = function () {
            //获取到了这个按钮元素
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("你好！");
            }
            btn.onmouseover = function () {
                alert("你悬停我");
            }

            //获取className名称元素
            var btnclass = document.getElementsByClassName("btnclass");
            for (var i = 0; i < btnclass.length; i++) {
                btnclass[i].onclick = function () {
                    alert("你好");
                }
            }
            //一个个获取太麻烦，用for循环遍历
            /* btnclass[0].onclick=function (){

             };
             btnclass[1].onclick=function (){

             };
             btnclass[2].onclick=function (){

             };
             btnclass[3].onclick=function (){

             };*/

        }
    </script>
</head>
<body> <!--"windowsread()"-->
<button id="btn">按钮</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
</body>

三、事件的监听