第九周第三天笔记

2018-09-21 本文已影响0人果木山

事件

1 事件流

冒泡：从该元素开始由里向外触发一类事件，事件对象中的事件源为该元素，触发同一类事件，在子级父级祖级中拿到的事件源一样，均为被触发元素；

阻止冒泡：e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
关于冒泡的运用：典型的是事件委托
- 事件委托：将事件添加到最高级元素上，事件中获取事件源的属性，当触发某元素上的事件时，就会在最高级中获取事件源，也就是该元素；

实例1：在多层嵌套的div中，点击哪个元素，就弹出哪个元素的class名；

方法：
- 1）遍历div，给每个元素添加点击事件，然后弹出class名，但是会出现冒泡事件，所以必须阻止冒泡事件
- 2）事件委托

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>冒泡与阻止冒泡</title>
     <style>
         div{
             padding: 100px;
             font-size: 50px;
         }
         .div1{
             background-color: red;
         }
         .div2{
             background-color: blue;
         }
         .div3{
             background-color: green;
         }
     </style>
 </head>
 <body>
 <div class="div1">div1
     <div class="div2">div2
         <div class="div3">div3</div>
     </div>
 </div>
 <script>
     //需求：点击谁，弹出谁的class名
     var oDiv1=document.getElementsByTagName("div")[0];
     var aDiv=document.getElementsByTagName("div");
     //第一种方法：遍历div，给每个元素添加点击事件，然后弹出class名，要阻止冒泡事件
     for(var i=0; i<aDiv.length; i++){
         aDiv[i].onclick=function (e) {
             alert(this.className);
             //会存在冒泡事件，所以要阻止冒泡
             e.stopPropagation? e.stopPropagation():e.cancelBubble=true;
         }
     }
     //第二种方法：事件委托，委托给最高级，通过事件源获取
     //由于事件存在冒泡特性，所以在触发某元素的事件时，同时会触发其父级和祖级的该类事件，都传入同一个事件对象，里面的事件源都是触发的某元素，所以只要在最高级上添加点击事件，里面获取事件源的class名即可
     oDiv1.onclick=function (e) {
         e=e||window.event;
         e.target=e.target||e.srcElement;
         alert(e.target.className);
     }
 </script>
 </body>
 </html>

实例2：在body元素中有多个div元素，在点击里面的a链接后，就删除该a元素的父级div；

方法：事件委托给最高级body元素，给body添加点击事件，然后在事件匿名函数中获取事件源，然后删除事件源的父级div;

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>事件委托</title>
     <style>
         div{
             width: 100px;
             height: 100px;
             background-color: lightseagreen;
             float: left;
             margin: 5px;
         }
         div a{
             color: red;
             text-decoration: none;
             font-weight: bold;
         }
     </style>
 </head>
 <body>
 <!--<div>
     <a href="javascript:void(0);">点吧</a>
 </div>-->
 <script>
     for(var i=0; i<20; i++){
         var odiv=document.createElement("div");
         odiv.innerHTML=`<a href="javascript:void(0);">${i}点吧</a>`;
         document.body.appendChild(odiv);
     }
     //事件委托，给最高级元素添加事件
     //当点击a标签时，就会触发a的点击事件，同时由里向外触发父级div和祖级body的点击事件，然后每个事件中拿到的事件对象上的target属性值都是a元素，即事件源都是a元素；
     //通过判断事件源来决定删除哪个a元素的父级；
     document.body.onclick=function (e) {
         e=e||window.event;
         e.target=e.target || e.srcElement;
         if(e.target.tagName.toLowerCase()==="a"){
             this.removeChild(e.target.parentNode);
         }
     }
 </script>
 </body>
 </html>

注：某个元素事件发生，不用给其添加代码，只要在它身上触发该事件就行，添加代码，只不过给其设置一个能够显现出来的动作而已，不添加，也会触发；

onmouseenter、onmouseleave、onmouseover、onmouseout四者关系解读

