javascript 事件对象(event 对象)
原文: http://www.cnblogs.com/songyaqi/p/5204143.html
<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="../jquery-1.6.1.js"></script>
<script>
$(document).ready(function(){ updateMousePosition();
/* //get mouse positon
function updateMousePosition(){
document.addEventListener('mousemove', onMouseUpdate, false);
function onMouseUpdate(e) {
x = e.pageX;
y = e.pageY;
document.Form1.posx.value = x;
document.Form1.posy.value = y;
}
} */
$('#run').toggle(function(){alert(1)}, function(){alert(2)});
}); </script>
</head> <body >
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
<button id = "run">toggle</button>
<script>
$(document).ready(function(){
console.log(event);
$('#test').click(say)
function say(){ console.log(event);
}
say(); }) </script>
<div id="test" >aaaa</div>
<input type="text" onkeyup="test(this)"/>
<script> function test(e){
// this = e;
console.log(e.value);
}
</script>
</body>
</html>
-------------------------------------------------------------------------------
javascript 中 直接写在html 中 onclick ="..." 的代码段 和 onclick= "xxx();" xxx() 这个函数里面的代码段,它们对应的一些局部变量参数是不一样的。
区别: 1. ... 里面的this 对象就是 这个html 元素本身, xxx() 中的this 对象是 window对象(this对象不能被自己再去赋值)。
2. ...里面的 event对象就是这个click event 对象, 当然xxx()中的event对象也是event 对象。
---------------------------------------------------------------------------------------------
- 在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性
target来获取到(IE暂且不谈),或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止.以下是event对象的一些属性和方法
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时,”ALT” 是否被按下。 |
| button | 返回当事件被触发时,哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时,鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时,”CTRL” 键是否被按下。 |
| metaKey | 返回当事件被触发时,”meta” 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时,”SHIFT” 键是否被按下。 |
IE属性(除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性)
| 属性 | 描述 |
|---|---|
cancelBubble |
如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。 |
| fromElement | 对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。 |
| keyCode | 对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup |
| offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
returnValue |
如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 |
srcElement |
对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| toElement | 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。 |
- 标准 Event 属性 下面列出了 2 级 DOM 事件标准定义的属性。
| 属性和方法 | 描述 |
|---|---|
| bubbles | 返回布尔值,指示事件是否是起泡事件类型。 |
cancelable |
返回布尔值,指示事件是否可拥可取消的默认动作。 |
currentTarget |
返回其事件监听器触发该事件的元素。 |
| eventPhase | 返回事件传播的当前阶段。 |
target |
返回触发此事件的元素(事件的目标节点)。 |
| timeStamp | 返回事件生成的日期和时间。 |
type |
返回当前 Event 对象表示的事件的名称。 |
| initEvent() | 初始化新创建的 Event 对象的属性。 |
preventDefault() |
通知浏览器不要执行与事件关联的默认动作。 |
stopPropagation() |
不再派发事件。 |
javascript 事件对象(event 对象)的更多相关文章
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- Javascript防冒泡事件与Event对象
防冒泡 防冒泡用到的就是event的属性和方法 function add2shop(e) { if (!e) var e = window.event; e.cancelBubble = true; ...
- javascript高级程序设计---Event对象
事件是一种异步编程的实现方式,本质上是程序各个组成部分之间传递的特定消息. DOM的事件操作(监听和触发),都定义在EventTarget接口 该接口就是三个方法,addEventListener和r ...
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- 添加事件及Event对象的兼容写法
一.事件流 事件流描述的是从页面中接受事件的顺序. IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1.事件冒泡 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点) ...
- javascript高级程序设计---Event对象三
进度事件 进度事件用来描述一个事件进展的过程,比如XMLHttpRequest对象发出的HTTP请求的过程.<img>.<audio>.<video>.<st ...
- javascript高级程序设计---Event对象二
鼠标事件 事件种类 鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...
- 事件的event对象基本解释
事件流: 描述的是在页面中接受事件的顺序主要分为两种: 事件冒泡.事件捕获 事件event对象:1. type 获取事件类型2. target获取事件目标3. stopPropagation() 阻止 ...
- JavaScript事件循环(Event Loop)机制
JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...
- JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍
event.preventDefault()用法介绍: 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 “submit”,在事件传播的任 ...
随机推荐
- Sql生成不重复的数字
-- ============================================= -- Author:TUZI -- Create date: 2016.4.18 -- Descrip ...
- 本地编译全志R系列的步骤(Ubuntu16.04.4版本)
本地编译全志R系列的步骤(Ubuntu16.04.4版本) 2018/6/14 9:32 版本:V1.0 0.获取全志R系列的Android源码包: 请通过渠道/代理商/方案公司获取全志R系列的And ...
- opencv3+python+pycharm报错问题(cmd命令正常)
2018-03-0223:58:59 首先在你已成功安装python的情况下运行cmd命令,下载安装opencv插件 如果在命令行可以使用 import cv2 但是在IDE上面只输入import c ...
- docloud后台管理项目(开篇)
最近朋友做app需要web做后台管理,所以花了一周时间做了这个项目. 废话不多说,开发环境是nginx+php5.3,使用thinkphp框架.是一个医疗器械数据统计的后台,业务功能很简单就是查看用户 ...
- 【linux】 下根目录,家目录区别,以及普通用户到root用户的切换
一:家目录 一般普通用户,家目录是/home/用户名 root用户,家目录是/root root登录系统,执行如下命令进入root的家目录 cd /cd ~ 进入家目录后执行如下命令获取具体路径 pw ...
- Mybatis学习总结一
一.Mybatis架构 JAR包下载地址 1. mybatis配置 SqlMapConfig.xml,此文件作为mybatis的全局配置文件,配置了mybatis的运行环境等信息. mapper. ...
- 01Microsoft SQL Server
Microsoft SQL Server Microsoft SQL Server 是Microsoft 公司推出的关系型数据库管理系统.具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越膝上型 ...
- 数组array的常用方法简介
数组方法简介 数组总共有22种方法,本文将其分为以下几类来进行详细介绍. 原数组变化:push() pop() shift() unshift() reverse() sort() splice() ...
- 如何同步iframe与嵌入内容的高度
最近频繁的做一些通过iframe在a页面嵌入b页面需求.总结下来,有以下问题需要解决 1.如何同步iframe与嵌入内容的高度 2.将b页面载入到a页面后,如何隐藏掉b页面上的元素,如左导航,顶部导航 ...
- [luogu4571 JSOI2009] 瓶子和燃料 (数论)
传送门 Solution 题目说的很迷,但可以发现两个瓶子互相倒最少是容积的gcd 那么题目就转化为求其中选k个瓶子gcd的最大值,这个可以分解因数,枚举因数得到 Code //By Menteur_ ...