javaScript中的事件

1.1事件流

1.1.1.事件冒泡

    冒泡技术的基本思想是，事件从发生的目标最内部开始触发，向上触发到最外部（document对象）

1.1.2.事件捕获

    事件捕获与冒泡相反，它的事件触发顺序是从最外层的对象到最里层的对象。事件捕获也可以window级的事件，但是需要开发者显示指定。

1.2.3.DOM事件流

     DOM同时支持事件捕获和事件冒泡，但是事件捕获先发生。两个事件流可以遍历DOM中的所有的对象，起点和结束点为document对象。

1.2 事件处理程序/监听器

事件是被用户或者浏览器执行的某种行为。事件处理程序的指派方法有两种方式：一种是传统事件处理程序指派方法，这种方法可以为一个事件指派一个事件处理程序，它被现代的所有浏览器所支持；一种称为现代事件处理程序指派方法，这种方法可以为一个事件指派多个事件处理程序只被现代的浏览器所支持而却存在浏览器不兼容的问题。

1.3.1 传统事件处理程序指派方法

  1.在JavaScript中指定事件处理程序

    JavaScript中指定事件处理程序，我们需要引用正被处理的对象，然后按照如下方式，将一个函数指派给相关的事件处理程序属性：

Var   oDiv=document.getElementById(“div1”);

      oDiv.onclick=funcion() {

     Alert(“我被点击了”)；   

}

注意：在绑定事件处理程序到事件属性时，只能引用函数的名称，后面不能加括号，如果加括号，意味着马上被执行函数。

1.3.2 现代事件处理程序指派方法

   1.IE浏览器

    在IE浏览器中，每一个元素和window对象有两个方法：attachEven()和detachEven()。attachEven()用于将一个事件处理程序绑定到一个事件，而detachEven用于解除事件处理程序的绑定。其语法格式为：

[object].attachEven(“事件处理程序的名称”,函数);

[object].detachEven(“事件处理程序的名称”,函数);

   2.DOM

     DOM中使用addEventLister()和removeEventLister()方法完成事件处理程序指派和删除的任务。其语法格式为：

[object].addEventLister(“事件名称”，函数名，bCapture);

   [object]removeEventLister(“事件名称”，函数名，bCapture);

       3.兼容性问题的解决

         Var   funClick1=function ( ){  alert(“我被点击了”)；}；

         var    funC;ick=function( ){   alert(“我被点击了”);} ;

         Var    oDiv=document.getElementById(“div1”);

          If (document.addEventListener){

             oDiv.addEventListener(“click”,funClick1,true);

              oDiv.addEventListener(“click”,funClick2,true);

         }

         Else if(document.attachEvent) {

            oDiv.attachEvent( “onclick”,funClick1);

            oDiv.attachEvent( “onclick”,funClick2);

        }

1.4.事件处理程序的返回值

   从重要的事件处理程序中返回false的效果

   1.click-------单选按钮和复选框取消设置；

   2.dragdrop-------取消拖拽；

   3.keydown-------在用户按住键不放时，取消随后的keypress事件；

   4.keypress--------取消keypress事件；

   5.mousedown-----取消默认行为(拖的开始，选择的开始，解除连接)；

   6.mouseover------导致对window的status或defaultStatus属性的改变被浏览器忽略；

   7.submit-------取消表单提交；

1.5.Event对象

   3.5.1定位

     在IE中event对象时window对象的一个属性。这意味着事件处理程序必须按照如下方式访问event对象

 oDiv.onclick=function () {

   Var oEvent=window.event;

 }

   1.5.2相同点

     1.获取事件类型

       代码如下：

        Var   sType=oEvent.type;

     2.获取键盘代码(keydown/keyup事件)

       代码如下：

        Var   iKeyCode = oEvent.keyCode;

     3.检测Shift，Alt,Ctrl

        Var   bShift = oEvent.shiftKey;

        Var   bAlt = oEvent.altkey;

        Var   bCtrl = oEvent.ctrlkey;

     4.获取客户区域坐标

        Var   iClientX=oEvent.clientX;

        Var   iClientY=oEvent.clientY;

     5.获取屏幕坐标

        Var   iScreenX = oEvent.screenX;

        Var   iScreenY= oEvent.screenY;

   3.5.3不同点

     1.获取目标

     在IE中： var  oTarget=oEvent.srcElement;

     在DOM中：var  oTarget=oEvent.target;

2.获取字符码

     在IE中： var  iCharCode=oEvent.keyCode;

     在DOM中：var  iCharCode=oEvent.charCode;

3.阻止事件的默认行为

     在IE中： var  returnValue=false;

     在Mozilla中：oEvent.preventDefault();

    4.终止事件传播（冒泡）

     在IE中：   oEvent.cancelBubble=true;

     在Mozilla中：oEvent.stopPropagation();

1.6.事件类型

  1.6.1鼠标事件

      1.click------用户点击鼠标左键，以及当焦点在一个按钮上，用户按Enter键时，发生click事件；

     2.dblclick-----当用户双击鼠标左键时，发生dblclick事件；

     3.mousedown-----当用户按下任意鼠标按钮时，发生mousedown事件；

     4.mouseout----当光标在一个元素上时，并且用户将其移出元素边界时，发生mouseout事件

     5.mouseover-----当光标在一个元素之外，并且用户将其移动到该元素上时，发生mouseover事件

     6.mouseup-----当用户释放任何鼠标按钮时，发生mouseup事件；

     7.mousemove------当光标在一个元素上时，重复发生mousemove事件；

  1.6.2键盘事件

     Keydown-----当用户在键盘上按下一个键时发生。如果用户按住键不放，它就重复发生；

     Keypress-----当用户在键盘上按下一个字符键（不包括Shift和Alt键等）时发生。如果用户按住键不放，它就重复发；

     Keyup----当用户释放一个按下的键时发生；

 1.6.3 HTML事件

1.load和unload事件

2.resize事件

     有时，网页会基于浏览器窗口大小而改变，resize事件的事件处理程序可以通过JavaScript指派给window对象或在HTML中指派给body元素。

3.scroll事件

  我们也许会在用户滚动窗口时，跟踪滚动信息，以确保屏幕上有些元素在所有时间都保持可见。通过使用scroll事件，我们可以做到。