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 相关文章推荐
基于JQuery的cookie插件
Apr 07 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
javascript数组的使用
Mar 28 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
js的延迟执行问题分析
Jun 23 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
AJAX学习笔记
May 18 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
ajax php 实现写入数据库
2009/09/02 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
python元组操作实例解析
2014/09/23 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
python urllib爬虫模块使用解析
2019/09/05 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
财政局长自荐信范文
2013/12/22 职场文书
公务员培的训心得体会
2014/09/01 职场文书
学生吸烟检讨书
2014/09/14 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL