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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单总结焦点事件Event事件对象冒泡事件相关的知识,希望对你有一定的参考价值。

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

今天来简单总结一下学到的几个事件:焦点事件、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‘;    
    };

 

以上是关于简单总结焦点事件Event事件对象冒泡事件的主要内容,如果未能解决你的问题,请参考以下文章

jq事件冒泡问题

jQuery中两种阻止事件冒泡的区别

jQuery中的事件考前复习总结

事件侦听和删除事件——event对象——按钮精灵——默认事件——取消冒泡事件——事件委托——默认触发——onload 图片预加载四个迭代版本

事件分类

javascript 跨浏览器事件对象阻止默认事件阻止冒泡兼容写法