js鼠标/键盘/UI/表单事件

沐沐185

已于 2022-06-30 19:58:01 修改

阅读量215

点赞数

分类专栏： JS 文章标签： javascript 前端

于 2022-06-30 19:55:32 首次发布

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125546813

版权

JS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中的事件，包括页面加载、浏览器窗口大小改变、用户点击等常见事件。详细讲解了三种事件绑定方法：内联绑定、addEventListener和传统方式，并通过实例演示了表单事件如onfocus、onchange、onsubmit的使用。此外，还探讨了键盘事件（如onkeydown、onkeyup）和UI事件（如onload、onresize），并给出了相关代码示例。

摘要由CSDN通过智能技术生成

事件

事件是文档或者浏览器窗口中发生的，特定的交互瞬间

典型事例：

页面加载完毕，触发load事件

浏览器窗口放大或缩小，触发resize事件

用户单击元素，触发click事件

一、绑定事件的方法：

1. var btn=document.getElementById("btn");

btn.οnclick=function(){

alert("我是第一种绑定事件的方法");

}

注意：这种绑定事件的办法。只能绑定一个相同名称的事件，如果绑定多个相同事件，最后一个事件会覆盖前面的绑定，只执行最后一个事件；

2.btn.addEventListener("click",function(){

alert("我是第二种绑定事件的方法");

},false)

注意：这种添加事件监听器的方法，可以绑定多个相同名称的事件，并且不会相互影响。

3.function clickFn(){

alert("我是第三种绑定事件的方法");

}

这种方法是在行内添加一个事件，事件调用函数 clickFn()，来执行事件。

二、表单事件：由 HTML 表单内的动作触发的事件

事件名	描述
onfocus	元素获取焦点
onblus	元素失去焦点
onchange	用户改变域的内容时触发
onreset	表单重置时触发
onsubmit	表单提交时触发

注意：表单重置、表单提交事件不支持input标签，支持form标签，是form来触发reset\submit事件，不是input触发

<form action="">
        user:
        <input type="text" name="name" id="">
        <input type="radio" name="" id="">男
        <input type="radio" name="" id="">女
        <select name="" id="">
            <option value="1">江苏</option>
            <option value="2">安徽</option>
        </select>
        <input type="reset">
        <input type="submit">
    </form>
    <script>
        var select = document.querySelector("select");
        select.addEventListener("change", function () {
            console.log("你的内容发生变化了把");
        })

        var form = document.querySelector("form");
        var reset = document.querySelector("input[type = reset]");
        reset.onreset = function () { //input无法触发onreset
            console.log("表单被重置了");
        }
        form.onreset = function () { //form触发onreset
            console.log("表单被重置了");
        }

        form.onsubmit = function () { //form触发onsubmit
            console.log("表单被提交了");
        }
    </script>

三、键盘事件：键盘事件就是对键盘操作触发的事件

事件名	描述
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下并释放一个键时发生
onkeyup	某个键盘的键被松开
oninput	是在用户输入时触发，一般用的多一些；

四、UI事件：UI（User Interface，用户界面）事件指的是那些不一定与用户操作有关的事件

事件名	描述
onload	某个页面或图像被完成加载
onresize	窗口或框架被调整尺寸
onscroll	当文档被滚动时发生的事件

window调用界面事件；

<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>Document</title>
    <script>
        //文档是从上到下执行的，所以在执行程序到 console.log(document.querySelector("h1"));
        //h1标签还没有被加载，所以无法获取到h1
        console.log(document.querySelector("h1")); //-->返回null


        /* onload 某个页面或者图像被完成加载 */
        //onload 是在页面加载完成时 再执行获取程序，所以可以获取到h1
        window.onload = function () {
            console.log(document.querySelector("h1")); //-->返回<h1>123</h1>
        }
        /* onresize 窗口或者框架被调整时触发 */
        window.onresize = function () {
            console.log("窗口大小变化了");
        }

    </script>
</head>
<body>
    <!-- onload 某个页面或者图像被完成加载 -->
    <h1>123</h1>
</body>