微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

JavaScript 获取事件对象的注意点_javascript技巧

php中文网
发布： 2016-05-16 18:49:10
原创
1651人浏览过

平时我们获取事件对象一般写法如下：

AI Room Planner
AI Room Planner

AI 室内设计工具，免费为您的房间提供上百种设计方案

AI Room Planner 91
查看详情 AI Room Planner
复制代码 代码如下:

function getEvent(event) {
return event || window.event // IE:window.event
}

如果没有参数，也可写成（非IE ：事件对象会自动传递给对应的事件处理函数，且为第一个参数）：
复制代码 代码如下:

function getEvent() {
return arguments[0] || window.event // IE:window.event
}

这样的写法在除 Firefox（测试版本：3.0.12，下同） 外的浏览器上运行都不会有问题，但 Firefox 为什么例外呢？让我们这样一种情形：
复制代码 代码如下:


<script> <BR>function foo(){ <BR>var e = getEvent(); <BR>alert(e);} <BR></script>

运行结果在 Firefox 中是 undefined，为什么呢？
在 Firefox 中调用其实是这样的，先调用执行的是：
复制代码 代码如下:

function onclick(event) {
foo();
}

然后调用执行的是：
复制代码 代码如下:

function foo(){
var e = getEvent();
alert(e);
}

会发现在 Firefox 下 onclick="foo()" 中的 foo() 无法自动传入事件对象参数，而默认传递给了系统生成的 onclick 函数，那本例我们可以通过getEvent.caller.caller.arguments[0] 获得事件对象。
因此，我们的 getEvent 可以优化成（参照 yui_2.7.0b 中的 event/event-debug.js 中 getEvent 方法）：
复制代码 代码如下:

function getEvent(event) {
var ev = event || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && (Event == ev.constructor || MouseEvent == ev.constructor)) { /怿飞注：YUI 源码 BUG，ev.constructor 也可能是 MouseEvent，不一定是 Event
break;
}
c = c.caller;
}
}
return ev;
}

当然还有一个很简单的解决方法，就是手动将参数传递给 onclick="foo()"：
复制代码 代码如下:



相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript Konami Code 实现代码_javascript技巧 下一篇：jquery tools之tooltip_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
RxJS中complete与add的异同及加载指示器管理策略 本文深入探讨RxJS中Observer.complete回调与Subscription.add()方法的关键区别及其在异步操作中管理加载指示器（loadingspinner）的最佳实践。我们将解释complete仅在Observable成功完成时触发，而add()则用于注册一个无论Observable成功、失败或被取消都会执行的清理函数，从而明确为何add()是控制加载指示器的更稳健选择。
2025-11-19 22:53:00
823
如何在Angular中通过外键关联父子数据并进行数据增强 本文旨在解决在Angular应用中，如何利用子对象中的外键（foreignkey）从父对象获取额外数据，并将其添加到子对象中，从而实现数据增强。我们将探讨一种结合RxJS、async/await和Promise.all的有效模式，以异步且高效地完成这一任务，确保数据加载和转换的正确性与可读性。
2025-11-19 22:14:01
343
JavaScript网络请求_Axios拦截器机制 Axios拦截器分为请求和响应两种类型，请求拦截器在发送请求前添加认证、设置请求头等，响应拦截器在接收响应后处理数据、错误提示等。通过axios.interceptors.request.use()和axios.interceptors.response.use()注册拦截器，支持多个拦截器按顺序执行，请求拦截器先注册先执行，响应拦截器先注册后执行，适用于统一处理token、loading状态、错误码跳转等场景，提升代码可维护性。
2025-11-19 21:39:55
1001
JavaScript类型系统_TypeScript类型注解与推断原理 TypeScript通过类型注解和类型推断实现静态类型检查。开发者可显式标注变量、函数参数及返回值类型，如constage:number=25；同时编译器能根据初始值自动推断类型，如constcount=42被推断为number。两者结合提升代码安全与可维护性。
2025-11-19 21:39:05
214
JavaScript性能监控_Chrome_DevTools技巧 使用ChromeDevTools的Performance和Profiles面板可精准定位JavaScript性能瓶颈。1.Performance面板记录运行时行为，通过Main轨道分析主线程活动，识别长任务（>50ms）及卡顿原因；2.Profiles面板采集CPU与内存数据，依据SelfTime和TotalTime优化高耗时函数，并通过堆快照对比检测内存泄漏；3.在Timeline中深入事件细节，排查频繁GC、阻塞回调或密集DOM操作引发的重排重绘；4.结合console.time()等API
2025-11-19 21:38:33
283
JavaScript性能优化_代码分割与懒加载 代码分割是将大JavaScript文件拆分为多个小块按需加载，提升首屏性能。通过Webpack等工具支持，可采用入口点分割、动态导入import()和自动分割实现；结合React.lazy()与Suspense可实现路由级懒加载，如React中为Home和About页面按需加载。应合理分割避免过多请求，优先处理路由层级，利用webpackChunkName命名chunk，结合缓存策略和ErrorBoundary优化体验，通过IntersectionObserver预加载关键资源，平衡加载效率与运
2025-11-19 21:38:02
865
JavaScript全屏操作_跨浏览器兼容方案 答案：JavaScript全屏操作需适配多浏览器API差异，通过封装requestFullscreen及各厂商前缀方法实现进入全屏，调用对应exit方法退出，并监听fullscreenchange事件检测状态变化，结合判断fullscreenElement属性确定当前是否全屏，确保在用户交互触发下兼容主流浏览器。
2025-11-19 21:35:49
436
JavaScript自然语言_分词算法JavaScript实现 中文分词推荐使用nodejieba库，因其准确率高且专为中文设计；英文可选Compromise等轻量库。基于词典的最大匹配法（如正向或逆向）适合理解原理，但精度有限。实际应用中应结合停用词过滤、词频统计和机器学习模型提升效果，同时注意词典质量与领域适配以优化分词结果。
2025-11-19 21:35:02
912
JavaScript_微服务架构与分布式系统 JavaScript通过Node.js可构建高性能微服务，适用于I/O密集型场景；使用Express/Fastify/NestJS开发独立服务，Docker容器化部署；服务间通过HTTP/REST、gRPC或消息队列通信，实现解耦；结合Consul等工具完成服务发现与配置管理；引入断路器、超时重试、日志追踪等机制保障系统容错性与可观测性。
2025-11-19 21:33:44
418
JavaScript机器学习_TensorFlow.js模型训练 首先需准备数据并转换为tf.Tensor格式，接着用tf.sequential()构建模型，添加密集层；然后编译模型，选择优化器与损失函数；再调用model.fit()训练模型，指定epochs；最后用model.predict()进行预测。整个流程在JavaScript中完成，适合浏览器端轻量级机器学习应用，需注意数据格式与异步处理。
2025-11-19 21:33:13
325
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部