相同点：都是添加鼠标移入移出事件
不同点：onmouseover和onmouseout中会存在冒泡事件；onmouseenter和onmouseleave中不存在冒泡事件；

实例解读：

需求：当鼠标移动到div元素身上时，p元素显示，显示的时候，移动到p元素身上，仍然显示，移动到div和p元素之外的位置，p元素再隐藏；
方法：
- 使用onmouseenter与onmouseleave设置：当光标从div上移出到p元素上时，没有打印out,也没有再次打印in,意思是两个事件都没有被触发，指的就是当移动到子级身上时，根本不算移出；所以给oDiv元素添加onmouseenter事件，指的是当光标移入到它或者是它的子级，都会触发事件；不是冒泡事件，而是将oDiv和它的子级作为了一个整体；
- 使用onmouseover与onmouseout设置：使用onmouseover和onmouseout也会实现需求，但是实现的过程不同，当光标移入div会触发onmouseover事件，然后打印in，当光标从div元素上移出并立刻进入p元素时，此时发生了两个过程，移出div时，会触发div的onmouseout事件，打印out，并使p隐藏；然后迅速进入p元素，此时触发p元素的onmouseover事件，但是没有动作，会通过冒泡事件，连带父级div触发onmouseover事件，所以再次打印in,然后p显示；所以肉眼没有发现p被隐藏，又被显示。当移出p元素时也是通过冒泡事件，将父级onmouseout事件触发，进而打印out，使p隐藏；

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>onmouseenter与onmouseleave解读</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .div1{
             width: 200px;
             height: 50px;
             background-color: lightseagreen;
             position: relative;
             margin: 20px auto;
         }
         .div1 p{
             width: 500px;
             height: 300px;
             position: absolute;
             right: 0;
             top: 50px;
             background-color: lightpink;
             display: none;
         }
     </style>
 </head>
 <body>
 <div class="div1">
     <p></p>
 </div>
 <script>
     //需求：当鼠标移动到div元素身上时，p元素显示，显示的时候，移动到p元素身上，仍然显示，移动到div和p元素之外的位置，p元素再隐藏；
     var oDiv=document.getElementsByTagName("div")[0];
     var oP=document.getElementsByTagName("p")[0];
     //1 使用onmouseenter与onmouseleave设置
     oDiv.onmouseenter=function () {
         console.log("in");
         oP.style.display="block";
     };
     oDiv.onmouseleave=function () {
         console.log("out");
         oP.style.display="none";
     };
     //当光标移入div，再移入p，再移出p，整个过程中打印结果：in-out；
     //2 使用onmouseover与onmouseout设置
     oDiv.onmouseover=function () {
         console.log("in");
         oP.style.display="block";
     };
     oDiv.onmouseout=function () {
         console.log("out");
         oP.style.display="none";
     }
     //当光标移入div，再移入p，再移出p，整个过程中打印结果：in-out-in-out
 </script>
 </body>
 </html>

冒泡的问题：给父级添加事件后，在子级上触发，还会触发父级的事件，会重复触发，造成性能不好，还会造成代码混乱；
- 解决方法：在子级中添加相同事件，并在事件中阻止冒泡；代码：e.stopPropagation?e.stopPropagation():e.cancelBubble=true;；
- 通过关联元素获取到子级，然后判断阻止，此方法只能解决代码混乱问题，不会进行性能优化，父级事件还会因子级事件触发而触发，只不过是在父级事件中阻断了一些代码的执行，避免重复设置，造成混乱；
- 在父级事件函数中，通过事件对象获取事件源，通过事件源来筛选触发元素，不能阻止冒泡事件发生，但是可以阻止，当从子级触发时，不会再执行父级函数体内的代码；

冒泡的问题及解决问题的实例：

实例1：当鼠标滑到div上时，新建一个p元素，让其跟随光标移动，当光标移出div后，p元素消失；

