JavaScript之DOM对象（Event事件）

文章目录

一、Event事件汇总
二、用法案例
- 1、serche搜索框
- 2、onload加载
- 3、事件绑定——标签内
- 4、事件绑定——JS接函数
- 5、onsubmit表单提交
- 6、事件传播

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

一、Event事件汇总

onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。

二、用法案例

1、serche搜索框

用到的事件

onfocus 元素获得焦点。 //练习：输入框
onblur 元素失去焦点。应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

参考代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="search" value="请输入用户名：" onfocus="func1()" onblur="func2()"><script>var ele= document.getElementById("search");  //获取标签function func1(){if(ele.value=="请输入用户名："){ele.value="";  //得到焦点时就将值清空}}function func2(){if(!ele.value.trim())  //或者ele.value.trim()==undefined,trim()表示去掉空格{ele.value="请输入用户名：";  //失去焦点，即点击其他地方就将值变为初始状态}}
</script>
</body>
</html>

2、onload加载

用到的事件

onload 一张页面或一幅图像完成加载。
onload 属性开发中只给 body元素加；
这个属性的触发标志着页面内容被加载完成；
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性。

参考代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function func(){var ele=document.getElementsByClassName("div1")[0];  //获取div1标签console.log(ele.innerHTML);}</script>
</head>
<body onload="func()">
<div class="div1">I am DIV</div></body>
</html>

3、事件绑定——标签内

直接绑定在标签内

<p id="p1" onclick="func(this)">P标签</p>

这里的this参数可以代表p标签本身，因此在对应的func函数中，可以用一个形参来代表整个p标签进行其他操作

 function func(that){//此that就代表了p标签本身，也不需要重新获取了// console.log(that);  //打印p标签本身console.log(that.previousElementSibling);  //打印p标签前面的兄弟（p标签前面的标签）console.log(that.parentNode);  //打印p标签的上级标签}

4、事件绑定——JS接函数

比如有这样一堆div标签：

 <div class="div2">DIV2</div><div class="div2">DIV2</div><div class="div2">DIV2</div><div class="div2">DIV2</div><div class="div2">DIV2</div>

先获取class名为div2的标签：

var ele=document.getElementsByClassName("div2");

然后因为原生JS不会去遍历获得的对象，所以如果获得了多个对象需要手动来遍历：

    for(var i=0; i<ele.length; i++){//通过对象去绑定事件，来触发函数ele[i].onclick=function(){alert("哈哈哈");}}

当然如果觉得遍历起来麻烦，也可以直接获取全部div标签（需要准确定位时此法不推荐），就不需要手动遍历了，一个下标就代表了一群标签：

 var ele=document.getElementsByTagName("div");  //找所有的div标签ele[0].onclick=function(){alert("哈哈");}

5、onsubmit表单提交

用到的事件

onkeydown 某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onsubmit 确认按钮被点击的效果，将表单提交给服务端。当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

参考代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="" id="form1"><input type="text" name="user"  placeholder="username"><input type="submit" value="提交" id="sub">
</form><script>var ele=document.getElementById("form1");// ele.οnsubmit=function(e){//     alert("已提交！");//     //若返回一个false就不会发送给服务端，而默认返回的是true//     // return false;//     //或者使用事件e来提交//     e.preventDefault();// }ele.onkeydown=function(){alert("已提交！");//若返回一个false就不会发送给服务端，而默认返回的是true// return false;//或者使用事件e来提交e.preventDefault();}</script>
</body>
</html>

6、事件传播

意思就是内层标签与外层标签的相互影响，可以通过阻止外层事件传播到内层事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.outer{width:250px;height: 250px;background-color: #2daebf;}.inner{width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="outer" onclick="func2()"><div class="inner" onclick="func1()"></div>
</div><script>var ele=document.getElementsByClassName("inner")[0];  //获取inner标签ele.onclick=function(e){alert("inner被触发!");e.stopPropagation();  //阻止事件向外部div传播}function func2(){alert("outer被触发！");}</script>
</body>
</html>

这样点击深蓝色就只会出现“inter被触发”，不会受外部的影响而出现“outer被触发”