正文

javascript中的事件对象

WayneZhu  2022-02-08  744

关键词：

JavaScript中的事件对象

　 JavaScript中的事件对象是非常重要的，恐怕是我们在项目中使用的最多的了。在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含这所有与事件有关的信息。下面将会讲到DOM中的事件对象、IE中的事件对象以及跨浏览器的事件对象三个部分。

　　对于事件处理程序，大家可以看我的博文《JavaScript中的五种事件处理程序》。

第一部分：DOM事件对象

　　兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论是HMTL特性、DOM0级还是DOM2级，都会传入这个event对象。这个对象具有下面的属性和方法。

　　DOM事件对象的属性有：

bubbles 布尔值只读表明事件是否冒泡
cancelable 布尔值只读表明是否可以取消事件的默认行为
currentTarget 元素只读表明事件处理程序正在处理的元素
defaultPrevented 布尔值只读表明是否调用了preventDefault()方法
detail 数值只读表明与事件相关的细节信息
eventPhase 数值只读表明事件处理程序的阶段：1为捕获阶段，2为处于目标阶段，3为冒泡阶段
target 元素只读事件的目标
trusted 布尔值只读 true表示事件为浏览器生成，false表示开发人员通过js创建
type 字符串只读表明被触发事件的类型

　　DOM事件对象的方法有：

preventDefault() 只读用来取消事件的默认行为
stopPropagation() 取消事件的冒泡
stopImmediatePropagation() 取消事件的捕获或者冒泡（DOM3级新增方法）

　　下面举例说明上述几个属性和方法的使用：

例1：

preventDefault()：此方法可以阻止事件的默认行为，比如，点击a标签，本来应该会跳转到相应的url，但是我们可以使用方法阻止，如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>preventDefault</title>
</head>
<body>
    <div id="wrap">
        <div id="div">
            <a id="link" href="http://www.cnblogs.com/zhuzhenwei918">918之初</a>
        </div>
    </div>
    <script>
        var link=document.getElementById("link");
        link.addEventListener("click",function(){
            alert(event.cancelable);//true 表示可以取消事件的默认行为
            event.preventDefault();// 取消事件的默认行为
            alert(event.type); //click  即事件对象类型即点击 click
            alert(event.trusted);//undefined  可能是因为目前还不支持此属性 
            alert(event.defaultPrevented); //true,即默认被阻止，因为上面我们使用了preventDefault()方法
            alert(event.eventPhase);//2 表示处于目标阶段
        },false);

        var div=document.getElementById("div");
        div.addEventListener("click",function(){
            alert(event.target); //http://www.cnblogs.com/zhuzhenwei918  target为事件的实际目标  即a标签被点击之后，实际上是应该跳转的
            alert(event.currentTarget);//[object HTML DivElement] 
            alert(this);//[object HTML DivElement]，可以看出event.currentTarget 和this始终是相同的。
            alert(event.bubbles);// true  表示事件冒泡
            alert(event.eventPhase); //3 表示处于冒泡阶段
            event.stopPropagation(); // 使用此方法来阻止继续向上冒泡
        },false);

        var wrap=document.getElementById("wrap");
        wrap.onclick=function(){
            alert("wrap");//不显示，因为在之前已经阻止事件冒泡了。
        };

    </script>
</body>
</html>

View Code

例2：

实际上，我们也可以不使用event而是在function中传入一个参数来当作event使用（DOM0级和DOM2级都可以），如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bubble</title>
    <style>
        button{
            background: red;
            color:white;
        }
        #third{
            width: 50px;
            height: 50px;
            border:thin solid red;
        }
        #second{
            width: 100px;
            height: 100px;
            border:thin solid red;
        }
        #first{
            width:200px;
            height: 200px;
            border:thin solid red;
        }
    </style>
</head>
<body>
    <div id="first">
        <div id="second" >
            <div id="third" >
                <button id="button">事件冒泡</button>
            </div>
        </div>
    </div>
    <script>
        document.getElementById("button").addEventListener("click",function(e){
            alert(e.cancelable);//捕获被阻止，这里没有弹出窗口
        },true);

        document.getElementById("third").addEventListener("click",function(e){
            alert(e.currentTarget);//捕获被阻止，这里没有弹出窗口
        },true);

        document.getElementById("second").addEventListener("click",function(e){
            alert("second");//弹出窗口
            e.stopImmediatePropagation();  //阻止事件捕获
        },true);        

        document.getElementById("first").addEventListener("click",function(e){
            alert("first"); //弹出窗口
            alert(e.eventPhase);  //1处于捕获阶段
        },true);
    </script>
