www.6766.com易被忽视的js事件问题总结_javascript技巧_脚本之家

一、跨平台事件

怎么样叫跨平台事件?即在分歧的浏览器上实践同一事件,所采取的点子分裂。

什么是EventUtil对象?有哪些作用?将在有所与事件有关的函数,融入在联合签名的叁个器皿,方便处总管件目的,它从未品质。重要管理DOM事件和IE事件的磨合,使其尽可能的相符。

上面大家来看一下DOM和IE之间的对象属性和措施做个相比较,首要有以下中国共产党第五次全国代表大会点:DOM属性和办法
IE属性和办法
charcode keycodepreventDefault
returnValue=falserelatedTarget fromobj|toobjstopPropation
cancelBuble=truetarget srcobj

大家用四个小demo看一下,能够很好的缓和事件跨平台的宽容难题:

 eventUtil  var eventUtil = { //监听事件 addListener: function { if  { obj.addEventListener; } else if  { obj.attachEvent; } else { obj['on' + eventType] = fn; } }, //返回event对象 getEvent: function { return event || window.event; //return event ? event : window.event; }, //返回目标事件对象 getTarget: function { return event.target || event.srcobj; }, preventDefault: function { if  { event.preventDefault(); } else { event.returnValue = false; } }, removeListener: function { if (obj.removeEventListener) { obj.removeEventListener; } else if  { obj.detachEvent; } else { obj['on' + eventType] = null; } }, stopPropagation: function { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } };    Hello word!  function addBtnListen { var event = eventUtil.getEvent; var target = eventUtil.getTarget; alert; alert; alert; eventUtil.stopPropagation; } function getBodyListen { alert; } function getLinkListen { alert("prevent default event"); var event = eventUtil.getEvent; eventUtil.preventDefault; } window.onload=function() { var btn = document.getobjById; var link = document.getobjsByTagName[0]; eventUtil.addListener(btn, "click", addBtnListen); eventUtil.addListener(document.body, "click", getBodyListen); eventUtil.addListener(link, "click",getLinkListen); } 

下面的秘诀能够缓和事件跨平台问题,接下去,大家看下charCode的性质。

首先给eventUtil定义二个新措施,format伊夫nt,接纳一个参数,即Event对象。

eventUtil.formatEvent=function{ if---检测浏览器的问题 { event.charCode=(event.type=="keypress")?event.keycode:0; event.eventphase=2;--表示冒泡阶段,IE仅支持冒泡阶段 } return event;}

二、关于冒泡中的target和currentTarget

target在事变流的对象阶段;currentTarget在事件流的破获,目的及冒泡阶段。只有当事件流处在目的阶段的时候,八个的针对才是肖似的,
而当处于捕获和冒泡阶段的时候,target指向被单击的靶子而currentTarget指向当前风云的父级。

  ----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : DIV 我是目标p ----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : DIV 
 ----点击这部分,输出:e.target.tagName : DIV || e.currentTarget.tagName : DIV//看下第二个变列: 我是目标div ----点击这部分,输出:e.target.tagName : DIV || e.currentTarget.tagName : DIV 我是目标p ----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : DIV 
 ----点击这部分,输出:e.target.tagName : DIV || e.currentTarget.tagName : DIV

function getObj{ return document.getElementById; } function addEvent{ if { obj.attachEvent; } else if(window.addEventListener) { obj.addEventListener; } } function test{ alert("e.target.tagName : " + e.target.tagName + "n e.currentTarget.tagName : " + e.currentTarget.tagName); } var outer = getObj; var inner = getObj; //addEvent; addEvent; 

三、IE和DOM区别DOMIE得到指标 event.target
event.srcElement获取字符代码event.charCode
event.keyCode阻止私下认可行为event.prevetDefault(卡塔尔(قطر‎event.returnvalue=false冒泡
event.stopPropagation(卡塔尔国event.cancelBubble=true

有关阻止暗许行为,比如,当顾客右击鼠标时,要是你不想菜单弹出,则能够运用阻止默许行为:

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

四、鼠标事件

use your mouse to click and double click the red square 

function handleEvent{ var oText=document.getElementById; 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{ var oText2=document.getElementById; oText2.value+="n"+event.type; var arrKeys=[]; if{arrKeys.push;} if{arrKeys.push;} if{arrKeys.push;} oText2.value+="n keydown is "+arrKeys;}

以上正是本文的全体内容,希望对大家的就学抱有利于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图