JS event使用方法详解


Posted in Javascript onApril 28, 2008

event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。

下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转。

<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">...
function cancelLink() ...{
    if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
    window.event.returnValue = false;
}
</SCRIPT>
<BODY onclick="cancelLink()">

下面的例子在状态栏上显示鼠标的当前位置。

<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">

属性:

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, 
screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

1.altKey
描述:
检查alt键的状态。

语法:
event.altKey

可能的值:
当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。

2.button
描述:
检查按下的鼠标键。

语法:
event.button

可能的值:
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键

这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。

3.cancelBubble
描述:
检测是否接受上层元素的事件的控制。

语法:
event.cancelBubble[ = cancelBubble]

可能的值:
这是一个可读写的布尔值:

TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。这是默认值。

例子:
下面的代码片断演示了当在图片上点击(onclick)时,如果同时shift键也被按下,就取消上层元素(body)上的事件onclick所引发的showSrc()函数。

 

<SCRIPT LANGUAGE="JScript">
function checkCancel() ...{
    if (window.event.shiftKey)
    window.event.cancelBubble = true;
}
function showSrc() ...{
    if (window.event.srcElement.tagName == "IMG")
    alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="/sample.gif">

 

4.clientX
描述:
返回鼠标在窗口客户区域中的X坐标。

语法:
event.clientX

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

5.clientY
描述:
返回鼠标在窗口客户区域中的Y坐标。

语法:
event.clientY

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

6.ctrlKey
描述:
检查ctrl键的状态。

语法:
event.ctrlKey

可能的值:
当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。

7.fromElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。 参考:18.toElement

语法:
event.fromElement

注释:
这是个只读属性。

8.keyCode
描述:
检测键盘事件相对应的内码。
这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。

语法:
event.keyCode[ = keyCode]

可能的值:
这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。

9.offsetX
描述:
检查相对于触发事件的对象,鼠标位置的水平坐标

语法:
event.offsetX

10.offsetY
描述:
检查相对于触发事件的对象,鼠标位置的垂直坐标

语法:
event.offsetY

11.propertyName
描述:
设置或返回元素的变化了的属性的名称。

语法:
event.propertyName [ = sProperty ]

可能的值:
sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。
这个属性是可读写的。无默认值。

注释:
你可以通过使用 onpropertychange 事件,得到 propertyName 的值。

例子:
下面的例子通过使用 onpropertychange 事件,弹出一个对话框,显示 propertyName 的值。

 

<HEAD>
<SCRIPT>...
function changeProp()...{
    btnProp.value = "This is the new VALUE";
}

function changeCSSProp()...{
    btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P>

<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</BODY>

12.returnValue
描述:
设置或检查从事件中返回的值

语法:
event.returnValue[ = Boolean]

可能的值:
true 事件中的值被返回
false 源对象上事件的默认操作被取消

例子见本文的开头。

13.screenX
描述:
检测鼠标相对于用户屏幕的水平位置

语法:
event.screenX

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

14.screenY
描述:
检测鼠标相对于用户屏幕的垂直位置

语法:
event.screenY

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

15.shiftKey
描述:
检查shift键的状态。

语法:
event.shiftKey

可能的值:
当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。

16.srcElement
描述:
返回触发事件的元素。只读。例子见本文开头。

语法:
event.srcElement

17.srcFilter
描述:
返回触发 onfilterchange 事件的滤镜。只读。

语法:
event.srcFilter

18.toElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。 参考:7.fromElement

语法:
event.toElement

注释:
这是个只读属性。

例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“mouse arrived”

<SCRIPT>
function testMouse(oObject) ...{
    if(oObject.contains(event.toElement)) ...{
        alert("mouse arrived");
    }
}
</SCRIPT>

<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>

19.type
描述:
返回事件名。

语法:
event.type

注释:
返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click
只读。

20. x
描述:
返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.x

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

21. y
描述:
返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.y

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

Javascript 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
ext for eclipse插件安装方法
Apr 27 #Javascript
ext监听事件方法[初级篇]
Apr 27 #Javascript
js调用flash的效果代码
Apr 26 #Javascript
JS查看对象功能代码
Apr 25 #Javascript
javascript String 对象
Apr 25 #Javascript
摘自启点的main.js
Apr 20 #Javascript
不懂JavaScript应该怎样学
Apr 16 #Javascript
You might like
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python中必要的名词解释
2019/11/20 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
Django nginx配置实现过程详解
2020/09/10 Python
python3判断IP地址的方法
2021/03/04 Python
企业管理专业个人求职信范文
2013/09/24 职场文书
中学门卫岗位职责
2013/12/26 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
2015年司法局工作总结
2015/05/22 职场文书
南京南京观后感
2015/06/02 职场文书
老人节主持词
2015/07/04 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android