简单总结焦点事件Event事件对象冒泡事件

Posted 2020-08-14

每学习一些新的东西，要学会复习，总结和记录。

今天来简单总结一下学到的几个事件：焦点事件、Event事件对象、冒泡事件

其实这几个事件应该往深的说是挺难的，但今天主要是以一个小菜的角度去尝试理解一些基本的知识点。

 

1.焦点事件：

　　1.1概念理解：

　　想象场景：当一堆text文本框出现在面前，当点击其中一个文本框，它就会响应用户，并出现光标闪动（这时，点击令它获得焦点）。

　　所以说：焦点事件是用来让浏览器区分哪一个对象是用户要进行操作（输入值、选择、跳转）的。

　　总结===》  浏览器（区分）哪一个对象（是）用户（要） 操作（的）

　　回到场景来说，就是出现光标那个，它被点击后，与其他文本框不一样，提示用户此文本框是可以操作（输入）的！

　   

　　1.2设置方式：　　　

　　　　点击设置、Tab键切换、JS来设置

　　　  （注意：不是所有元素都能接受焦点的：DIV、P等就不能，只有能够响应用户的才可以设置焦点）

 

 　　1.3.焦点事件（）

　　       Obj.onfocus = function ( ){  };：当元素获取时触发事件

       Obj.onblur = function( ){  }  ：当元素失去焦点时触发

 

 　　1.4.焦点方法

　　　　Obj.onfocus();  给指定元素设置焦点

       Obj.onblur ();  给指定元素失去焦点

       Obj.select();  选择指定元素里面的文本内容

 

2.Event 事件：

　　在理解冒泡事件和捕获事件前，先来理解一下什么叫做 Event 事件。

　　2.1概念：

　　　 Event：事件对象（事件发生的状态）

　　　 想象场景：当用鼠标点击一个按钮时，当前点击按钮的（激活状态、鼠标的位置）等信息，都是点击事件的事件对象

　　　 也就是说：事件对象是指　当一个事件发生时，当前对象　发生这个事件 的 有关信息

　　　 

　　2.2兼容性：

　　　　event具有兼容性问题。　

　　　　标准下：IE/chrome里event是一个内置全局对象 ，也就是已经进行定义了   var event

　　　　非标准下：FF中的事件对象，是通过事件函数的第一个事件参数传入的

　　　　兼容性处理：

1 function fn1(ev){   
2     var ev=ev || event;    
3     alert(ev);
4 }
5 
6 document.onclick = fn1;        //通过点击调用事件

　　　　注意：事件对象必须在一个事件调用下才生成事件函数，也就是说，不能够fn1();这样直接调用，要通过 obj.onclikc = fn1;这种类型的调用方法。

 

3.冒泡事件：

　　3.1概念：

　　　　当一个元素接收到一个事件时，会将这个事件传给它的父级，直到最顶层window

 1 <div id="div1">
 2         <div id="div2">
 3             <div id="div3"></div>   //已经为div3设置了绝对定位到div1和div2外面
 4     </div>
 5     
 6    <script>
 7     var oDiv1 = document.getElementById(‘div1‘);
 8     var oDiv2 = document.getElementById(‘div2‘);
 9     var oDiv3 = document.getElementById(‘div3‘);
10     function fn1(){
11          alert(this.id);
12     }
13     oDiv1.onclick = fn1;    //点击div1会同时触发div2、3的onclck事件（冒泡）
14     oDiv2.onclick = fn1;
15     oDiv3.onclick = fn1;
16     </script>

 

 　　3.2冒泡事件的阻止：

　　　　event.cancleBubble = true;  //阻止当前对象的当前事件的冒泡

 function fn1(){
        alert(this.id);
        event.cancleBubble = true;  
     }

 

　　3.3冒泡事件的简单应用：

　　　  冒泡效应会将对象当前发生的事件传递传递到父级，这乍一看让人感觉非常不好，但总的来说， 冒泡还是利大于弊的。接下来讨论一个有关利方面的例子。

　　　  应用例子：如下图，鼠标滑动到分享到时，紫色Div会出来；离开紫色div或者分享到div时，紫色div消失。

　　　  思路：学习了冒泡我们知道，具有事件传递的效果，当我们鼠标滑动到”分享到“时，自动就有一个onmouserover事件发生了（鼠标事件），这时这个事件会传递到他的父级，因此我们只要去设置父级的onmouseover事件就可以了，分别是鼠标移入left为0px；移出left=-100px;

     

 

 

　　 <div id="div1">
        <div id="div2">分享到</div>
    </div>
    <script>
    var oDiv1 = document.getElementById(‘div1‘);
    var oDiv2 = document.getElementById(‘div2‘);
    
    
    
    //根据事件冒泡机制,oDiv2.onmouseover是发生的只是没有写出来，
    //因此会触发父级的onmouseover事件，即使没有碰到父级，也可以通过div2的事件传给父级元素
    oDiv1.onmouseover = function(){
        oDiv1.style.left = 0+‘px‘;    
    };
    oDiv1.onmouseout = function(){
        oDiv1.style.left = -100+‘px‘;    
    };