事件

JavaScript事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，比如用户的点击某个链接、在文本框中输入文本等。

绑定对应的事件

方法一：直接在元素上面添加一个事件属性

语法：

方法二：在js中找到dom添加事件

语法：

方法三：使用addEventListener

语法：

注意：

①第一个参数表示事件类型，不要使用on。

②第二个参数表示事件触发的函数。

常用的事件

鼠标事件

注意：

如果绑定事件的dom元素存在子元素，比如div嵌套
mouseover/mouseout 是在进入子元素，会再次触发事件。
mouseenter/mouseleave 在进入子元素，不会再次触发事件。

表单事件

键盘事件

窗口事件

综合案例

页面打开时，文本框内默认为hello，当光标聚焦到文本框时，默认文本hello消失，

文本框后面出现“至少6-12位”的用户名输入需求，且输入的用户名字体颜色为红色。

分析：

页面初始化后：
将出现文本框<input type="text"/>以及<span>标签用于输出聚焦后的内容，并且其属性value的值为hello。

当文本框获取聚焦后：
文本框中有获取聚焦事件onfocus，事件里将<span>标签中添加文本“至少6-12位”，且将文本框的css样式color值为red，且将属性value值为空。

代码展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="../课堂/1.html" method="get" >
            用户名：<input type="text" value="hello" id='name'/><span></span>
        </form>
    </body>
    <script>
        document.querySelector("#name").onfocus=function(){
            let a = document.querySelector("#name");
            a.value="";
            a.nextElementSibling.innerHTML='至少6-12位';
            a.style.color='red';
        }
    </script>
</html>