</body>
</html>

View Code

例3：

　　实际上，利用event的type属性结合switch语句我们还可以做更多的事情！

　　比如我们需要在点击按钮、划过按钮和划出按钮时做不同的事情，我们可以这样写（这里使用DOM0级添加事件处理程序，方法一样，事件对象依然是event,也可以传入一个参数，以该参数作为对象）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bubble</title>
    <style>
    #div{
        width: 200px;
        height: 200px;
    }
    </style>
</head>
<body>
    <div id="div"></div>
    <button id="button">点击我</button>
    <script>
    var button=document.getElementById("button");
    var div=document.getElementById("div");
    button.onclick=function(){
        div.style.backgroundColor="red";
    };
    button.onmouseover=function(){
        div.style.border="thin red solid";
    };
    button.onmouseout=function(){
        alert("mouseout");
    };
    </script>
</body>
</html>

这样写当然可以得到想要的效果，但是我们还可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bubble</title>
    <style>
    #div{
        width: 200px;
        height: 200px;
    }
    </style>
</head>
<body>
    <div id="div"></div>
    <button id="button">点击我</button>
    <script>
    var button=document.getElementById("button");
    var div=document.getElementById("div");
    var handler=function(event){
        switch(event.type){
            case "click":
                div.style.backgroundColor="red";
                break;
            case "mouseover":
                div.style.border="thin red solid";
                break;

            case "mouseout":
                alert("mouseout");
                break;
        }
    };
    button.onclick=handler;
    button.onmouseover=handler;
    button.onmouseout=handler;
    </script>
</body>
</html>

这样写的封装性似乎会更好一些！

例4

　　html事件处理程序也可以使用event对象，只是这里不存在传入参数的问题了。。如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html对象</title>
</head>
<body>
    <button onclick="alert(event.type)">点我</button>  
    <!-- 点击之后弹出窗口click -->
</body>
</html>

到这就讲完了DOM中的事件对象，那么接下来就要谈谈特立独行的IE了。

第二部分：IE中的事件对象

　　DOM中的事件对象时不需要区分我们是通过何种方式来添加事件处理程序的，如DOM0级、DOM2级和HTML事件处理程序，对象都直接使用event即可。而IE中却不是这么简单。

　　我们把IE中的事件对象分为三种情况来讲

第一种：DOM0级方法添加事件处理程序时的事件对象
第二种：IE事件添加事件处理程序时的事件对象
第三种：HTML方法添加事件处理程序时的事件对象

第一种：DOM0级方法添加事件处理程序的事件对象

　　这时，event对象作为了window对象的一个属性。举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象</title>
</head>
<body>
    <button id="button">点我</button>  
<script>
    var button=document.getElementById("button");
    button.onclick=function(){
        var event=window.event;
        alert(event.type);  //click  这在chrome中也可使用
    };
</script>
</body>
</html>

第二种：IE事件添加事件处理程序时的事件对象

　　　这时需要有event对象传入事件处理程序函数中，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象</title>
</head>
<body>
    <button id="button">点我</button>  
<script>
    var button=document.getElementById("button");
    button.attachEvent("click",function(event){
        alert(event.type);  //"click"
    });
</script>
</body>
</html>

这里也可以通过window对象来访问event对象，不过最好还是使用传入参数的方法。

第三种：HTML事件处理程序中的对象

　　这个方法与DOM中的相同。举例如下：

<!从 Javascript 中的事件侦听器调用访问对象的属性
】从Javascript中的事件侦听器调用访问对象的属性【英文标题】：Accessinganobject\'spropertyfromaneventlistenercallinJavascript【发布时间】：2010-11-0801:34:13【问题描述】：下面我正在用Javascript创建一个对象。在构造函数中，我正在设置一个...  查看详情  
                
Javascript：“onchange”事件不适用于“文本输入”对象中的“值”更改
】Javascript：“onchange”事件不适用于“文本输入”对象中的“值”更改【英文标题】：Javascript:"onchange"eventdoesnotworkwith"value"changein"textinput"object【发布时间】：2011-10-1304:36:54【问题描述】：我有一个带有type=...  查看详情  
                
javascript事件对象
一．事件对象事件处理三部分组成：对象.事件处理函数=函数。例如：单击文档任意处。1.鼠标按钮非IE(W3C)中的button属性0表示主鼠标按钮(常规一般是鼠标左键)1表示中间的鼠标按钮(鼠标滚轮按钮)2表示次鼠标按钮(常规一般是鼠...  查看详情  
                
javascript事件对象
1、DOM中的事件对象兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0级或DOM2级），都会传入event对象。varbtn=document.getElementById("myBtn");btn.onclick=function(event){alert(event.type);//"click"...  查看详情  
                
浅谈javascript的事件（事件对象）
　　在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中，会包含鼠标的位置信息。而键盘触发的事件会...  查看详情  
                
javascript中的事件冒泡和事件捕获
焦点事件onfocus:得到焦点onblur:失去焦点事件冒泡(和样式无关，结构)当一个元素接收到事件的时候，会把他接收到的所有事件传播给他的父级,一直到顶层window阻止冒泡:当前要阻止冒泡的事件函数中调用event.cancelBubble=true;//阻止当...  查看详情  
                
深入理解javascript的闭包特性如何给循环中的对象添加事件
...获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。1. <!DOCTYPE HTML&g  查看详情  
                
javascript的事件dom模型事件流模型以及内置对象详解
JS中的事件JS中的事件分类　　1.鼠标事件：　　　　click/dbclick/mouseover/mouseout　　2.HTML事件：　　　　onload/onunload/onsubmit/onresize/onfocus/onchange/onscroll　　3.键盘事件　　　　keydown：键盘按下时触发。　　　　keypress：键盘按下并弹...  查看详情  
                
javascript--事件
 event概念及作用在触发DOM上某个事件时，会产生一个事件对象event,这个对象包含着所有事件相      关的信息，包含导致事件的元素，事件的类型以及其他的与特定事件相关的信息。n 它是事件绑定中...  查看详情  
                
javascript中的事件
#总结上星期五主要内容讲的是事件有事件流的概念，总结来说就是三种传递的方法，dom浏览器默认为从下往上的冒泡方式，但是可以支持捕获方式，而IE只有冒泡。事件分四种：内嵌事件、DOM0级事件和DOM2级事件、以及IE的事件...  查看详情  
                
javascript中的dom，bom详细介绍；
...BOM：浏览器对象模型，与浏览器交互的方法和接口； JavaScript事件定义及其三要素 事件：发生在页面中的可以被JavaScript侦测到的交互行为； 在事件触发时JavaScri  查看详情  
                
在事件处理函数中的this
参考技术A在JavaScript中，this是一个很重要的关键字。此前写过一篇文章：JavaScript中的this真没那么难理解。本文内容主要是，针对事件处理函数中如何使用this的几种方法及区别。我们将在本文讨论的问题是：在函数doSomething()中th...  查看详情  
                
javascript的onsubmit事件的作用是
A）当一个表单中的对象被点击时，执行的JavaScript事件B）当用户提交一个表单时，需要执行的JAVASCRIPT事件C）当鼠标移出对象时发生的事件D）对象发生改变时调用的事件E）当一个鼠标指针从对象或区域之个移到对象或区域上时...  查看详情  
                
浅谈javascript的事件（事件委托）
　　事件处理程序为Web程序提供了系统交互，但是如果页面中的事件处理程序太多，则会影响页面的性能。每个函数都是对象，都会占用内存，内存中对象越多，性能越差。需要事先为DOM对象指定事件处理程序，导致访问DOM的次...  查看详情  
                
javascript中的window.event代表的是事件的状态，但是我有一个疑问。。。
...件对向是引发事件涵数的第一个参数，参数名随意。二、javascript函数（方法）d()参数为e||window.event 表示e或window.event 这句话是跨浏览器的写法 支持这两种方式的浏览器才能进入该方法，IE中该对象为window.event(window可...  查看详情  
                
javascript中的类和对象
我是初学者，对javascript的类和对象一直弄不清楚，希望高手解答。另外，Javascript和Java中的面向对象有哪些不同？还有继承，麻烦也讲一下，谢谢！javascript是弱类型语言，没有java那么成熟javascript是基于对象，而java是面向对象...  查看详情  
                
javascript学习之事件委托
1内存和性能　　在JavaScript中，添加到页面上的事件处理程序的数量直接关系到页面的整体运行性能：　　首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。　　其次，必须事先指定所有事件处理程序...  查看详情  
                
javascript中的事件流和事件处理程序（读书笔记思维导图）
　JavaScript程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web浏览器就会产生事件（event）。　　JavaScript与HTML之间的交互是通过事件实现的。事件就...  查看详情