js事件

最新推荐文章于 2024-09-22 11:17:00 发布

前端小布丁

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量114

点赞数

文章标签： js javascript html html5 css

本文链接：https://blog.csdn.net/weixin_46191548/article/details/104187536

版权

window.onland：当前页面加载完毕后执行的方法，该方法用于，包裹所有的内联js代码，解决js获取html标签时，标签还没有加载的情况，保证先加载页面，再加载js功能提高用户的体验。

<body>
    <input type="text" class="inp">
    <br>
    <input type="text" class="inp">
    <br>
    <input type="text" class="inp">
    <br>
    <input type="text" class="but" value="选中文本时触发">
    <br>
    <input type="text" class="but" value="内容改变时触发">
    <br>
    <input type="text" class="but">
    <script>
        window.onload = function(){  //存放所有内联js代码
            inp = document.getElementsByClassName("inp");
            //失去焦点
            inp[0].onblur = function(){
                console.log("我是去焦点了")
            }
            // 获得焦点
            inp[2].onfocus = function(){
                console.log("我获得了焦点")
            }
            // 选中文本时触发
            but = document.getElementsByClassName("but");
            but[0].onselect = function(){
                console.log("选中文本触发")
            }
            // 内容改变时触发
            but[1].onchange = function(){
                console.log("内容改变触发")
            }    
            // 一下方法跟上面使用方法类似       
            // onreset 重置时触发
            // ondblclick 双击时触发
            // on mouse over：鼠标指针移动到指定的对象上时发生。
            // onmouseout：鼠标指针移出指定的对象时发生。
            // onmousedown：鼠标按键被按下时发生。
            // onmouseup：鼠标按键被松开时发生。
            // onresize:窗口在跳动大小时触发
            // onsubmit:事件在表单的确认按钮被点击时触发
        }
    </script>
</body>