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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
小程序实现多选框功能
Oct 30 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
php中请求url的五种方法总结
2017/07/13 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python3 log10()函数简单用法
2019/02/19 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
NumPy中的维度Axis详解
2019/11/26 Python
Python定义函数实现累计求和操作
2020/05/03 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
老干部工作先进集体事迹材料
2014/05/21 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
python实现股票历史数据可视化分析案例
2021/06/10 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript