说说 JavaScript 的事件对象

最新推荐文章于 2024-05-29 10:19:19 发布
最新推荐文章于 2024-05-29 10:19:19 发布
阅读量622 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deniro_li/article/details/72917775
版权

触发 DOM 上的事件时，会生成一个事件对象 event，它包含着所有与事件有关的信息，诸如导致事件的元素、事件的类型以及其他与特定事件相关的信息。所有的浏览器都支持 event 对象，但支持的方式不同。

1 DOM 中的事件对象

兼容 DOM 的浏览器会将 event 对象传入事件处理程序（DOM0 级与 DOM2 级都支持）：

 var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
    console.log(event.type);//"click"
};
btn.addEventListener("click",function(event){
    console.log(event.type);//"click"
,false};

event.type 保存的是被触发的事件类型。

通过 HTML 属性指定事件处理程序时， event 中保存的是 event 对象：

<input type="button" value="Click Me" onclick="alert(event.type)"/>

event 对象包含着创建它的特定事件相关的属性和方法，所以可能每个特定事件都有自己所特有的属性和方法，不过所有事件都会有这些属性和方法：

属性/方法类型读/写说明
bubblesBoolean只读事件是否冒泡。
cancelableBoolean只读是否可以取消事件的默认行为。
currentTargetElement只读与当前事件处理程序相关的元素。
defaultPreventedBoolean只读true 表示已调用 preventDefault() 方法（DOM3 新增）。
detailInteger只读与事件相关的细节信息。
eventPhaseInteger只读调用事件处理程序的阶段；1：捕获；2：处于目标；3：冒泡。
preventDefault()Function只读取消事件的默认行为（如果 cancelable 为 true，就可以调用这个方法）。
stopImmediatePropagation()Function只读阻止事件被进一步捕获或者冒泡，同时阻止任何事件处理程序被调用（DOM3 新增）。
stopPropagation()Function只读阻止事件被进一步捕获或者冒泡（如果 bubbles 为 true，就可以调用这个方法）。
targetElement只读事件的目标。
trustedBoolean只读true：事件是由浏览器生成的；false：事件是通过 JavaScript 创建的（DOM3 新增）。
typeString只读被触发的事件类型。
viewAbstractView只读与事件相关的抽象视图，相当于发生事件的 window 对象。

在事件处理程序内部，this 始终等于 currentTarget，而 target 等于事件的实际目标。如果直接将事件处理程序指定给目标元素，那么这三个值相等：

<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
        console.log(event.currentTarget === this);//true
        console.log(event.target === this);//true
    }
</script>

如果事件处理程序指定到按钮的父节点上，那么它们是不同的：

<script type="text/javascript">
    document.body.onclick = function (event) {
        console.log(event.currentTarget === document.body);//true
        console.log(this === document.body);//true
        console.log(event.target === document.getElementById("myBtn"));//true
    }
</script>

如果需要通过一个函数来处理多个事件，那么可以使用 type 属性：

<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    var handler = function (event) {
        switch (event.type) {
            case "click":
                console.log("Clicked");
                break;
            case "mouseover":
                event.target.style.backgroundColor = "red";
                break;
            case "mouseout":
                event.target.style.backgroundColor = "";
                break;
        }
    };

    btn.onclick = handler;
    btn.onmouseover = handler;
    btn.onmouseout = handler;

</script>

使用 preventDefault() 方法来阻止特定事件的默认行为：

<a id="myLink" href="163.com">点我</a>
<script type="text/javascript">
    var link = document.getElementById("myLink");
    link.onclick = function (event) {
        event.preventDefault();
    }

</script>

注意：只有 cancelable 属性值为 true 的事件，才可以使用 preventDefault() 阻止特定事件的默认行为！

stopPropagation() 会立即阻止事件在 DOM 层次的传播。比如这里在按钮事件中调用 stopPropagation() ，来避免触发注册在 document.body 上的事件处理程序：

