JavaScript之DOM对象(Event事件) 比眉伴天荒 2023-03-13 05:20 52阅读 0赞 ### 文章目录 ### * * * * 一、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> ![1][] ##### 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> ![2][] ##### 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> ![3][] 这样点击深蓝色就只会出现“inter被触发”,不会受外部的影响而出现“outer被触发” [1]: /images/20230312/c0f99ec0fb954a26a95aeb093a04d664.png [2]: /images/20230312/4709bf84d64f4c59a8b54bbf2c00174f.png [3]: /images/20230312/81605e952d2649de97b13ca6bea8133d.png
还没有评论,来说两句吧...