js中容易被忽视的事件问题总结
一：跨平台事件
什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。
什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。
下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：
| DOM属性和方法 | IE属性和方法 |
| charcode | keycode |
| preventDefault | returnValue=false |
| relatedTarget | fromobj|toobj |
| stopPropation | cancelBuble=true |
| target | srcobj |
我们用一个小demo看一下，能够很好的解决事件跨平台的兼容问题：
<html>
<head>
<title>eventUtil</title>
<script eventType="text/javascript">
var eventUtil = {
//监听事件
addListener: function(obj, eventType, fn) {
if (obj.addEventListener) {
obj.addEventListener(eventType, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + eventType, fn);
} else {
obj['on' + eventType] = fn;
}
},
//返回event对象
getEvent: function(event) {
return event || window.event;
//return event ? event : window.event;
},
//返回目标事件对象
getTarget: function(event) {
return event.target || event.srcobj;
}，
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeListener: function(obj, eventType, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(eventType, fn, false);
} else if (obj.deattachEvent) {
obj.detachEvent(eventType, fn);
} else {
obj['on' + eventType] = null;
}
}, stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
</script>
</head>
<body>
<input eventType="button" value="click me" id="btn" />
<p>event</p>
<a>Hello word!</a>
<script eventType="text/javascript">
function addBtnListen(event)
{
var event = eventUtil.getEvent(event);
var target = eventUtil.getTarget(event);
alert("my name is kock");
alert(event.eventType);
alert(target);
eventUtil.stopPropagation(event); }
function getBodyListen(event)
{
alert("click body");
}
function getLinkListen(event)
{
alert("prevent default event");
var event = eventUtil.getEvent(event);
eventUtil.preventDefault(event);
}
window.onload=function()
{
var btn = document.getobjById("btn");
var link = document.getobjsByTagName("a")[0];
eventUtil.addListener(btn, "click", addBtnListen);
eventUtil.addListener(document.body, "click", getBodyListen);
eventUtil.addListener(link, "click",getLinkListen);
}
</script>
</body>
</html>
上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。
首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。
eventUtil.formatEvent=function(event)
{
if(isIE&&isWin)---检测浏览器的问题，如有不清楚，见我上篇文章：http://www.cnblogs.com/jtjds/p/5461152.html {
event.charCode=(event.type=="keypress")?event.keycode:0;
event.eventphase=2;--表示冒泡阶段，IE仅支持冒泡阶段
}
return event;
}
二：关于冒泡中的target和currentTarget
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。
<div id="outer" style="background:#099">
<p>我是目标div</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
<p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
<br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
</div>
//看下第二个变列：
<div id="outer" style="background:#099">
<div>我是目标div</div> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
<p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
<br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
</div>
function getObj(id)
{
return document.getElementById(id);
}
function addEvent(obj, event, fn)
{
if(window.attachEvent)
{
obj.attachEvent("on" + event, fn);
}
else if(window.addEventListener)
{
obj.addEventListener(event, fn, false);
}
}
function test(e)
{
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
}
var outer = getObj("outer");
var inner = getObj("inner");
//addEvent(inner, "click", test);
addEvent(outer, "click", test);
三：IE和DOM区别
| DOM | IE | |
| 获取目标 | event.target | event.srcElement |
| 获取字符代码 | event.charCode | event.keyCode |
| 阻止默认行为 | event.prevetDefault() | event.returnvalue=false |
| 冒泡 | event.stopPropagation() | event.cancelBubble=true |
关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为：
document.body.oncontextmenu=function(event)
{
if(isIE)
{
var oEvent=window.event;
oEvent.returnValue=false; //也可以直接是return false；阻止默认行为
}
else
{
oEvent.preventDefault();
}
}
四：鼠标事件
<p>use your mouse to click and double click the red square</p>
<div style="width:100px;height:100px;background:red"
onmouseover="handleEvent(event)"
onmouseout="handleEvent(event)"
onmousedown="handleEvent(event)"
onmouseup="handleEvent(event)"
onclick="handleEvent(event)"
ondblclick="handleEvent(event)" id="div1"
>
</div>
<p><textarea id="txt1" rows="5" cols="45"></textarea></p>
<!--检测键盘事件-->
<p><input type="text" id="textbox"
onkeydown="handle(event)"
onkeypress="handle(event)"
onkeyup="handle(event)"
></p>
<p><textarea id="txt2" rows="10" cols="45"></textarea></p>
js文件如下：
function handleEvent(event)
{
var oText=document.getElementById('txt1');
oText.value+= "\n"+event.type;
oText.value+= "\n target is "+(event.srcElement||event.target).id;
oText.value+="\n at ("+event.clientX+","+event.clientY+")in the client";
oText.value+="\n at ("+event.screenX+","+event.screenY+")in the client";
oText.value+="\n button down is"+event.button;
var arrKeys=[];
oText.value+="\n relatedTarget is"+event.relatedTarget.tagName;
//event.relatedTarget.tagName可以判断鼠标的来源和出处
}
function handle(event)
{
var oText2=document.getElementById('txt2');
oText2.value+="\n"+event.type;
var arrKeys=[];
if(event.shiftKey){arrKeys.push("Shift");}
if(event.ctrlKey){arrKeys.push("Ctrl");}
if(event.altKey){arrKeys.push("Alt");}
oText2.value+="\n keydown is "+arrKeys;
}
作者：向婷风
出处：http://www.cnblogs.com/jtjds/p/5492375.html
如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者
本人同意 转载文章之后必须在 文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。
js中容易被忽视的事件问题总结的更多相关文章
- js事件、Js中的for循环和事件的关系、this
一.js事件 1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- js中一次性注册多个事件
在js中,如果想一次性给一个控件或者标签初测多个事件的方法: 假如有个<input>标签: <input id=”inputValue” value=”www.baidu.com”/ ...
- js中按下回车触发事件
方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...
- Js中的onblur和onfocus事件
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
- Js中的onblur和onfocus事件应用介绍
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...
- JS中如何巧妙的用事件委托
常见场景:页面有多个相同的按钮需要绑定同样的事件逻辑. 如下HTML,实现:点击每个按钮,当它的 data-id不为null的时候输出它的data-id(实际业务中会有更复杂的逻辑) <ul i ...
- js中for循环点击事件（闭包）
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- js中当for循环中有事件要使用循环变量时，变量用var声明和let声明的区别
var 声明一个全局变量,声明的变量会变量提升: let 声明一个局部变量: 当页面加载完后,for循环也结束了,如果用var声明的变量此时也随着for循环的结束而自增到满足结束循环的条件, 此时调用 ...
随机推荐
- jquery重置html form
很多时候在ajax提交或者对话框隐藏之后,我们希望重置默认值以便下次打开对话框时保持干净. 因为jquery选择器返回的是list,并且没有对此提供reset方法,所以需要针对单个元素进行reset. ...
- Linux 学习手记(5)：使用Vim文本编辑器
Vim是从vi发展而来的文本编辑器.vi是Linux及类Unix系统中主流的命令行文本编辑器,Vim 除了对vi功能上进行了加强,还加入了对GUI的支持.绝大多数的Linux系统上均安装了vim,vi ...
- Ansible用于网络设备管理 part 1 Jinja2 YAML初窥
这一次的实验内容依然来自Kirk Byers的博客,源地址在https://pynet.twb-tech.com/blog/python/paramiko-ssh-part1.html 但是,这次实验 ...
- 浅析对象访问属性的"."和"[]"方法区别
在JavaScript中通常使用”."运算符来存取对象的属性的值.或者使用[]作为一个关联数组来存取对象的属性.但是这两种方式有什么区别了? 例如,读取object中的property属性值 ...
- GridView总结二：GridView自带编辑删除更新
GridView自带编辑删除更新逻辑很简单:操作完,重新绑定.总结总结,防止忘记... 效果图: 前台代码: <%@ Page Language="C#" AutoEvent ...
- Android 优秀的开源框架整理
第一部分:系统架构 thinkAndroid https://github.com/white-cat/ThinkAndroid ThinkAndroid是一个免费的开源的.简易的.遵循Apache2 ...
- java多线程系列7-停止线程
本文主要总结在java中停止线程的方法 在java中有以下三种方法可以终止正在运行的线程: 1.使用退出标志 2.使用stop方法强行终止线程,但是不推荐,因为stop和suspend.resume一 ...
- IOS开发--UI进阶之iCarousel学习(待翻译)
前言:先展示这个会被多个项目用到的开源的轮播器的其中一个动画效果: 更多的效果请到github原网址查看:https://github.com/nicklockwood/iCarousel 源码也可以 ...
- IOS之未解问题--给UITableView提取UITableViewDataSource并封装瘦身失败
前言:阅读了<更轻量的 View Controllers>,发现笔者这个优化重构代码的想法真的很不错,可以使得抽取的UITableViewDataSource独立写在一个类文件里,并且也写 ...
- CentOS下安装实时检测网络带宽的小工具bmon
首先下载rpmforge-release扩展的rpm包 32位操作系统:wget http://www.sudu.us/Tools/bmon/rpmforge-release-0.3.6-1.el5. ...