JavaScript click事件深入
来源:互联网 发布:真三国无双3渣优化 编辑:程序博客网 时间:2024/05/23 01:19
获得事件
要获得事件对象(也即event对象),我们可以在事件响应函数中使用如下代码:
function clickFunc(e){var evt = e || window.event
}
《ppk谈JavaScript》一书介绍了代码的原理:W3C标准兼容的浏览器,事件将会作为第一个参数被传入函数中,也就是上面函数的参数e;微软的IE中,事件将会被存储在全局变量window.event中。所以以上代码会将事件对象存储在evt变量中。
能够获得事件对象,我们就可以进一步的访问它的属性了。
事件对象的属性
type属性,也就是事件的类型。
位置属性,有许多属性可以用来获得鼠标事件的位置。但是并不是每个属性都能够跨浏览器,我们使用如下的代码来做一个显示事件属性的实例:
<script type="text/javascript">
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(window,'load',init);
function init(){
addEventSimple(document,'click',clickFunc);
}
function clickFunc(e){
var evt = e || window.event
var str = "";
var watchScreen = document.getElementById("watchScreen");
if(evt.pageX||evt.pageY){
str += "pageX:" + evt.pageX + " ";
str += "pageY:" + evt.pageY;
str += "<br />";
}
if(evt.offsetX||evt.offsetY){
str += "offsetX:" + evt.offsetX + " ";
str += "offsetY:" + evt.offsetY;
str += "<br />";
}
if(evt.clientX||evt.clientY){
str += "clientX:" + evt.clientX + " ";
str += "clientY:" + evt.clientY;
str += "<br />";
}
if(evt.screenX||evt.screenY){
str += "screenX:" + evt.screenX + " ";
str += "screenY:" + evt.screenY;
str += "<br />";
}
watchScreen.innerHTML = evt.type + "事件发生!<br />" + str;
}
</script>
我们在代码中访问了几个属性,其中:client表示为相对浏览器窗口的位置;offset表示相对目标对象的位置;page表示相对document对象的位置;screen则表示相对计算机显示器的位置。
以上代码的实际效果如下,我们把事件响应函数添加在了document上,所以可以在文档的任何一个地方点击鼠标左键,就可以观察到下面div内文字的变化。
click事件发生!
pageX:589 pageY:1096
offsetX:155 offsetY:72
clientX:589 clientY:296
screenX:589 screenY:381
pageX:589 pageY:1096
offsetX:155 offsetY:72
clientX:589 clientY:296
screenX:589 screenY:381
从测试的结果就可以看到各个浏览器对各个属性的支持情况了。例如我们可以发现IE不支持page属性,而FireFox则很好地支持该属性。
- JavaScript click事件深入
- JavaScript click事件深入
- javascript: click 阻止冒泡事件
- JavaScript中click()事件失效
- hightcharts柱状图click事件深入研究
- javascript手动出发控件的click事件
- JavaScript--深入理解事件
- click事件
- click事件
- javascript事件, 解决mousedown和click冲突事件, 鼠标事件, 键盘事件, 文本事件用法简介
- 如何用JavaScript去触发Button的Click事件
- javascript中用Jquery注册button的click事件不能响应
- Javascript中点击(click)事件的3种写法
- JavaScript中click和keypress事件绑定的顺序
- Javascript中让单击Click和Double Click双击事件各自独立
- 深入理解JavaScript中的事件
- JavaScript的事件深入理解
- 深入理解JavaScript事件冒泡
- JVM 简单介绍
- windows中weblogic服务器配置
- 047-1 SELECT语句
- 索思美容美发管理系统 破解纪要
- [JSP]断点续传多线程链接下载! JSP/Servlet 实现
- JavaScript click事件深入
- 虚函数和缺省实参
- CentOS安装Apache+PHP+MySQL指南
- JS中的事件监听操作
- 关于 “error LNK2019: 无法解析的外部符号 "class std::basic_ostream...” 问题
- OAuth 核心 1.0
- Window编程关闭窗口过程
- 《新日语基础教程》学习笔记——第二课
- Linux下makefile教程