你的位置:首页 > Java教程

[Java教程]简单总结焦点事件、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';    };