PYTHON第五十七天笔记11.14
自记录笔记：
事件委派，只针对子标签，对父标签无效。
onchange事件：多用于select标签。
Event对象：是浏览器封装的操作系统的具体信息。
overflow：scroll
写JS：确定标签，确定事件。
Jquery所有代码都是js实现。
事件委派：
（只对子元素触发事件生效，而对父元素触发事件不生效。）
事件委托的原理依赖于事件冒泡，可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。
使用事件委托的优点：
1、操作子元素时不用一一遍历，可以根据事件触发的对象而进行相应操作，提高效率。
2、将事件委托给父元素后，动态创建（删除）的子元素不用重新绑定（解绑）事件，实现了元素与事件的同步更新。
课堂笔记：
引入文件tree：
dist：
css、fonts、js
一、表格操作
<!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++){ // eles_item[i].checked=false if(eles_item[i].checked){ eles_item[i].checked=false } else { eles_item[i].checked=true } } } </script> </body> </html>
二、表格添加操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="dist/css/bootstrap.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> <script src="dist/js/bootstrap.js"></script> <style> .back{ height: 2000px; background-color: wheat; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: gray; opacity: 0.5; } .model{ position: fixed; top: 100px; left: 300px; width: 500px; height: 300px; background-color: white; /*margin-top: -150px;*/ /*margin-left: -250px;*/ } .hide{ display: none; } </style> </head> <body> <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-user"></span> <div class="row"> <div class="col-md-2"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 菜单1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p>111</p> <p>111</p> <p>111</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 菜单2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>222</p> <p>222</p> <p>222</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 菜单3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>333</p> <p>333</p> <p>333</p> </div> </div> </div> </div> </div> <div class="col-md-6"> <button class="show">添加</button> <table class="table table-bordered table-hover" > <thead> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>操作</th> </tr> </thead> <tbody id="t1"> <tr> <td>张三</td> <td>12</td> <td>s7</td> <td> <button class="del">删除</button> <button class="edit">编辑</button> </td> </tr> <tr> <td>张三2</td> <td>1223</td> <td>s7</td> <td> <button class="del">删除</button> <button class="edit">编辑</button> </td> </tr> <tr> <td>张三3</td> <td>122</td> <td>s7</td> <td> <button class="del btn btn-danger">删除</button> <button class="edit btn btn-success">编辑</button> </td> </tr> </tbody> </table> </div> </div> <div class="shade hide item"></div> <div class="model hide item"> <form action=""> <p>姓名<input type="text" class="addInfo"></p> <p>年龄<input type="text" class="addInfo"></p> <p>班级<input type="text" class="addInfo"></p> <p> <input type="button" value="取消" class="cancel"> <input type="button" value="确认" id="addBtn"> </p> </form> </div> <script> var eles=document.getElementsByClassName("del"); // 删除记录 事件委派 t1.addEventListener("click",function (e) { // console.log(e.target); if(e.target.className=="del"){ var t1=document.getElementById("t1"); // 父节点 t1.removeChild(e.target.parentElement.parentElement) } else if(e.target.className=="edit"){ alert(12321) } }); // for(var i=0;i<eles.length;i++){ // eles[i].onclick=function () { // // 父节点.removeChild(子节点) // // var t1=document.getElementById("t1"); // 父节点 // console.log(t1); // console.log(this.parentElement.parentElement); // // t1.removeChild(this.parentElement.parentElement) // // } // // } // 绑定添加记录事件 var ele_add=document.getElementById("addBtn"); ele_add.onclick=function () { // 隐藏model ele_shade.classList.add("hide"); ele_model.classList.add("hide"); // 组装tr var ele_tr=document.createElement("tr"); // <tr></tr> var eles_input=document.getElementsByClassName("addInfo"); for(var i=0;i<eles_input.length;i++){ var ele_td=document.createElement("td"); // <td></td> ele_td.innerHTML=eles_input[i].value; ele_tr.appendChild(ele_td) } var ele_button=document.createElement("button"); var ele_td_func=document.createElement("td"); ele_button.innerText="删除"; ele_button.className="del"; ele_td_func.appendChild(ele_button); ele_tr.appendChild(ele_td_func); console.log(ele_tr); t1.appendChild(ele_tr) } </script> <script> var ele_show=document.getElementsByClassName("show")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; // 显示遮罩层 ele_show.onclick=function () { // ele_shade.classList.remove("hide"); // ele_model.classList.remove("hide"); var eles=document.getElementsByClassName("item"); for(var i=0;i<eles.length;i++){ eles[i].classList.remove("hide") } }; // 隐藏遮罩层 ele_cancel.onclick=function () { ele_shade.classList.add("hide"); ele_model.classList.add("hide"); } </script> </body> </html>
三、事件委派
<!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) { // console.log(this.innerText) // console.log(e.target); console.log(e.target.className); if(e.target.className=="c3"){ alert(e.target.innerHTML) } }); // var ele_lis=document.getElementsByTagName("li"); // for(var i=0;i<ele_lis.length;i++){ // ele_lis[i].onclick=function () { // alert(this.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>
四、focus事件
<!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> var ele_p=document.getElementById("p1"); ele_p.ondblclick=function () { alert(this.innerHTML) }; var ele_inp=document.getElementById("inp1"); ele_inp.onfocus=function () { this.value=""; }; ele_inp.onblur=function () { if(!this.value.trim()){ this.value="请输入用户名" } } </script> </body> </html>
五、onchange事件
<!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>
六、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>
七、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>
八、onselect
<!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) } }; // onselect 事件 // ele.onselect=function () { // alert(1234) // } </script> </body> </html>
九、onsubmit
<!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>
十、课堂图片：
1
2
3
4
