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入门教程(3) js面向对象
Jan 31 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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服务器实现多session并发运行
2006/10/09 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php实现留言板功能
2017/03/05 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Fabric 应用案例
2016/08/28 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
python实现简易内存监控
2018/06/21 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python retrying模块的使用方法详解
2019/09/25 Python
Python 获取项目根路径的代码
2019/09/27 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
网络技术支持面试题
2013/04/22 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
法制宣传月活动总结
2014/04/29 职场文书
化工专业自荐书
2014/06/16 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
python如何进行基准测试
2021/04/26 Python
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python