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 事件冒泡简介及应用
Jan 11 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
JS+CSS实现炫酷光感效果
Sep 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
两个php日期控制类实例
2014/12/09 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
详解python实现线程安全的单例模式
2018/03/05 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
企业总经理岗位职责
2014/02/13 职场文书
《学棋》教后反思
2014/04/14 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015年科协工作总结
2015/05/19 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server