易被忽视的js事件问题总结

一、跨平台事件

什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同。

什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性。主要处理DOM事件和IE事件的磨合,使其尽可能的相似。

下面我们来看一下DOM和IE之间的对象属性方法做个对比(这里只指出两者之间不同的属性方法),主要有以下五大点:

DOM属性方法 IE属性方法

charcode keycode preventDefault returnValue=false relatedTarget fromobj|toobj stopPropation cancelBuble=true target srcobj

我们用一个小demo看一下,能够很好的解决事件跨平台的兼容问题:

rush:xhtml;"> eventUtil

上面的方法能够解决事件跨平台问题,接下来,我们看下charCode的属性

首先给eventUtil定义一个方法,formatEvent,接受一个参数,即Event对象。

rush:js;"> eventUtil.formatEvent=function(event) { if(isIE&&isWin)---检测浏览器的问题

{
event.charCode=(event.type=="keypress")?event.keycode:0;
event.eventphase=2;--表示冒泡阶段,IE仅支持冒泡阶段
}
return event;
}

二、关于冒泡中的target和currentTarget

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件的父级。

rush:xhtml;">
我是目标div

----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : DIV

----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : DIV

  <br> ----点击这部分,<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>:e.target.tagName : DIV || e.currentTarget.tagName : DIV

//看下第二个变列:
<div id="outer" style="background:#099">

我是目标div
----点击这部分,输出:e.target.tagName : DIV || e.currentTarget.tagName : DIV

----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : DIV

  <br> ----点击这部分,<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>:e.target.tagName : DIV || e.currentTarget.tagName : DIV
rush:js;"> 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,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,test); addEvent(outer,test);

三、IE和DOM区别

DOMIE

获取目标 event.target event.srcElement 获取字符代码event.charCode event.keyCode 阻止认行为event.prevetDefault() event.returnvalue=false 冒泡 event.stopPropagation()event.cancelBubble=true

关于阻止认行为,比如,当用户右击鼠标时,如果你不想菜单弹出,则可以使用阻止认行为:

rush:js;"> document.body.oncontextmenu=function(event) { if(isIE) { var oEvent=window.event; oEvent.returnValue=false; //也可以直接是return false;阻止认行为 } else { oEvent.preventDefault(); } }

四、鼠标事件

<div class="jb51code">
<pre class="brush:xhtml;">

use your mouse to click and double click the red square

js文件如下:

rush: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; }

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...