JavaScript事件学习小结(三)js事件对象


Posted in Javascript onJune 09, 2016

相关阅读:

JavaScript事件学习小结(五)js中事件类型之鼠标事件

一、事件对象

1、认识事件对象

事件在浏览器中是以对象的形式存在的,即event。触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

例如:鼠标操作产生的event中会包含鼠标位置的信息;键盘操作产生的event中会包含与按下的键有关的信息。

所有浏览器都支持event对象,但支持方式不同,在DOM中event对象必须作为唯一的参数传给事件处理函数,在IE中event是window对象的一个属性。

2、html事件处理程序中event

<input id="btn" type="button" value="click" onclick=" console.log('html事件处理程序'+event.type)"/>

这样会创建一个包含局部变量event的函数。可通过event直接访问事件对象。

3、DOM中的事件对象

DOM0级和DOM2级事件处理程序都会把event作为参数传入。

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(event){
console.log("DOM0 & click");
console.log(event.type); //click
}
btn.addEventListener("click", function (event) {
console.log("DOM2 & click");
console.log(event.type); //click
},false);
</script>
</body>

4、IE中的事件对象

第一种情况: 通过DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function () {
var event=window.event;
console.log(event.type); //click
}
</script>
</body>

第二种情况:通过attachEvent()添加的事件处理程序,event对象作为参数传入。

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
})
</script>
</body>

但是我有两个地方不懂。

1、通过DOM0级方法添加的事件处理程序中同样可以传入一个event参数,它的type和window.event.type一样,但是传入的event参数却和window.event不一样,为什么?

btn.onclick= function (event) {
var event1=window.event;
console.log('event1.type='+event1.type); //event1.type=click
console.log('event.type='+event.type); //event.type=click
console.log('event1==event?'+(event==event1)); //event1==event?false
}

2、通过attachEvent添加的事件处理程序中传入的event和window.event是不一样的,为什么?

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
console.log("event==window.event?"+(event==window.event)); //event==window.event?false
})
</script>
</body>

以上所述是小编给大家介绍的JavaScript事件学习小结(三)js事件对象的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站!

Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 #Javascript
JavaScript事件学习小结(一)事件流
Jun 09 #Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 #Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 #Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 #Javascript
Node.js中npm常用命令大全
Jun 09 #Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 #Javascript
You might like
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php中的strpos使用示例
2014/02/27 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
BootStrap selectpicker
2016/06/20 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python调用支付宝支付接口流程
2019/08/15 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Python hmac模块使用实例解析
2019/12/24 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
护士自荐信
2013/10/25 职场文书
给领导的检讨书
2014/02/16 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
法制宣传日活动总结
2014/04/29 职场文书
社区活动总结报告
2014/05/05 职场文书
投标保密承诺书
2014/05/19 职场文书
单位工作证明书格式
2014/10/04 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Python进程间的通信之语法学习
2022/04/11 Python