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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php实现最简单的MVC框架实例教程
2014/09/08 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jQuery技巧总结
2011/01/01 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
用console.table()调试javascript
2014/09/04 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
python绘制立方体的方法
2018/07/02 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
化工工艺专业求职信
2013/09/22 职场文书
银行职业规划书范文
2013/12/28 职场文书
运动会开幕式主持词
2014/03/28 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
城南旧事读书笔记
2015/06/29 职场文书
公司酒会致辞
2015/07/30 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis