事件
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>
标签:12,JavaScript,文本框,value,事件,hello From: https://www.cnblogs.com/gzyhrc/p/17927890.html