<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
        console.log("Clicked");
        event.stopPropagation();
    };

    document.body.onclick = function (event) {
        console.log("Body clicked");

    };
</script>

eventPhase 属性，可以确定事件当前正处于事件流的哪一个阶段：

<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
        console.log(event.eventPhase);//2
    };

    document.body.addEventListener("click", function (event) {
        console.log(event.eventPhase);//1
    }, true);//true 表示捕获阶段

    document.body.onclick = function (event) {
        console.log(event.eventPhase);//3

    };
</script>

注意： 只有在事件处理程序执行期间，event 对象才会存在；一旦事件处理程序执行结束，event 对象就会被销毁！

2 IE 中的事件对象

在使用 DOM0 级方法添加事件处理程序时，event 对象是作为 window 对象的一个属性存在：

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

如果是通过 HTML 属性指定的事件处理程序，也跟 DOM一样，可以通过 event 变量来访问 event 对象。

IE 的 event 对象也包含着创建它的特定事件相关的属性和方法，所以可能每个特定事件都有自己所特有的属性和方法，不过所有事件都会有这些属性和方法：

属性类型读/写说明
cancelBubbleBoolean读/写默认值为 false，true 表示可以取消事件冒泡（同 DOM 的 stopPropagation() ）。
returnValueBoolean读/写默认值为 true，false 表示取消事件默认行为（同 DOM 的 preventDefault() ）。
srcElementElement只读事件的目标（同 DOM 中的 target）。
typeString只读被触发的事件类型。

因为事件处理程序的作用域是根据它指定的方式来确定的，所以最好是使用 event.srcElement 来得到事件的目标比较靠谱：

<button id="myBtn">点我</button>


<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function () {
        console.log(window.event.srcElement === this);//true
    };

    btn.attachEvent("onclick", function (event) {
        console.log(event.srcElement === this);//false

    });
</script>

将 returnValue 设置为 false，就能阻止默认行为：

<a id="myLink" href="163.com">点我</a>
<script type="text/javascript">
    var link = document.getElementById("myLink");
    link.onclick = function () {
        window.event.returnValue = false;
    }
</script>

与 DOM 不同的是，这里没有办法确定事件是否能被取消。

因为 IE 不支持事件捕获，所以只能取消事件冒泡：

<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function () {
        console.log("Clicked");
        window.event.cancelBubble = true;
    };

    document.body.onclick = function (event) {
        console.log("Body clicked");

    };
</script>

3 跨浏览器的事件对象

我们把之前的 EventUtil 对象进行增强：

var EventUtil = {
    ...

    /**
     * 返回对 event 对象的引用
     * @param event
     * @returns {*}
     */
    getEvent: function (event) {
        return event ? event : window.event;
    },

    /**
     * 返回事件的目标
     * @param event
     * @returns {*|elem|Object}
     */
    getTarget: function (event) {
        return event.target || event.srcElement;
    },

    /**
     * 取消事件默认行为
     * @param event
     */
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    /**
     * 阻止事件流
     * @param event
     */
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }

    }
}

这样使用：

<button id="myBtn">点我</button>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
        event = EventUtil.getEvent(event);//确保所有浏览器都能使用 event 对象
        var target = EventUtil.getTarget(event);
        console.log(target);
    }
</script>

取消事件默认行为：

<a id="myLink" href="http://www.163.com">点我</a>

<script type="text/javascript">
    var link = document.getElementById("myLink");
    link.onclick = function (event) {
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
    }

</script>

阻止事件传播：

<button id="myBtn">点我</button>

<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function (event) {
        console.log("Clicked");
        event = EventUtil.getEvent(event);
        EventUtil.stopPropagation(event);
    };

    document.body.onclick = function (event) {
        console.log("Body clicked");

    };
</script>

因为 IE 不支持事件捕获，所以 EventUtil 的 stopPropagation() 的方法只能阻止事件冒泡。

