js绑定事件的方式

左心房为你撑大大i 提交于 2019-12-09 07:12:13

一、在行内绑定时间
例:
在行内写事件,在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>

三、事件的监听

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!