javascript 事件对象
1.事件对象
用来记录一些事件发生时的相关信息的对象
A.只有当事件发生的时候才产生,只能在处理函数内部访问
B.处理函数运行结束后自动销毁
2.如何获取事件对象
IE: window.event
FF: 对象.on事件 = function(e)
通用法
var ev = e || window.event
3.事件对象的属性
A.关于鼠标事件的事件对象
相对浏览器位置
clientX/clientY 当鼠标事件发生时,鼠标相对于浏览器的位置
B.相对于屏幕位置的
screenX/screenY 当鼠标事件发生时,鼠标相对于屏幕的位置
C.相对于事件源的位置
IE:
offsetX/offsetY 当鼠标事件发生的时候,鼠标相对于事件源的位置
FF:
layerX/layerY 当鼠标发生时,鼠标相对于事件源的位置
4.键盘事件的事件对象
keyCode // 获取键盘码 空格:32 左上右下键码:37/38/39/40
altKey/ctrlKey/shiftKey 判断相应的键是否是按下,true/false
type // 用来检测事件的类型
例子:
<script>
window.onload = function(){
var but = document.getElementById("but");
var divs = null;
but.onclick = function(){
if(divs != null){
return;
}
divs = document.createElement("div");
divs.style.width="300px";
divs.style.height= "150px";
divs.style.border = "4px solid red";
divs.style.position = "absolute";
var a = document.createElement("a");
a.innerHTML = "X";
a.style.styleFloat = "right";
a.style.cursor = "pointer";
divs.appendChild(a);
document.body.appendChild(divs);
a.onclick = function(){
document.body.removeChild(divs);
divs = null;
}
divs.onmousedown = function(e){
var ok = true;
var ev = e || window.event;
var ox = ev.offsetX || ev.layerX;
var oy = ev.offsetY || ev.layerY;
this.onmousemove = function(ee){
if(!ok){
return;
}
var eev = ee || window.event;
var cx = eev.clientX;
var cy = eev.clientY;
this.style.left = cx-ox+"px";
this.style.top = cy-oy+"px";
}
this.onmouseup = function(){
if(ok){
ok = false;
}
}
}
}
}
</script>
javascript 事件对象的更多相关文章
- 第一百二十节,JavaScript事件对象
JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...
- JavaScript事件对象与事件处理程序
在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...
- JavaScript事件对象
一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...
- JavaScript事件对象【转】
一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...
- Javascript 事件对象(二)event事件
Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- JavaScript事件对象与事件的委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- JavaScript 事件对象event
什么是事件对象? 比如当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. 注:事件通常与函数结合使用,函数不会在事件发生前被执 ...
- JavaScript事件对象属性e.target和this的区别
前言: Event对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象eve ...
- Javascript 事件对象进阶(二)拖拽的应用 - 登录框的拖拽
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- maven分模块间依赖注意事项
1.被依赖模块应该先通过 maven -install 命令将该模块打包为jar发布到本地仓库 2.引用的模块通过在pom.xml文件中添加dependence引用 maven -package 将项 ...
- js 复制网页内容,兼容各浏览器
因需要做一个js单击,复制当前网页url的功能.使用的是如下的方法,但是只能在ie浏览器下正常使用. 方法如下: function copyURL(){ var clipBoardContent=&q ...
- 【开发工具 - Git】之Git使用案例
本帖主要介绍一下Git在实际项目开发中的使用流程,包括克隆.暂存.提交.推送.拉取.分支.冲突解决等,暂时还不包括回退. 1.首先需要安装Git,下一步下一步就行,这里就不说了.值得一提的是,如果Gi ...
- CSS3 keyframes动画实现弹跳效果
首先,“回到顶部”.“用户反馈”这两个按钮是通过定位放在左下角上. (1)“回到顶部”的按钮只有当滚动条有出现下滑时才出现 (2)“用户反馈”按钮,用户刚打开时会抖动一下,引起用户的注意,然后才定住. ...
- HTTP POST发消息
业务需求:模拟TANX给DSP发消息,protobuf数据已弄好. 代码: def PostDataToDSP(self,url,postdata): headers = { #taobao文档规定 ...
- Windows下FFmpeg高速入门
本系列文章导航 Windows下FFmpeg高速入门 ffmpeg參数解释 mencoder和ffmpeg參数具体解释(Java处理视频) Java 生成视频缩略图(ffmpeg) 使用ffmpeg进 ...
- 分布式助手Zookeeper(三)
分布式助手Zookeeper(三)博客分类: Zookeeper zookeeperapi操作zookeeper 本篇,散仙要介绍一下基于zookeeper的一些API的编程. 在此之前,我们先来熟悉 ...
- 动作之CCActionInterval(持续动作)家族
持续动作,顾名思义,就是该动作的执行将持续一段时间.因此持续动作的静态生成函数,往往附带一个时间值Duration. 持续动作类名后缀:一般有两种后缀,一种是To,一种是By.To表示最终达到的目标值 ...
- eclipse 中修改 M2_REPO的值--转载
从eclipse中增加了maven2的插件之后,maven默认的本地库的路径是${user}/.m2/repository/下,一般windows用户的操作系统都安装在C盘,所以这个目录 下的jar包 ...
- Android开发之自定义圆形的ImageView的实现
android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然 ...