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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
初学Javascript的一些总结
Nov 03 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vuex的简单使用教程
Feb 02 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
做个自己站内搜索引擎
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
PHP输出时间差函数代码
2013/01/28 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
python 递归相关知识总结
2021/03/03 Python
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
物理研修随笔感言
2014/02/14 职场文书
二手房购房意向书范本
2014/04/01 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
高温慰问简报
2015/07/21 职场文书
如何Tomcat中使用ipv6地址
2022/05/06 Servers