Day 57 前端学习笔记：DOM对象（下）—— DOM 事件
*Part 1: onload
属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
Part 2: onclick 单击事件
<input type="text" id="inp1" value="请输入用户名"> <script> var ele_p=document.getElementById("p1"); ele_p.onclick=function () { alert(this.innerHTML) };
Part 3: ondblclick 双击事件
<input type="text" id="inp1" value="请输入用户名"> <script> var ele_p=document.getElementById("p1"); ele_p.ondblclick=function () { alert(this.innerHTML) };
Part 4: onsubmit（return false 可以阻止表单提交）
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <form action="" id="form"> <p><input type="text" id="inptext"><span class="error"></span></p> <input type="submit"> </form> <script> function foo() { ele_error.innerText=""; } var ele_form=document.getElementById("form"); var ele_inptext=document.getElementById("inptext"); var ele_error=document.getElementsByClassName("error")[0]; ele_form.onsubmit=function () { var inp_value=ele_inptext.value; if(inp_value.length>5 && inp_value.length<12){ } else { ele_error.innerText="用户名的长度有问题"; setTimeout(foo,3000); return false // 阻止默认事件 } } </script> </body> </html>
*Part 5: onselect
选中输入框中的内容时触发，没什么用
<input type="text"> <script> var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){ alert(123); } </script>
Part 6: onfocus 光标聚焦事件
<!DOCTYPE html> <head>
<html lang="en">
</head>
<body>
<input type="text" id="inp1" value="请输入用户名">
</body>
<script>
var ele_inp=document.getElementById("inp1");
ele_inp.onfocus=function () {
this.value="";
};
</script>
Part 7: onblur 光标失焦事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="p1">PPPP</p> <input type="text" id="inp1" value="请输入用户名"> <script>
Part 8: onkeydown 表单input回车事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1"> <button onclick="alert(111)">click</button> <script> var ele=document.getElementById("i1"); // onkeydown事件 ele.onkeydown=function (event) { console.log(event.keyCode); if(event.keyCode==13){ alert(123) } };
Part 9: onchange 事件（option可以给长度定值，以达到切换后清空或只留下N个残留option的效果）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="pro" id="s1"> <option value="">请选择省份</option> <option value="1">河南省</option> <option value="2">湖南省</option> <option value="3">海南省</option> </select> <select name="city" id="s2"> <option value="">请选择城市</option> </select> <script> var data={"1":["洛阳","信阳","开封"],"2":["长沙","张家界"],"3":["三亚","海口"]}; var ele_s1=document.getElementById("s1"); var ele_s2=document.getElementById("s2"); ele_s1.onchange=function () { //console.log(this.value); var citys=data[this.value]; //console.log(citys); console.log(ele_s2.children.length); console.log(ele_s2.options.length); ele_s2.options.length=1; // ele_s2.children.length=1; for(var i=0;i<citys.length;i++){ var city_val=citys[i]; var ele_option=document.createElement("option") ; // <option></option> ele_option.innerHTML=city_val; //console.log(ele_option); ele_s2.appendChild(ele_option) } } </script> </body> </html>
Part 10: onmouse 鼠标悬浮事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 300px; height: 300px; background-color: #2459a2; } </style> </head> <body> <div class="c1"> </div> <script> var ele=document.getElementsByClassName("c1")[0]; ele.onmouseover=function () { this.style.backgroundColor="red" }; // ele.onmouseout=function () { // this.style.backgroundColor="#2459a2" // }; ele.onmouseleave=function () { this.style.backgroundColor="#2459a2" } // ele.onmousemove=function (event) { // var x=event.clientX; // var y=event.clientY; // console.log(x,y) // } </script> </body> </html>
Part 11: onmouseleave 鼠标离开事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width: 300px; } #title{ background-color: darkblue; color: white; line-height: 30px; text-align: center; } #list .item1{ background-color: gray; line-height: 20px; } #list .item2{ background-color: #f0ad4e; line-height: 20px; } #list .item3{ background-color: green; line-height: 20px; } .hide{ display: none; } </style> </head> <body> <p>先看下使用mouseout的效果:</p> <div id="container"> <div id="title">使用了mouseout事件↓</div> <div id="list" class="hide"> <div class="item1">第一行</div> <div class="item2">第二行</div> <div class="item3">第三行</div> </div> </div> <script> var ele_title=document.getElementById("title"); var ele_list=document.getElementById("list"); var ele_container=document.getElementById("container"); // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 ele_title.onmouseover=function () { ele_list.classList.remove("hide"); }; // ele_container.onmouseout=function () { // ele_list.classList.add("hide"); // }; ele_container.onmouseleave=function () { ele_list.classList.add("hide"); } </script> </body> </html>
* Part 12: onmouseout 鼠标离开（子元素）事件
Part 13: 事件委派（addEventListener）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul class="outer"> <li class="c1">111</li> <li class="c2">222</li> <li class="c3">333</li> </ul> <button>add</button> <script> // 事件委派 var ele_ul=document.getElementsByClassName("outer")[0]; ele_ul.addEventListener("click",function (e) { alert(e.target.innerHTML) }); ele_buton=document.getElementsByTagName("button")[0]; ele_outer=document.getElementsByClassName("outer")[0]; ele_buton.onclick=function () { var li=document.createElement("li"); li.innerHTML="444"; ele_outer.appendChild(li) } </script> </body> </html>
Part 14: 表格操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="select_all">全选</button> <button class="select_reverse">反选</button> <button class="cancel">取消</button> <hr> <table class="server_table" border="2px" cellspacing="2px"> <tr> <td><input type="checkbox" class="item"></td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>444</td> <td>444</td> <td>444</td> </tr> </table> <script> var ele_select_all=document.getElementsByClassName("select_all")[0]; var ele_select_reverse=document.getElementsByClassName("select_reverse")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var eles_item=document.getElementsByClassName("item"); ele_select_all.onclick=function () { for (var i=0;i<eles_item.length;i++){ eles_item[i].checked=true } }; ele_cancel.onclick=function () { for (var i=0;i<eles_item.length;i++){ eles_item[i].checked=false } }; ele_select_reverse.onclick=function () { for (var i=0;i<eles_item.length;i++){ if(eles_item[i].checked){ // eles_item[i].checked 返回该item是否被勾选中 eles_item[i].checked=false } else { eles_item[i].checked=true } } } </script> </body> </html>
浙公网安备 33010602011771号