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 Jquery 遍历Json的实现代码
Mar 31 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
php定时执行任务设置详解
2015/02/06 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
js常用DOM方法详解
2017/02/04 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python单例模式实例分析
2015/01/14 Python
python2.7到3.x迁移指南
2018/02/01 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
Linux操作面试题
2015/02/11 面试题
销售心得体会
2014/01/02 职场文书
职务聘任书范文
2014/03/29 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
设备技术员岗位职责
2015/04/11 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python