脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 事件

关于JavaScript 的事件综合分析

 更新时间：2010年08月10日 00:48:48   作者：  
js下比较常用的方法，事件函数代码。


C 事件对象
i > 在IE 浏览器中，事件对象是window 对象的一个属性event 。访问方式如下：
复制代码 代码如下:

function getEvent(){
var o_event = window.event;
}

event 对象在事件发生时被访问，执行完函数后就消失了。


ii > 在标准的DOM 中，事件对象是作为处理函数的唯一参数来获得。访问方式如下：
复制代码 代码如下:

function getEvent(_event){
var o_event = _event
}


因此，为了兼容各种浏览器，通常采用如下方法：
复制代码 代码如下:

function getEvent(_event){
// Firefox下参数_event 就是event对象
// IE 下获得 event对象
if(window.event)_event = window.event;
// 显示触发的事件名称
alert(_event.type);
}

下面列出了事件常用的几个属性和方法（区别）：

IE 标准DOM 说明
cancelBubble cancelBubble 是否冒泡(标准DOM中只读)
无 stopPropagation( ) 阻止事件向上冒泡的方法
无 charCode 按下按键的Unicode 值
keyCode keyCode IE 中keypress 事件时表示按键的Unicode 值；
标准DOM 中keypress 事件时为0；
其余情况下，keyCode 为按键的数字代号。
srcElement target 触发事件的元素(对象源)
type type 事件的名称
此处只列出了事件成员的一小部分。
注意：
在IE 浏览器中，获得触发事件的对象源（HTML标签）是通过event 对象的srcElement 属性；
在标准的DOM 中，获得触发事件的对象源（HTML标签）是通过event 对象的target 属性；
获取事件目标的示例：
复制代码 代码如下:

<html>
<head>
<title>事件的目标</title>
<script language="javascript">
function handle(oEvent){
//处理兼容性，获得事件对象
if(window.event) oEvent = window.event;
var oTarget;
//处理兼容性，获取事件目标
if(oEvent.srcElement)
oTarget = oEvent.srcElement;
else oTarget = oEvent.target;
//弹出目标的标记名称
alert(oTarget.tagName);
}
window.onload = function(){
var obj = document.getElementsByTagName("a")[0];
obj.onclick = handle;
}
</script>
</head>
<body>
<a href="#">获得事件源的示例</a>
</body>
</html>


D 键盘事件
事件 说明
keydown 按下键盘上的某个键触发。（一直按住某键则会持续触发）
keypress 按下某个按键并产生字符时触发。（即忽略Shift 、Alt 、Ctrl 等功能键）
keyup 释放某个按键时触发。
触发的顺序为：keydown ---> keypress ---> keyup
i > 关于keyCode属性和charCode 属性
keyCode属性： 表示键盘按键码。因此输入“a”字母和“A”字母时，都是显示键盘码 65 ；
charCode 属性：表示输入字符码。因此输入“a”字母和“A”字母时，
分别显示 97（a 字符码）和 65（A 字符码）；
注意：
在标准的DOM 中：既有keyCode属性，还有charCode 属性。
但在标准的DOM 中，keypress 事件中keyCode 属性值始终为0 值；
在IE 浏览器中：事件对象只有keyCode属性，没有charCode 属性。
但在IE 浏览器中，keypress 事件中的keyCode 属性值等同于标准DOM 中的charCode 属性的值；
示例代码：
复制代码 代码如下:

<html>
<head>
<title>键盘事件</title>
<script language="javascript">
function handle(oEvent){
if(window.event){
//处理兼容性，获得事件对象
oEvent = window.event;
//设置IE的charCode值
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
}
var oDiv = document.getElementById("display");
//输出测试
oDiv.innerHTML += oEvent.type // 事件名称
+ ": charCode:" + oEvent.charCode // 字符码 charCode
+ " keyCode:" + oEvent.keyCode + "<br>"; // 键盘码 keyCode
}
window.onload = function(){
var oTextArea = document.getElementsByTagName("textarea")[0];
oTextArea.onkeypress = handle;
oTextArea.onkeydown = handle;
}
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<div id="display"></div>
</body>
</html>

ii > 屏蔽鼠标右键
方法一：
通过鼠标事件中，判断event 对象的button 属性值为“2”来屏蔽鼠标右键。虽然这种方法在IE 浏览器中有效，但在标准的DOM 中无效。并且，鼠标事件中，button 属性的值在IE 浏览器和标准的DOM 中大部分都不相同！
方法二：
其实，点击鼠标右键会触发右键菜单contextmenu 事件。
所以，屏蔽鼠标右键最有效的办法就是屏蔽document 对象的contextmenu 事件。
代码如下：
复制代码 代码如下:

