事件对象——event
一、介绍
把一个click时间log出来是这样的:
{
altKey:false,
bubbles:true,
button:0,
buttons:0,
cancelBubble:false,
cancelable:true,
clientX:1,
clientY:3,
composed:true,
ctrlKey:false,
currentTarget:null,
defaultPrevented:false,
detail:1,
eventPhase:0,
fromElement:null,
isTrusted:true,
layerX:1,
layerY:147,
metaKey:false,
movementX:0,
movementY:0,
offsetX:1,
offsetY:0,
pageX:1,
pageY:147,
path:(5) [div, body, html, document, Window],
relatedTarget:null,
returnValue:true,
screenX:1,
screenY:94,
shiftKey:false,
sourceCapabilities:InputDeviceCapabilities,
srcElement:div,
target:div,
timeStamp:12270.44,
toElement:div,
type:"click",
view:Window ,
which:1,
x:1,
y:3
}
二、详细的一些注意点
在IE8,事件触发有一个对象叫做event,event里面装着各种事件的相关属性值
但是Firefox不支持event,直到现在最新版本都不支持,chrome和IE9支持ev和event
chrome | IE9+ | FF | IE8- | |
ev | √ | √ | √ | |
event | √ | √ | √ |
document.onkeydown=function (ev)
{
var oEvent=ev||event; alert(oEvent.keyCode);
};
1.兼容事件对象 var oEvent=ev||event;
2.阻止事件冒泡 oEvent.cancelBubble = true;
document.onclick=function (ev)
{
var oEvent=ev||event; oEvent.cancelBubble = true;
};
3.默认行为
禁止默认事件,return false可以去除浏览器自带行为。
4.ctrl+回车
onkeydown事件会多出keyCode属性
var oTxt1=document.getElementById('txt1'); oTxt1.onkeydown=function (ev)
{
var oEvent=ev||event;
if(oEvent.keyCode==13 && oEvent.ctrlKey)
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};
除了ctrlKey外,还有shiftKey和altKey
事件对象——event的更多相关文章
- 重新审视事件对象event
前言:之前在学习事件对象event时,一是一直在chrome浏览器(作为主运行环境)下运行调试自个儿程序,二是可能当时对事件对象理解不透彻才导致现在对事件对象的用法陷入了一个大坑,遂以此篇博客记之. ...
- 谈谈事件对象-event
JavaScript 中的事件对象(event) 当我们每次触发一种事件(如点击事件),我们会在回调函数中传入事件对象event.今天就来来谈谈. 1.当我们想判断当前事件是我们想要的事件类型时,可以 ...
- JavaScript:事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
- jacascript 事件对象event
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 在触发DOM上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息.所有浏览 ...
- javaScript中的事件对象event
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
- Javascript和jquery事件--事件对象event
1. 事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些?
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- JS-特效 ~ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
- js 事件对象event
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...
- javaScript中的事件对象event是怎样
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
随机推荐
- Beta版发布说明
我们的作品“校友聊”软件的最终版本于6月19日最终发布了,下面我们将对自己的产品进行介绍. 在使用之前,首先要进行用户注册,用户可以自行设置自己的账号,姓名,密码,签名,头像等信息,头像信息也可以在文 ...
- 第三次Sprint
Not CHECKED OUT CHECKED OUT DONE!: SPRINT GOAL: BETA-READY 修改bug 完善界面
- Redis应用一例(存证数量用计数器实现)
public Long getCreationCounter() { String host =PropertyUtils.getPropertyValue("redis.server.ho ...
- python有序字典
最近的django开发中用到了有序字典,所以研究了一下,以下. 示例: 有序字典和通常字典类似,只是它可以记录元素插入其中的顺序,而一般字典是会以任意的顺序迭代的. 普通字典: d1={} d1['a ...
- pandas取值
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/24 15:03 # @Author : zhang chao # @Fi ...
- 跪求delphi 中的bitbutton 中的bmp图标
C:\Program Files (x86)\Embarcadero\RAD Studio\11.0\Images\GlyFX
- 关于JavaScript中this的软绑定
首先,什么是软绑定? 所谓软绑定,是和硬绑定相对应的一个词,在详细解释软绑定之前,我们先来看看硬绑定.在JavaScript中,this的绑定是动态的,在函数被调用的时候绑定,它指向什么完全取决于函数 ...
- JDK8字符串拼接的正确姿势
1. 对列表中的元素进行拼接 以前,对一个列表中的字符串进行拼接时,常见的代码如示例1所示: 代码示例1 List<String> ids = ImmutableList.of(" ...
- codeforces9A
Die Roll CodeForces - 9A Yakko,Wakko和Dot,世界著名的狂欢三宝,哈哈,不知道你是否看过这个动画片. 某一天,过年了,他们决定暂定卡通表演,并去某些地方旅游一下.Y ...
- BZOJ3569 DZY Loves Chinese II(随机化+树上差分+线性基)
上一题的强制在线版.对图跑出一个dfs树,给非树边赋上随机权值,树边的权值为覆盖他的非树边权值的异或.这样如果某条树边和覆盖他的非树边都被割掉(即图不连通),他们的异或值就为0.每次对询问看有没有子集 ...