问题：当鼠标移动到子级p身上的时候，会触发鼠标事件，通过冒泡触发父级身上的鼠标事件，进而再新建一个p元素，进而出错；
解决方法：1）将子级p元素中的冒泡事件阻止，这样父级就不会被关联触发；2）利用对象事件上的属性获取添加事件元素的关联元素，判断当包含时，则阻止程序执行，进而不会被影响；3）利用onmouseenter和onmouseleave添加事件；
注意：鼠标移动事件太灵敏，所以需要在定位数值设置时使光标与定位元素有一段距离；
代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>实例2</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .div{
             width: 500px;
             height: 350px;
             background-color: red;
             margin: 20px auto;
             position: relative;
         }
         .div p{
             width: 50px;
             height: 50px;
             background-color: blue;
             position: absolute;
         }
     </style>
 </head>
 <body>
 <div class="div"></div>
 <script>
     var oDiv=document.getElementsByTagName("div")[0];
     var oS=null;
     //方法1：将子级p元素中的冒泡事件阻止，这样父级就不会被关联触发；
     oDiv.onmouseover=function () {
         oS=document.createElement("p");
         oS.onmouseover=function (e) {
             //阻止冒泡事件
             e=e||window.event;
             e.stopPropagation? e.stopPropagation():e.cancelBubble=true;
         };
         this.appendChild(oS);
     };
     oDiv.onmousemove=function (e) {
         e=e||window.event;
         oS.style.left=e.clientX-this.offsetLeft-this.clientLeft+5+"px";
         oS.style.top=e.clientY-this.offsetTop-this.clientTop+5+"px";
     };
     oDiv.onmouseout=function () {
         oS.onmouseout=function (e) {
             //阻止冒泡事件
             e=e||window.event;
             e.stopPropagation? e.stopPropagation():e.cancelBubble=true;
         };
         this.removeChild(oS);
     }
     //方法2：利用对象事件上的属性获取添加事件元素的关联元素，判断当包含时，则阻止程序执行，进而不会被影响；
    oDiv.onmouseover=function (e) {
         e=e||window.event;
         //关联元素的获取，在事件对象上
         var oMo=e.fromElement || e.realtedTarget;
         //判断是否包含关联元素，包含则阻止程序执行；
         if(this.contains(oMo)) return;
         oS=document.createElement("p");
         this.appendChild(oS);
     };
     oDiv.onmousemove=function (e) {
         e=e||window.event;
         oS.style.left=e.clientX-this.offsetLeft-this.clientLeft+8+"px";
         oS.style.top=e.clientY-this.offsetTop-this.clientTop+8+"px";
     };
     oDiv.onmouseout=function (e) {
         e=e||window.event;
         var oMo=e.toElement || e.realtedTarget;
         if(this.contains(oMo)) return;
         this.removeChild(oS);
     }
     //方法3：使用onmouseenter和onmouseleave
     oDiv.onmouseenter=function () {
         oS=document.createElement("p");
         this.appendChild(oS);
     };
     oDiv.onmousemove=function (e) {
         e=e||window.event;
         oS.style.left=e.clientX-this.offsetLeft-this.clientLeft+10+"px";
         oS.style.top=e.clientY-this.offsetTop-this.clientTop+10+"px";
     };
     oDiv.onmouseleave=function () {
         this.removeChild(oS);
     }
 </script>
 </body>
 </html>

实例2：当鼠标移动到div元素身上时，p元素显示，显示的时候，移动到p元素身上，仍然显示，移动到div和p元素之外的位置，p元素再隐藏；

