javascript事件基础----事件模型比较

最新推荐文章于 2022-09-06 20:42:41 发布

wenmin1987

最新推荐文章于 2022-09-06 20:42:41 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签：事件模型基本事件模型标准事件模型 IE事件模型

本文链接：https://blog.csdn.net/wenmin1987/article/details/88627419

版权

JavaScript 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

一、基本事件模型：通过事件属性来设计的

绑定事件：

1、 静态绑定：把javascript脚本作为属性直接赋予给事件属性

<button onclick="this.style.background='red' ">按钮(this表示获取当前对象)</button>

<button onclick="(e.srcElement?e.srcElement:e.target).style.background='red' ">按钮</button>

<button id="btn1"  οnclick="btn1()">按钮</button>

<button id="btn2"  οnclick="btn2(event)">按钮</button>

   <script>

function btn1(){this.style.background='red'}

  function btn2(event){ //标准型模式必须传递此对象

var e=e||window.event; // 获取事件对象兼容标准模型和IE模型的Event

var src= e.srcElement?e.srcElement:e.target;

src.style.background='red';

}

</script>

  2、动态绑定：利用DOM对象的事件属性进行赋值

  <button id="btn">按钮</button>

<script>

var button=document.getElementById("btn");

button.onclick=function(e){

var e=e||window.event; // 获取事件对象兼容标准模型和IE模型的Event

document.write(e.srcElement?e.srcElement:e.target);//获取单签事件源兼容标准模型和IE模型的属性

}

</script>

二、标准事件模型：通过调用元素对象的addEventListener()方法来注册事件，支持三阶段（捕获阶段目标阶段冒泡阶段）

注册事件：element.addEventListener(String type,Funtion listener,boolean useCapture)

注销事件： element.removeEventListener(String type,Funtion listener,boolean useCapture)

---removeEventListener()只能够删除addEventListener方法注册的事件，不能删除 直接使用onclick等直接写在元素上的事件

注意：可以为多个对象注册同一事件，也可以为同一个对象注册多个事件处理函数

Event对象的属性：

只读属性：

type:获取事件的类型：如click

target：发生事件的节点（当前被激活事件的具体对象）

currentTarget：事件传播到的节点，（在捕获或冒泡阶段处理事件时，与target值不同）

eventPhase:显示当前所处事件传播过程的阶段

timeStamp:事件发生的时间。

bubbles：显示事件是否能够在文档中冒泡

cancelable:显示事件是否能够取消默认动作

stoppropagation():阻止当前事件从正在处理它的节点传播

preventDefault():阻止默认动作的执行

除以上属性Event基本属性外，各个事件子模块也定义了私有属性和方法

UIEvent提供view（发生事件的window对象）和detail（事件的详细信息）属性

MouseEvent除拥有Event和UIEvent属性和方法外，还有以上比较实用的属性

button：当在声明mousedown mouseup click事件时，显示鼠标键的状态值，0左键，1中间键，2右键

altKey,ctrlKey,metaKey,ShiftKey：表示在声明鼠标事件时是否按下Alt Ctrl Meta Shift

clientX,clientY:声明事件发生时鼠标指针相对于客户区域 浏览器窗口 左上角的x轴和Y轴的坐标值

screenX，screenY:声明事件发生时鼠标指针相对于 用户显示器 左上角的x轴和Y轴的坐标值

relatedTarget:引用与事件的目标节点相关的节点，对于mouseover，它是鼠标移动到目标上时所离开的那个节点

对于mouseout，它是离开目标时鼠标将要进入的那个节点

三、IE事件模型

与标准事件模型相近，用法上略不同，IE把Event对象视为Window对象的一个属性，IE传播只有两个阶段：目标事件和冒泡，不支持捕获

注册事件：element.attachEvent(etype，eventName)--etype -->"onclick" "onmousemove"等   带on开头

注销事件：element.detachEvent(etype，eventName)

<p id="p1">IE事件注册</p>

var p1=document.getElementById("p1"); //

p1.attachEvent("onmouseover",function(){

p1.style.background="red"; //这里不能用this，事件函数中this指向的是window，而不是当前对象

})

p1.attachEvent("onmouseout",function(){

p1.style.background="bule"; //这里不能用this，事件函数中this指向的是window，而不是当前对象

})

IE的Event对象（window的一个属性，通过window.event访问）

Event的只读属性：

type：获取事件的类型

srcElement：发生事件的元素，等同标准中的 target

button：按下鼠标键的状态，1左2右4中间，3（=1+2）同时左右，标准中 0左2右1中间

clientX,clientY:声明事件发生时鼠标指针相对于客户区域 浏览器窗口 左上角的x轴和Y轴的坐标值，等同标准中

offsetX，offsetY：事件发生时鼠标指针相对源元素左上角的x轴和Y轴，标准中没有此类属性

altKey,ctrlKey,ShiftKey：表示在声明鼠标事件时是否按下Alt Ctrl  Shift比标准少metaKey，等同标准中

keyCode：声明keydown 、keyup的键代码以及keypress的Unicode字符，可借助String.fromCharCode()将这些转成字符

fromElement，toElement：分别声明鼠标移动过去的元素和鼠标将要移动的元素   等同标准中的relatedTarget

以下两个可设置属性：

canceBubble：true 阻止事件冒泡，默认false 等同标准中的stopPropagation()方法

returnValue：false 阻止事件的默认动作，默认为true 等同标准中的preventDefault()

标准与IE兼容：

var event=event||window.event ;//标准中，必须把event传入

window.event.canceBubble=true；//IE阻止事件冒泡

event.stopPropagating()；//标准阻止事件冒泡

   if(typeof e.cancelBubble=='undefined'){//阻止冒泡的IE和标准兼容
               e.stopPropagation();
           }else{
               e.cancelBubble=true;
           }

event.preventDefault()//标准阻止事件的默认行为，如a标签

window.event.returnValue=false;//IE取消默认行为，取消了超链接

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>事件兼容w3c与IE</title>
   </head>
   <body>
       <input type="button" value="test" id='btn'/>
       <br/>
       <a href="http://www.baidu.com" id='Baidu' > 百度</a>
       <div id="box1">
           <input type="button" value="test1" id='btn1' />
       </div>
       <script type="text/javascript">
           //事件绑定：addEventListener与attachEvent
           //事件移除：removeEventListener与detachEvent
           //获取事件对象：e.target与window.event.srcElement
           //阻止冒泡：e.stopPropagation与window.event.cancelBubble
           //阻止默认：e.preventDdfault与window.event.returnValue
           var btn=document.getElementById('btn');
           btn.οnclick=function(){
               alert(window.event.srcElement===this);//IE获取事件
           }

           btn.attachEvent('onclick',function(event){
           alert(event.srcElement===this);
           });

           var link=document.getElementById("Baidu");
           link.οnclick=function(){
               window.event.returnValue=false;//取消默认行为，取消了超链接

           }

           var box1=document.getElementById("box1");
           var btn1=document.getElementById("btn1");
           box1.οnclick=function(){
               alert('box1 clicked');
           }
           btn1.οnclick=function(){
               alert('button clicked');
               window.event.cancelBubble=true;//取消冒泡，IE中只有冒泡方式
           }
           document.body.οnclick=function(){
               alert("body clicked");
           }
       </script>
   </body>
</html>