zoukankan      html  css  js  c++  java
  • Javascript事件模型

    事件流

    事件冒泡

    针对事件流,IE使用的是事件冒泡技术。基本思想是,事件从事件发生的最内部开始触发,向上触发到最外部(document对象)。

     

    事件捕获

    事件捕获与事件冒泡正好是相反的,它的事件触发顺序是从最外层的对象(document)到最里层的对象。

     

    DOM事件流

    DOM是同时支持事件捕获和事件冒泡,但事件捕获先发生。两个事件都可以遍历DOM中的所有码对象,起点和终点都是document(很多准的兼容浏览器可以一直捕获/冒泡到window对象).DOM事件流中文本节点也能接收事件。

     

    事件处理程序/监听器

    事件处理程序的指派方法有两种:

    1  传统事件处理指派方法,可以为一个事件指派一个事件处理程序,它被所有的浏览器支持。

    2  现代事件处理程序指派方法,可以为一个事件指派多个事件处理程序,只被现代的浏览器支持,而且存在浏览器不兼容的问题。

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

    1  javaScript /在HTML中将事件处理程序指派给事件。

    2  XHTML标记事件处理属性中指定。

    <div> onclick=alert(我被点击了’)</div>

     

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

    1  针对IE浏览器

    在IE中,每个元素和window对象有两个方法:

    a.       attachEvent() 将一个事件处理程序绑定到一个事件。

    b.       detachEvent() 用于解除事件处理程序的绑定。

    [object].attcahEvent(事件名称” , 函数 );

    [object].detachEvent(事件名称” , 函数 );

     

    Var oDiv = document.getElementByIdx_x(div1);

    oDiv.attachEvent(onclick, fnClick ); //添加事件处理程序

    oDiv. detachEvent (onclick, fnClick ); //删除事件处理程序

     

    2  针对兼容DOM的浏览器

    addEventListener() 事件处理程序的指派

    removeEventListenter() 事件处理程序的删除任务

    这两个方法都有三个参数:

    分别是 事件的名称,要指派的函数,处理程序是否用冒泡/捕获阶段(true 用在捕获阶段 , false用在冒泡阶段)

    [object].addEventListener(事件名称” , 函数名 , bCaptrue);

    [object]. removeEventListenter (事件名称” , 函数名 , bCaptrue);

    oDiv.addEventlistener(click” , fnclick , false );  //事件处理程序用于冒泡阶段

    oDiv. removeEventListenter (click” , fnclick , false );

    注意:同一个事件处理程序的指派和删除,它们的bCaptrue一定是相同的,如果不相同,则会删失败,但不会报错。

     

    3  兼容性问题的解决

    因为IE和DOM下对现代的事件处理程序指派的方式不同,我们可以分别使用两种方式来向每一个事件指派事件处理程序(编写两份)。

    Var fnlick1 = function (){alert(我被点击了”);};

    Var fnlick2 = function (){alert(我也被点击了”);};

    If( document.addElementListener ){  //针对IE浏览器

    oDiv.addEventListener(click” , fnlick1 , true);

    oDiv.addEventListener(click” , fnlick2 , true);

    }else if( document.attachEvent ){    //针对DOM浏览器

    oDiv.attachEvent( onclick” , fnlick1 );

    oDiv.attachEvent( onclick” , fnlick2 );

    }

     

    事件处理程序的返回值

    Event对象

    浏览器开发者创建了Event对象,这个对象包含了事件发生时的特定信息,包括:

    触发事件的对象

             事件发生时鼠标信息

             事件发生时键盘信息

     

    定位

    在IE Event对象是window对象的一个属性。事件处理程序必须按照如下的方式访问:

    oDiv.onclick = function(){

             var oEvent = window.event;

    }

    在所有的事件执行完了后,Event对象就会被销毁。

     

     

    在DOM中规定:Event对象只能作为仅有的参数传递给事件处理程序,所以必须是:

    oDiv.onclick = function(){

             var.oEvent = arguments[0];

    }

    也可:

    oDiv.onclick = function(oEvent){

    }

     

    为了正确使用Event对象,我们就必须先判断浏览器是IE还是DOM兼容的浏览器:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>测试浏览器</title>

    <script type="text/javascript">

             function browserType(oEvent){

                       if(window.event){

                                document.getElementByIdx_x("p1").innerHTML = "IE浏览器";

                       }else if(oEvent){

                                document.getElementByIdx_x("p1").innerHTML = "DOM浏览器";

                       }

             }

             function test(oEvent){

                       alert(String.fromCharCode(oEvent.keyCode));

             }

    </script>

    </head>

    <body >

    <!--<p onclick="browserType(event);">Hello ,javascript Event Object</p>

    <p id="p1" >到底是什么浏览器呢</p>-->

    <div align="center">只作测试<input type="text" id="i1" onkeydown="test(event);" /></div>

    </body>

    </html>

     

    属性和方法

     

    相同点:

    尽管IE跟DOM兼容的浏览器有很多不兼容的地方,但也有一些它们的相同点。

    获取事件类型:

    Var sType = oEvent.type;

     

    获取键盘代码:

    Var ikeyCode = oEvent.keyCode;

     

    检测Shift , Alt , Ctrl是否按下:

    oEvent.shiftKey;

    oEvent.altKey;

    oEvent.ctrlKey;

    它们返回的是一个Boolean值,也触发一个keydown事件,可以得到它的keyCode值。

     

    获取客户区坐标:

    oEvent.clientX;  //X坐标

    oEvent.clientY;  //Y坐标

     

    获取屏幕坐标:

    即鼠标相对于屏幕的位置。

    oEvent.screenX; //鼠标X坐标

    oEvent.screenY; //鼠标Y坐标

     

    不同点:

    IE:

    获取目标oEvent.srcElement;

    获取字符码  oEvent.charCode;

    阻止事件的默认行为  oEvent.returnValue = false ;

    中止事件传播  oEvent.cancelBubble = true ;

     

    DOM:

    获取目标  oEvent.target;

    获取字符码  oEvent.charCode;

    阻止事件的默认行为oEvent.preventDefault();

    中止事件传播  oEvent.stopPropagation();

     

     

     

     

    事件类型

    鼠标事件

    Click / Enter  单击事件

    Dblclick    双击事件

    Mousedown  按下任意鼠标键

    Mouseout    鼠标移出

    Mouseover    鼠标越过

    Mouseup      鼠标释放

    Mousemove   光标在一个元素上时,重复发生此事件

     

    键盘事件

    Keydown   按下一个键时,按住不放重复发生

    Keypress    按下一个键时,按住不放重复发生,不包括shift , Alt , Ctrl等。

    Keyup      释放一个按下的键

     

    HTML事件

    Load   页面被全部装载

    Unload  页面被全部卸载

    Abort   用户终止装载进程之前,它还没有被完全装载触发此事件

    Error   javaScript发生错误/页面不能被正常的装载触发此事件

    Select  在一个文本框中,用户选择一个或多个字符时触发此事件

    Change  失去焦点,且值被改变时触发此事件

    Submit  表单的提交按钮被点击时

    Reset  表单的重置按钮被点击时

    Resize  窗口/框架的尺寸被调整时

    Scroll  滚动页面

    Focus获得焦点

    Blur  失去焦点

     

    总结:

    事件是用户或者浏览器操作网页时发生的行为。

    事件流是网页上的元素相应事件的顺序。

    事件流在不同种类浏览器中有所不同。在IE浏览器中,采用的是事件冒泡;在Netscapte Navigator4.0中,采用事件捕获;在遵循标准的DOM兼容浏览器中,采用的是先捕获后冒泡。

    为响应一个事件而被调用的函数称为事件处理程序。事件处理程序用两个方式之一来指定:在JavaScript中或者在HTML中。

    Event对象只在事件发生时创建,并且可以被事件处理程序访问。在所有事件处理程序执行完成后,event对象就被销毁了。

    根据触发事件的对象以及事件触发的行为,浏览器中发生的事件可以分组为鼠标事件、键盘事件、HTML事件等几个事件组。

  • 相关阅读:
    C# 串口操作系列(4) -- 协议篇,文本协议数据解析(转)
    c#中,确保数据接收完整的 串口处理程序
    特别好的系列GMap.net技术总结文章12篇
    lock()
    获取程序启动路径去掉后面的i个字符
    wpf简单界面
    使用.NET进行高效率互联网敏捷开发的思考和探索【一、概述】
    $.getJSON 返回值、AJAX异步调用步骤
    JQuery validate 在IE兼容模式下出现 js错误(成员找不到)的修正:
    jQuery getJSON() 能给外部变量赋值
  • 原文地址:https://www.cnblogs.com/zhaoxin786695/p/3989302.html
Copyright © 2011-2022 走看看