问题：当鼠标移动到子级p元素身上时，会触发p元素的鼠标事件，进而再次触发父级div的鼠标事件，这样就会重复触发，性能不好，所以要阻止子级的冒泡事件
解决方法：1）在子级中阻止冒泡事件，但是需要在子级中添加显示隐藏；2）通过对象事件获取关联元素；3）设置onmouseenter和onmouseleave事件，能够解决性能问题，事件只触发一次
注意：关联元素的方法可取，但是没有解决性能问题，因为滑到子级上，还是会触发父级的鼠标事件，没有完成性能优化，此处要注意的是，显示隐藏代码一定要设置在判断元素之后；在父级事件中代码执行前，判断关联元素的目的：是阻止父级事件中代码的执行，不会阻止冒泡事件的发生；
代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>冒泡问题解读</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .div1{
             width: 200px;
             height: 50px;
             background-color: lightseagreen;
             position: relative;
             margin: 20px auto;
         }
         .div1 p{
             width: 500px;
             height: 300px;
             position: absolute;
             right: 0;
             top: 50px;
             background-color: lightpink;
             display: none;
         }
     </style>
 </head>
 <body>
 <div class="div1">
     <p></p>
 </div>
 <script>
     //需求：当鼠标移动到div元素身上时，p元素显示，显示的时候，移动到p元素身上，仍然显示，移动到div和p元素之外的位置，p元素再隐藏；
     //问题：当鼠标移动到子级p元素身上时，会触发p元素的鼠标事件，进而再次触发父级div的鼠标事件，这样就会重复触发，性能不好，所以要阻止子级的冒泡事件
     var oDiv=document.getElementsByTagName("div")[0];
     var oP=document.getElementsByTagName("p")[0];
     //方法1：在子级中阻止冒泡事件，但是需要在子级中添加显示隐藏；
     oDiv.onmouseover=function () {
         console.log("in");
         oP.style.display="block";
         oP.onmouseover=function (e) {
             //阻止冒泡但是要重新设置显示隐藏；
             this.style.display="block";
             e=e||window.event;
             //阻止子级的冒泡事件
             e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
         }
     };
     oDiv.onmouseout=function () {
         console.log("out");
         oP.style.display="none";
         oP.onmouseout=function (e) {
             this.style.display="none";
             e=e||window.event;
             e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
         }
     }
     //方法2：通过对象事件获取关联元素
     //方法可取但是没有解决性能问题，因为滑到子级上，还是会触发父级的鼠标事件，没有完成性能优化，此处要注意的是，显示隐藏代码一定要设置在判断元素之后
     //在父级事件中代码执行前，判断关联元素的目的：是阻止父级事件中代码的执行，不会阻止冒泡事件的发生；
     oDiv.onmouseover=function (e) {
         console.log("in");
         e= e||window.event;
         var oMo=e.fromElement || e.relatedTarget;
         if(this.contains(oMo)) return;
         console.log(2);
         oP.style.display="block";
     };
     oDiv.onmouseout=function (e) {
         console.log("out");
         e= e||window.event;
         var oMo=e.toElement || e.relatedTarget;
         if(this.contains(oMo)) return;
         console.log(1);
         oP.style.display="none";
     }
     //打印结果：从进入div,在出来进入p，然后再从p移出这个过程的打印结果为：in-2-out-in-out-1;
     //方法3：设置onmouseenter和onmouseleave事件，能够解决性能问题，事件只触发一次
     oDiv.onmouseenter=function () {
         console.log("in");
         oP.style.display="block";
     };
     oDiv.onmouseleave=function () {
         console.log("out");
         oP.style.display="none";
     }
 </script>
 </body>
 </html>

实例3：当鼠标移上div元素身上时，p显示；移出div元素后，p隐藏；强调：移出到任何位置，p都隐藏，移动p元素身上，也必须隐藏；