<html>
<head>
<title>屏蔽鼠标右键</title>
<script language="javascript">
function block(oEvent){
if(window.event){
oEvent = window.event;
// IE 取消默认事件
oEvent.returnValue = false;
}
else
// Firefox 取消默认事件
oEvent.preventDefault();
}
// 右键菜单事件
document.oncontextmenu = block;
</script>
</head>
<body>
<p>屏蔽鼠标右键</p>
</body>
</html>

IE 浏览器是通过returnValue 属性屏蔽右键菜单；
标准DOM 是通过preventDefault( ) 方法屏蔽右键菜单；
iii > 自定义鼠标右键菜单
代码如下：
复制代码 代码如下:

<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
// 一、屏蔽系统右键菜单
window.document.oncontextmenu = function(_event){
if (window.event){
_event = window.event;
window.event.returnValue=false;
window.event.cancelBubble=true;
}
else _event.preventDefault();
}
//二、添加自定义右键菜单
window.document.onmouseup = function(_event)
{
var myDIV = document.getElementById("myDIV");
// 浏览器兼容性
if (window.event)_event = window.event;
// 鼠标右键
if(_event.button == 2)
{
// _event.clientX 获得鼠标当前的 X 坐标
/* 注意：
_event.clientX 的值在标准的DOM 中“只读”
myDIV.style.pixelLeft 不是标准的DOM 属性
*/
myDIV.style.left = _event.clientX;
myDIV.style.top = _event.clientY;
myDIV.style.display = "block";
}
// 不是鼠标右键
else myDIV.style.display = "none";
}
//-->
</script>
</head>
<body>
<!-- 我的右键菜单 -->
<div id="myDIV" style="position:absolute; height:180px; width:200px;
background-color:#CCCCCC; display:none;">
<a href="http://xugang.cnblogs.com" target="_blank">xugang</a>
</div>
</body>
</html>

在IE 浏览器和标准DOM 下兼容。

相关文章

  • 微信小程序实现用户登录模块服务器搭建

    微信小程序实现用户登录模块服务器搭建

    这篇文章主要介绍了微信小程序实现用户登录模块服务器搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • js中的内部属性与delete操作符介绍

    js中的内部属性与delete操作符介绍

    这篇文章主要介绍了js中的内部属性与delete操作符的相关资料,需要的朋友可以参考下
    2015-08-08
  • 理解JavaScript设计模式中的单例模式

    理解JavaScript设计模式中的单例模式

    这篇文章主要介绍了理解JavaScript设计模式中的单例模式，单例模式即Singleton Pattern是最简单的设计模式之一，下文更多相关介绍感兴趣的小伙伴可以参考一下
    2022-04-04
  • 预防网页挂马的方法总结

    预防网页挂马的方法总结

    这篇文章主要介绍了预防网页挂马的方法总结的相关资料,这里详细整理了具体方法，和如何实现，需要的朋友可以参考下
    2016-11-11
  • JavaScript微信定位功能实现方法

    JavaScript微信定位功能实现方法

    这篇文章主要介绍了JavaScript微信定位功能实现方法,将定位到的经纬度转换为百度地图对应的经纬度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript实现html转pdf的三种方法详解

    JavaScript实现html转pdf的三种方法详解

    近期项目需要实现将 html 页面转换成 pdf 报告的需求,经过一番调研以及结合过往经验,发现了三种技术方案,下面我们就来看看它们的具体实现步骤吧
    2024-02-02
  • 深入浅析JavaScript中的作用域和上下文

    深入浅析JavaScript中的作用域和上下文

    javascript中的作用域(scope)和上下文(context)是这门语言的独到之处，这部分归功于他们带来的灵活性。本文给大家介绍JavaScript中的作用域和上下文，感兴趣的朋友一起学习
    2016-03-03
  • JavaScript页面模板库handlebars的简单用法

    JavaScript页面模板库handlebars的简单用法

    本文主要是给大家分享的一个javascript页面模板库Handlebars的简单用法，可以帮助大家轻松的构建语义化模板，非常的实用，推荐给大家。
    2015-03-03
  • JavaScript实现自动切换图片代码

    JavaScript实现自动切换图片代码

    本文给大家分享一段js代码实现自动切换图片的代码，代码非常简单，应用领域非常广泛，感兴趣的朋友一起看看吧
    2016-10-10
  • 用svg制作富有动态的tooltip

    用svg制作富有动态的tooltip

    这篇文章主要介绍了用svg制作富有动态的tooltip的代码以及制作过程，十分的细致全面，有需要的小伙伴可以参考下。
    2015-07-07

最新评论