×

[JavaScript学习]JavaScript事件-事件对象

作者:Terry2016.11.02来源:Web前端之家浏览:13310评论:0

上一节我们学习了“JavaScript文档对象模型-DOM扩展”,介绍了DOM扩展的一些知识,今天主要学习下JavaScript事件中的事件对象。

600.png

在触发DOM中的某个事件的时候,会产生一个事件对象event,这个对象包含着所有与事件相关的信息。这些信息包括发生事件的元素,事件的类型和其它一些特定的相关信息。所有的浏览器都支持event事件对象,但是各个浏览器的支持方式各不相同。

DOM中的事件对象

所有兼容DOM的浏览器都会将一个event对象传入到事件处理程序中。不管是DOM0级事件处理方法还是DOM2级事件处理方法,都会传入event对象。例如

var btn = document.getElementById("btn");
/* DOM0级方法 */
btn.onclick = function(event){
    console.info(event.type);   //输出:“click”
}
/* DOM2级方法 */
btn.addEventListener("click",function(event){
    console.info(event.type);   //输出:“click”
},false);

event对象包含与创建它的特定事件有关的属性和方法。触发事件的类型不一样,可用的属性和方法也不一样。下表中列出了通用的属性和方法。

属性/方法类型读 / 写描述
bubblesBoolean只读事件是否冒泡
cancelableBoolean只读是否可以取消事件的默认行为
curentTargetElement只读当前正在处理事件的事件处理程序的元素
detailInteger只读与事件相关的细节信息
eventPhaseInteger只读调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”阶段,3表示冒泡阶段
preventDefault()Function只读取消事件的默认行为
stopPropagation()Function只读取消事件的进一步捕获或冒泡。如果bubblestrue则可以使用该方法
targetElement只读事件的目标
typeString只读被触发事件的类型
viewAbstractView只读与事件关联的抽象视图。等同于发生事件的window对象

在事件处理程序的内部,对象this始终等于curentTarget的值,target包含的是事件的实际目标。

要阻止事件的默认行为,可以使用preventDefault()方法。例如,超链接的默认行为是在被单击的时候导航到某个URL上。如果想阻止超链接的默认行为,可以通过在超链接的onclick事件处理程序中取消它,代码如下:

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
}

另外,只有在cancelable属性被设置为true的时候,才可以使用preventDefault()方法来取消默认行为。

stopPropagation()方法用于立刻停止事件在DOM中的传播,也就是说可以取消事件捕获或事件冒泡。例如下面的例子:

<html lang="zh" id="html" class="demo">
<head>
  <meta charset="UTF-8">
  <title>事件冒泡</title>
</head>
<body id="body" class="demo">
  <div id="parent" class="demo">
    <button id="child" class="demo">点击一下</button>
  </div>
  <script type="text/javascript">
    window.onload = function(){
      var elements = document.querySelectorAll(".demo");
      //alert(elements.length);
      for(var i = 0 ; i < elements.length; i++){
        elements[i].onclick = function(event){
          var element = elements[i];
          //获取事件
          event = event?event:window.event;
          //获取事件发生的目标
          target = event.target?event.target:event.srcElement;
          console.info("事件源:"+target.id+" , "+target.tagName+", 事件对象:"+this.id);
        } 
      }
    }
  </script>
</body>
</html>

Firefox控制台事件冒泡的显示结果

上面的代码会产生事件冒泡,从控制台中可以看到事件冒泡的结果。如果要取消事件冒泡,只需要添加event.stopPropagation();即可。

<html lang="zh" id="html" class="demo">
<head>
  <meta charset="UTF-8">
  <title>事件冒泡</title>
</head>
<body id="body" class="demo">
  <div id="parent" class="demo">
    <button id="child" class="demo">点击一下</button>
  </div>
  <script type="text/javascript">
    window.onload = function(){
      var elements = document.querySelectorAll(".demo");
      //alert(elements.length);
      for(var i = 0 ; i < elements.length; i++){
        elements[i].onclick = function(event){
          var element = elements[i];
          //获取事件
          event = event?event:window.event;
          //获取事件发生的目标
          target = event.target?event.target:event.srcElement;
          console.info("事件源:"+target.id+" , "+target.tagName+", 事件对象:"+this.id);
          //取消事件冒泡
          event.stopPropagation();
        } 
      }
    }
  </script>