Deniro Lee
关注
专栏目录
一文读懂 JavaScript 事件
02-12 988
什么是事件模型，什么是事件流
说说JavaScript 内置的常用对象有哪些？并列举该对象常用的方法？
m0_64564920的博客
05-04 757
说说JavaScript 内置的常用对象有哪些？并列举该对象常用的方法？ 对象及方法 Arguments ：函数参数集合 Arguments[ ]：函数参数的数组 Arguments ：一个函数的参数和其他属性 Arguments.callee ：当前正在运行的函数 Arguments.length ：传递给函数的参数的个数 Array 数组 length ：属性 动态获取数组长度 join() ：将一个数组转成字符串，返回一个字符串 reverse() ：将数组中各元素颠倒顺序 delete ：运算符 只
JS事件和JS对象
blue_86的博客
10-29 228
事件：onabort图像的加载被中断。onblur元素失去焦点。onchange域的内容被改变。onclick当用户点击某个对象时调用的事件句柄。ondblclick当用户双击某个对象时调用的事件句柄。onerror在加载文档或图像时发生错误。onfocus元素获得焦点。需要注意以下三个的先后顺序。onkeydown某个键盘按键被按下。 onkeypress某个键盘按键被按下并松开。onk
javascript_事件对象
smile7
11-05 395
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> event window.onload=function(){ var oBtnClic
JavaScript事件对象
Summit的专栏
10-31 649
DOM中的事件对象触发DOM某个事件时，浏览器会将一个event对象传入到事件处理程序中,这个对象中包含了所有与事件有关的信息。如下显示事件类型的代码所示：<body> <input id="myBtn" type="button" value="Click me"> <script> var btn = document.getElementById('myBtn'); btn.o
解析JavaScript对象间的关系
标子 的专栏
05-28 757
JavaScript里万物皆对象，但是对象之间的关系异常复杂和混乱，所以决定花时间把他们之间的核心关系搞清楚，并制作成图，分享出来，了解了这个图，再也不用买步步高点读机了，以下程序在ie11，chrome49，firfox46，opera37下都是true，ie10之前的ie版本访问__proto__会出错。啥也不说了，尽在图和代码中。 -->
Javascript中的设置事件/事件对象及事件对象作用
xijiaoliumang的博客
02-11 602
设置事件 DOM1级设置事件的方法 1. function funcName(){ alert(); } 2. 3. var node = document.getElementById("node"); node.onclick = function funcName(){ alert(); } 取消事件: node.onclick = nul
说说 JavaScript 如何实现对象继承
读万卷书，行万里路
03-23 3163
1 原型链可以利用 JavaScript 原型，让一个引用类型继承另一个引用类型的属性和方法：//父类 function SuperType() { this.property = true; }SuperType.prototype.getSuperValue = function () { return this.property; };//子类 function SubType
JavaScript对象：面向对象还是基于对象？
最新发布
qq_37756660的博客
05-29 802
我们先来说说什么是对象，因为翻译的原因，中文语境下我们很难理解“对象”的真正含义。事实上，Object（对象）在英文中，是一切事物的总称，这和面向对象编程的抽象思维有互通之处。中文的“对象”却没有这样的普适性，我们在学习编程的过程中，更多是把它当作一个专业名词来理解。但不论如何，我们应该认识到，对象并不是计算机领域凭空造出来的概念，它是顺着人类思维模式产生的一种抽象（于是面向对象编程也被认为是：更接近人类思维模式的一种编程范式）。那么，我们先来看看在人类思维模式下，对象究竟是什么。
JavaScript 中Date对象的格式化代码方法汇总
12-03
JavaScript默认的时间格式我们一般情况下不会用，所以需要进行格式化，下面说说我总结的JavaScript时间格式化方法。 很多时候，我们可以利用JavaScript中Date对象的内置方法来格式化，如： var d = new Date(); ...
JavaScript 对象、函数和继承
12-09
既然他是基于对象的，那么我们就来说说js中的对象。有人说js中所有的都是对象，这句话不完全正确。正确的一方是他强调了对象在js中的重要性，对象在js中无处不在，包括可以构造对象的函数本身也是对象。但是另一方面...
Javascript创建对象的七种常用方式
ping65588的博客
08-16 1098
Javascript创建对象的七种常用方式
javascript基于对象吗
qf2019的博客
07-22 360
javascript是面向对象的，js每个内建对象都是从object派生出来的，这样就有继承，多态和重构三个面向对象的特性，即使现在js是基于prototype的伪继承，但是总体思想是一个面向对象的语言。 与其它的语言相比，JavaScript中的“对象”总是显得不是那么合群。一些新人在学习JavaScript面向对象时，往往也会有疑惑：为什么JavaScript（直到ES6）有对象的概念，但是却没有像其他的语言那样，有类的概念呢？为什么在JavaScript对象里可以自由添加属性，而其他的语言却不能呢？
浅谈javascript之事件、函数、方法、对象 各代表何含义，通俗解释及其之间的关联与区别
哈里·雪利博客
02-20 4009
简单来说： 在javascript中，所有的事件都是通过函数来执行的,函数本身就是动作(针对事件来说)，也是方法(针对对象来说)！对象是指的谁触发了事件，绑定事件的主人。 【事件】 事件就如神经开关，刺激激发动作函数，只需交互一瞬间；  【函数】 函数就是对事件作出具体反馈映射，即执行处理某种事件的动作，需要一段执行过程。 【方法】 当把一个函数赋给某个对象当属性时，就变成了方法：
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement' 的解决办法
热门推荐
读万卷书，行万里路
09-28 1万+
1 发现问题最近开发了 Excel 导入、导出工具，极大地提升了工作效率，沾沾自喜中。然而把项目部署在测试环境上，却发现在 chrome 中无法上传文件，日志报了以下错误：Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with
JavaScript 开发框架横向比对（Vue、React 和 Angular）
读万卷书，行万里路
05-30 1万+
1 背景比对 比对 Vue React Angular 出现年月 2013-7 2013-3 2010-1 框架类型 MVVM MVC MVW 开源许可 MIT license BSD3-license MIT license * MIT license 与 BSD-license 之间的区别是：MIT...
说说如何使用 HTML5 嵌入音频和视频（媒体标签）
读万卷书，行万里路
07-25 1万+
HTML5 使用 audio 和 video 元素来嵌入音频和视频内容。另外还提供了与这两个标签相关的 JavaScript API，这样就可以创建我们自己的音视频控件咯：<!-- 嵌入视频 --> <video id="player" src="xxx.ogg" poster="mymovie.jpg" width="300" height="200">
JavaScript 的关键字和保留字大全
读万卷书，行万里路
02-03 6332
——跟我一起学 JavaScript (3) 基于 ECMA-262 标准 1 关键字 具有特定用途 不能作为标识符 带 * 表示是 ECMAScript 第 5 版新增的关键字break do instanceof typeof case else new var catch finally return void continue for switch while debugger* funct
手把手教你为百度地图的多个覆盖物（每个覆盖物拥有各自的参数），绑定事件处理函数
读万卷书，行万里路
09-30 6133
百度地图的覆盖物有很多种，比如点、折线等等。项目要求在地图上划出多个折线，并需要对这些折线绑定事件处理函数（弹出一个信息窗口）。折线与信息窗口的定义代码如下：var DeniroMap = { lines: [],//存储已创建好的折线对象数组 //折线样式 lineStyle: {strokeColor: "blue", strokeWeight: 6
具体说说javascript
04-26
JavaScript 是一种脚本语言，通常用于 Web 开发中的交互性操作和动态页面设计。其语法类似于 C 语言，允许开发人员在网页上添加复杂的交互效果和动态内容，比如弹窗、表单验证等等。在浏览器中，JavaScript 可用于操作 DOM（文档对象模型）、监听事件、发送网络请求，从而实现丰富的用户体验。同时，JavaScript 也可以用于后端开发，如 Node.js。它是一种非常流行的编程语言，被广泛应用于网页开发、移动应用开发和游戏开发等领域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值