问题：当鼠标移动到子级p元素身上时，会触发p元素的鼠标事件，进而再次触发父级div的鼠标事件，这样就会重复触发，性能不好，同时当鼠标移动到子级p元素身上的时候，子级不会隐藏，所以要阻止子级的冒泡事件；
解决方法：1）在子级元素身上绑定同行为事件，然后在事件函数中阻止冒泡发生；2）在父级元素中，通过事件对象获取事件源，然后判断事件源的nodeName来获取元素TagName名，判断是否为父级元素标签，若不是，则阻止代码执行；
代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>需求2</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .div1{
             width: 200px;
             height: 50px;
             background-color: lightseagreen;
             position: relative;
             margin: 20px auto;
         }
         .div1 p{
             width: 500px;
             height: 300px;
             position: absolute;
             right: 0;
             top: 50px;
             background-color: lightpink;
             display: none;
         }
     </style>
 </head>
 <body>
 <div class="div1">
     <p></p>
 </div>
 <script>
     var oDiv=document.getElementsByTagName("div")[0];
     var oP=document.getElementsByTagName("p")[0];
     //方法1：在子级事件函数中阻止冒泡发生；
     oDiv.onmouseover=function () {
         console.log("in");
         oP.style.display="block";
         oP.onmouseover=function (e) {
             e=e||window.event;
             //阻止子级的冒泡事件
             e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
         }
     };
     oDiv.onmouseout=function () {
         console.log("out");
         oP.style.display="none";
         oP.onmouseout=function (e) {
             e=e||window.event;
             e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
         }
     }；
     //方法2：在父级元素中判断事件源
     oDiv.onmouseover=function(e){
         e=e || window;
         e.target=e.target || e.srcElement;
         if(e.target.nodeName.toLowerCase!=="div") return;
         oP.style.display="block";
      };
      oDiv.onmouseout=function(e){
         e=e || window;
         e.target=e.target || e.srcElement;
         if(e.target.nodeName.toLowerCase!=="div") return;
         oP.style.display="none";
      };
 </script>
 </body>
 </html>

购物车点击版实例

需求：当点击div元素及p元素时，p元素显示，点击除二者以外的任何区域都让p隐藏
思路:如果一个父级容器下添加多个事件，那么就将事件委托给父级容器，通过判断事件源来进行相应的操作；
方法：1）通过开关思想，控制隐藏与显示，但是会存在一个问题，在第二个判断中如果不设置bOk=true，就会出现，第一次点击div后，p显示，然后点击外面，p消失，但此时的bOk为false,再次点击div时，会走else语句，不会显示；所以必须设置bOk=true; 2）通过判断p的行间样式是否为block来控制显示和隐藏；3）通过给父级容器添加点击事件，然后通过事件对象来获取事件源，判断事件源的nodeName是否为div和p的tagName名，若是二者之一，则设置p为显示，若都不是，则设置p为隐藏；
知识点：事件委托的应用环境及行间样式的获取
代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>购物车点击版实例</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         html,body{
             height: 100%;
         }
         .div1{
             width: 200px;
             height: 50px;
             background-color: lightseagreen;
             position: relative;
             margin: 20px auto;
         }
         .div1 p{
             width: 500px;
             height: 300px;
             position: absolute;
             right: 0;
             top: 50px;
             background-color: lightpink;
             display: none;
         }
     </style>
 </head>
 <body>
 <div class="div1">
     <p></p>
 </div>
 <script>
     //需求：当点击div元素及p元素时，p元素显示，点击除二者以外的任何区域都让p隐藏
     var oDiv=document.getElementsByTagName("div")[0];
     var oP=document.getElementsByTagName("p")[0];
     var bOk=true;
     //思路:如果一个父级容器下添加多个事件，那么就将事件委托给父级容器，通过判断事件源来进行相应的操作；
     //方法1：通过开关思想，控制隐藏与显示，但是会存在一个问题，在第二个判断中如果不设置bOk=true，就会出现，第一次点击div后，p显示，然后点击外面，p消失，但此时的bOk为false,再次点击div时，会走else语句，不会显示；所以必须天机bOk=true;
     document.body.onclick=function (e) {
         e=e||window;
         var target=e.target ||e.srcElement;
         if(target.className.toLowerCase()==="div1"){
             if(bOk){
                 oP.style.display="block";
             }else{
                 oP.style.display="none";
             }
             bOk=!bOk;
         }else if(target.tagName.toLowerCase()!=="p"){
             oP.style.display="none";
             bOk=true;
         }
     };
     //方法2：通过判断p的行间样式是否为block来控制显示和隐藏
     //需注意：在第一次点击div时，此时oP.style.display拿到的值为空，因为拿到的是行间样式，行间没有设置，而在style中设置的都是非行间样式，通过style是不能获取的，所以第一次点击会执行else语句；
     document.body.onclick=function (e) {
        e=e||window;
        var target=e.target ||e.srcElement;
        if(target.className.toLowerCase()==="div1"){
            if(oP.style.display==="block"){
                oP.style.display="none";
            }else{
                oP.style.display="block";
            }
        }else if(target.tagName.toLowerCase()!=="p"){
            oP.style.display="none";
        }
    }
     //方法3：通过判断事件源的nodeName来进行设置
     document.body.onclick=function (e) {
        e=e || window.event;
        e.target=e.target || e.srcElement;
        if(e.target.nodeName==="DIV" || e.target.nodeName==="P"){
             oP.style.display="block";
        }else{
             oP.style.display="none";
        }
    }
 </script>
 </body>
 </html>