</body>
</html>

Firefox控制台取消事件冒泡的显示结果

可以看到,此时,在控制台中显示的事件对象只有按钮对象。

事件对象的eventPhase属性可以知道当前正处于事件流的哪一个阶段。如果eventPhase属性的值等于1,那么事件流处于捕获阶段;如果eventPhase属性的值等于2,那么事件处于目标对象上;如果eventPhase属性的值等于3,那么事件处于冒泡阶段。

IE中的事件对象

与访问DOM中的event对象不同,要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。例如下面的例子:

var btn = document.getElementById("btn");
btn.onclick = function(){
    var event = window.event;
    console.info(event.type);       //输出"click"
}

上面的例子通过window.event获取了event对象,并获取了被触发事件的类型。

如果事件处理程序使用的是attachEvent(),那么会有一个event对象作为参数被传入到事件处理程序函数中,例如:

var btn = document.getElementById("btn");
btn.attachEvent("onclick",function(event){
    console.info(event.type);       //输出"click"
});

如果是使用HTML属性来指定事件处理程序,那么还可以通过一个event变量来访问event对象,例如:

<input type="button" value="点击" onclick="alert(event.type)"/>

IE中的event对象也包含与创建它的事件相关的一些属性和方法。其中很多属性和方法都有对应或相关的DOM属性和方法。下表中列出了所有事件对象都包含的属性和方法。

属性/方法类型读 / 写描述
cancelBubbleBoolean只读是否取消事件冒泡,默认值为false,设置为true时取消事件冒泡(与DOM中的stopPropagation()方法相同)
returnValueBoolean只读取消事件的默认行为,默认值为true,设置为false时取消默认的事件行为(与DOM中的preventDefault()方法相同)
srcElementElement只读事件的目标(与DOM中的target属性相同)
typeString只读被触发事件的类型

因为事件处理程序的作用域是根据指定它的方式来确定的,所以不能认为this始终等于事件目标。最好使用event.srcElement来判断。例如:

var btn = document.getElementById("btn");
btn.onclick = function(){
    console.info(window.event.srcElement === this);     //输出true
}
btn.attachEvent("onclick",function(event){
    console.info(event.srcElement === this);            //输出false
});

上面的代码中,第一个事件处理程序使用的是DOM0级事件处理程序,srcElement属性等于this。但是在第二个IE事件处理程序中,这两个值则是不同的。

returnValue属性相当于DOM中的preventDefault()方法,它的作用是取消事件的默认行为。要取消事件的默认行为,只需要将该属性的值设置为false即可。例如:

var link = document.getElementById("myLink");
link.onclick = function(){
    window.event.returnValue = false;
}

上面的例子中,指定的超链接在点击之后不会被导航到指定的URL上。

最后,cancelBubble属性与DOM中的stopPropagation()方法相同,用于停止事件冒泡。由于IE不支持事件捕获,因此只能用它来阻止事件冒泡。stopPropagation()方法可以同时取消事件冒泡和事件捕获。

跨浏览器事件对象

我们可以通过自定义函数来实现跨浏览器的事件对象。

首先是跨浏览器获取是事件对象的方法。该方法返回对event对象的引用。

/* 跨浏览器获取event对象 */
function getEvent(event){
    return event ? event : window.event;
}

然后是跨浏览器获取事件的目标。

/* 跨浏览器获取事件的目标 */
function getTarget(event){
    return event.target ? event.target : event.srcElement;
}

接着是跨浏览器阻止事件默认行为的方法。

/* 跨浏览器阻止事件默认行为 */
function preventDefault(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

最后是跨浏览器阻止事件冒泡的方法。

/* 跨浏览器阻止事件冒泡 */
function stopPropagation(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

返回javascript教程主目录>>

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js1473004800569.html

网友评论文明上网理性发言 已有0人参与

发表评论: