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注入技巧
Jun 22 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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 远程图片保存到本地的函数类
2008/12/08 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
python使用socket连接远程服务器的方法
2015/04/29 Python
Python自动发邮件脚本
2017/03/31 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python能做什么
2020/06/02 Python
Python如何对齐字符串
2020/07/30 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
调查研究项目计划书
2014/04/29 职场文书
企业口号大全
2014/06/12 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书