购物车点击版实例2

需求：当点击div时，p显示，当移出div后，p隐藏，但是保证从div移出到p元素身上时，p不隐藏，从p上移出后，p隐藏；
方法：1）用onclick和onmouseleave事件设置；2）用onclick和onmouseout事件设置，但是用onmouseout事件设置，会存在问题：当移出div到p元素身上后，p会隐藏；所以需要获取关联元素，阻断隐藏代码；
知识点：onmouseout与onmouseleave的区别，以及关联元素的获取及阻断代码执行；
代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>购物车实例</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .div1{
             width: 200px;
             height: 50px;
             background-color: lightseagreen;
             position: relative;
             margin: 20px auto;
         }
         .div1 p{
             width: 500px;
             height: 300px;
             position: absolute;
             right: 0;
             top: 50px;
             background-color: lightpink;
             display: none;
         }
     </style>
 </head>
 <body>
 <div class="div1">
     <p></p>
 </div>
 <script>
     //需求：当点div时，p显示，当移出div后，p隐藏，但是保证从div移出到p元素身上时，p不隐藏，从p上移出后，p隐藏；
     //方法1：用点击事件和onmouseleave事件设置
     var oDiv=document.getElementsByTagName("div")[0];
     var oP=document.getElementsByTagName("p")[0];
     oDiv.onclick=function () {
         oP.style.display="block";
     };
     //用onmouseleave设置，当移出div到p元素身上后，p不会隐藏；
     oDiv.onmouseleave=function () {
         oP.style.display="none";
     };
     //方法2：用onclick和onmouseout事件设置，但是用onmouseout事件设置，会存在问题：当移出div到p元素身上后，p会隐藏；所以需要获取关联元素，阻断隐藏代码；
     oDiv.onclick=function () {
         oP.style.display="block";
     };
     oDiv.onmouseout=function (e) {
         e=e||window.event;
         //获取关联元素，阻断隐藏代码执行；
         var omo=e.toElement || e.relatedTarget;
         if(this.contains(omo)) return;
         oP.style.display="none";
     }
 </script>
 </body>
 </html>

知识点扩充

定位：
- 页面结构中元素A包含着B元素，A为父级元素，B为子级元素，B相对于A定位
- B的盒子模型是包含margin在内的大盒子，然后相对于A的边框内边缘定位，即若B的margin设置为0，并且定位中left也设置为0，则B的左边框外边缘与A的左边框内边缘贴合，当添加margin之后，二者之间会存在相应间隔；
- 总结：子级元素盒子模型（包含margin）相对于定位父级的边框内边缘进行定位；

第九周第三天笔记

事件

1 事件流

知识点扩充

猜你喜欢

热点阅读