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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
由浅到深了解JavaScript类
Sep 08 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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防注入安全代码
2008/04/09 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
什么是serialVersionUID
2016/03/04 面试题
护士自我鉴定
2013/10/23 职场文书
给全校老师的建议书
2014/03/13 职场文书
初中学生期末评语
2014/04/24 职场文书
个人委托书怎么写
2014/09/17 职场文书
公司股东出资证明书
2014/11/01 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
会计求职信怎么写
2015/03/20 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
如何写通讯稿
2015/07/22 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL