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的9个陷阱及评点分析
May 16 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
浅析java线程中断的办法
2018/07/29 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
餐饮管理自我介绍信
2014/01/15 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
支行行长岗位职责
2015/02/15 职场文书
培训班开班主持词
2015/07/02 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript