js中最容易被忽視的事件問題大總結(jié)
更新時間：2016年05月15日 10:17:54 投稿：jingxian
下面小編就為大家?guī)硪黄猨s中最容易被忽視的事件問題大總結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧，祝大家游戲愉快哦
什么叫跨平臺事件？即在不同的瀏覽器上執(zhí)行同一事件，所使用的方法不同。
什么是EventUtil對象？有什么作用？即將所有與事件相關(guān)的函數(shù)，融合在一起的一個容器，方便管理事件對象，它沒有屬性。主要處理DOM事件和IE事件的磨合，使其盡可能的相似。
下面我們來看一下DOM和IE之間的對象屬性和方法做個對比（這里只指出兩者之間不同的屬性和方法），主要有以下五大點(diǎn)：
| 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 = {
//監(jiān)聽事件
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;
},
//返回目標(biāo)事件對象
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,接受一個參數(shù)，即Event對象。
eventUtil.formatEvent=function(event)
{
if(isIE&&isWin)
{
event.charCode=(event.type=="keypress")?event.keycode:0;
event.eventphase=2;--表示冒泡階段，IE僅支持冒泡階段
}
return event;
}
二：關(guān)于冒泡中的target和currentTarget
target在事件流的目標(biāo)階段；currentTarget在事件流的捕獲，目標(biāo)及冒泡階段。只有當(dāng)事件流處在目標(biāo)階段的時候，兩個的指向才是一樣的， 而當(dāng)處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當(dāng)前事件的父級。
<div id="outer" style="background:#099">
<p>我是目標(biāo)div</p> ----點(diǎn)擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">我是目標(biāo)p</p> ----點(diǎn)擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV
<br> ----點(diǎn)擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
</div>
//看下第二個變列：
<div id="outer" style="background:#099">
<div>我是目標(biāo)div</div> ----點(diǎn)擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">我是目標(biāo)p</p> ----點(diǎn)擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV
<br> ----點(diǎn)擊這部分，輸出：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區(qū)別
| DOM | IE | |
| 獲取目標(biāo) | event.target | event.srcElement |
| 獲取字符代碼 | event.charCode | event.keyCode |
| 阻止默認(rèn)行為 | event.prevetDefault() | event.returnvalue=false |
| 冒泡 | event.stopPropagation() | event.cancelBubble=true |
關(guān)于阻止默認(rèn)行為，比如，當(dāng)用戶右擊鼠標(biāo)時，如果你不想菜單彈出，則可以使用阻止默認(rèn)行為：
document.body.oncontextmenu=function(event)
{
if(isIE)
{
var oEvent=window.event;
oEvent.returnValue=false; //也可以直接是return false；阻止默認(rèn)行為
}
else
{
oEvent.preventDefault();
}
}
四：鼠標(biāo)事件
<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可以判斷鼠標(biāo)的來源和出處
}
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;
}
以上這篇js中最容易被忽視的事件問題大總結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript設(shè)計模式中的觀察者模式，觀察者設(shè)計模式適用于監(jiān)聽一對多的操作，例如監(jiān)聽對象屬性的修改等等，觀察者模式能夠降低代碼耦合度，提升可擴(kuò)展性2022-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級評分和展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
本文主要介紹了uniapp中uni-popup的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
JavaScript Function函數(shù)類型介紹
在JS中,Function(函數(shù))類型實(shí)際上是對象;每個函數(shù)都是Function類型的實(shí)例;而且都與其他引用類型一樣具有屬性和方法2015-04-04
在盛大某網(wǎng)站注冊的時候，身份證必填，但我又不想填真實(shí)身份證號碼，于是隨便編了串自認(rèn)為合法的身份證號碼，但是卻馬上被提示號碼錯誤2011-05-05
JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊按鈕圖片上下滾動效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
js以及jquery實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了js版本實(shí)現(xiàn)手風(fēng)琴效果和jquery版本實(shí)現(xiàn)的手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
面向JavaScript入門初學(xué)者的二叉搜索樹算法教程
二叉搜索樹則是二叉樹的一種,但它只允許你在左側(cè)節(jié)點(diǎn)儲存比父節(jié)點(diǎn)小的值,右側(cè)只允許儲存比父節(jié)點(diǎn)大的值,這篇文章主要給大家介紹了關(guān)于JavaScript二叉搜索樹算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
JS中使用textPath實(shí)現(xiàn)線條上的文字
最近項(xiàng)目經(jīng)理交給我一下新項(xiàng)目，要實(shí)現(xiàn)關(guān)系圖，需要在線條上繪制文字。下面小編把使用textPath實(shí)現(xiàn)線條上的文字功能分享到腳本之家平臺供大家參考2017-12-12
JavaScript實(shí)現(xiàn)簡單的倒計時效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06