event

時間 2019-11-12

標籤 event 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Index</title>
</head>
<body>
<div id="d-0-0">
<div id="d-1-1">
<div id="d-1-1-1"></div>
<div id="d-1-1-2"></div>
</div>
<div id="d-1-2"></div>
<div id="d-1-3"></div>
</div>
<script type="text/javascript">javascript

=========================================================html

冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡冒泡java

事件流描述的是從頁面中接收事件的順序。
IE事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。
冒泡：div-body-html-document
捕獲：document - html - body - divchrome

DOM事件流：document-html-body-div-body-html-document瀏覽器

=======================*DOM0級事件處理程序*=================
btn.onclick = function(){
alert(1)
}
//btn.onclick = null;app

=======================*DOM2級事件處理程序*=================
addEventListener()
removeEventListener()
全部DOM節點都包含這兩個方法,接受3個參數
若是是true,表示捕獲
若是是false,表示冒泡框架

----------------------------------------------------------dom

經過addEventListener添加事件處理程序只能使用removeEventListener來移除
移除時傳入的參數與添加處理程序時使用的參數相同。
addEventListener添加的匿名函數將沒法移除。函數

var btn = document.getElementById('mybtn');
btn.addEventListener('click',function(){alert(1)},false)
btn.removeEventListener('click',function(){alert(1)},false) //移除不了佈局

this = btn
***************this的做用域是元素的做用域****************

btn.addEventListener('click',handler1,false)
btn.removeEventListener('click',handler2,false) //移除有效

***************執行順序***********************
先執行handler1 在執行handler2

=======================*IE事件處理程序*=================
執行順序與DOM不一樣
this指針不一樣

IE只支持冒泡
attachEvent()
detachEvent()
var btn = document.getElementById('mybtn');
btn.attachEvent('onclick',function(){alert(1)})
btn.attachEvent('onclick',function(){alert(2)})
***************執行順序***********************
先執行2 在執行1

注意attachevent的第一個參數是"onclick"，而非DOM的addEventListener中的click;

attachEvent方法中 this=window
***************this的做用域是window****************

getEvent:function(event){
return event?event:window.event; //DOM0事件 window.event = IE
},

//Get Target
getTarget:function(event){
return event.target||event.srcElement; // srcElement = IE
},

//Prevent DefaultEvent
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
} else{
event.returnValue = false; //IE
}
},

//stopPropagation
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble=true; //IE
}
},

getCharCode:function(){
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
}

}

========================== DOM 事件對象 Event ================================
兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。
function s(event){
alert(event.type) //DOM獲取event方法 ie不支持
}

一、currentTarget 至關於對象 this //IE不支持

二、target 至關於包含事件的實際目標（事件的目標節點） //IE不支持
二、srcElement //僅IE支持

cancelable + preventDefault 一塊兒使用 //DOM
returnValue //IE

三、cancelable 返回布爾值，若是爲true才能使用 preventDefault //IE不支持默認爲true
若是flase不能使用 preventDefault //IE無此屬性

四、preventDefault 取消瀏覽器默認行爲 //IE不支持
四、returnValue //僅IE支持

五、cancelBubble //IE支持
五、stopPropagation 取消進一步的時間捕獲或冒泡 //IE不支持

六、eventPhase 返回結果 1.若是捕獲階段調用
2.若是事件處理程序處於目標對象上
3.冒泡階段事件處理階段

//DOM 事件標準定義的屬性
type 返回當前 Event 對象表示的事件的名稱。
------------------------------------------------------------------------

//IE 不支持這些方法
initEvent() 初始化新建立的 Event 對象的屬性。
preventDefault() 通知瀏覽器不要執行與事件關聯的默認動做。
stopPropagation() 再也不派發事件。
------------------------------------------------------------------------
bubbles 返回布爾值，指示事件是不是起泡事件類型。
cancelable 返回布爾值，指示事件是否可擁可取消的默認動做。
currentTarget 返回其事件監聽器觸發該事件的元素。
eventPhase 返回事件傳播的當前階段。
target 返回觸發此事件的元素（事件的目標節點）。
timeStamp 返回事件生成的日期和時間。

//IE 支持的屬性
cancelBubble 若是事件句柄想阻止事件傳播到包容對象，必須把該屬性設爲 true。
fromElement 對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode 對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼。
對於 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的佈局相關。

offsetX,offsetY 發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。
returnValue 若是設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置爲 fasle，能夠取消發生事件的源元素的默認動做。

srcElement 對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement 對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x,y 事件發生的位置的 x 座標和 y 座標，它們相對於用CSS動態定位的最內層包容元素。

========================== ******IE 事件對象 Event********* ===============================
要訪問IE中的event對象有幾種不一樣方式，取決於指定事件處理程序的方法。在使用DOM0級方法添加處理程序時，
event對象做爲window對象的一個屬性存在。

五、cancelBubble 阻止必須把該屬性設爲 true。
IE不支持捕獲只能用來阻止冒泡 //IE支持
五、stopPropagation 取消進一步的時間捕獲或冒泡 //IE不支持

四、preventDefault 取消瀏覽器默認行爲 //IE不支持
四、returnValue false就能夠取消事件的默認行爲 //僅IE支持

--------------------------------------------------------------------------------

cancelable + preventDefault 一塊兒使用 //DOM
returnValue //IE
三、cancelable 返回布爾值，若是爲true才能使用 preventDefault //IE不支持
若是flase不能使用 preventDefault //IE無此屬性

---------------------------------------------------------------------------------

二、target 至關於包含事件的實際目標（事件的目標節點） //IE不支持
二、srcElement //僅IE支持

btn.onclick = function(){
var event = window.event; //DOM0 IE獲取event方法
event.srcElement == this;
btn = this;
}

btn.attachEvent ("onclick",function(event){ //****IE attachEvent加事件能夠不加參數event****
//alert(event.type) //事件處理程序使用attachevent添加的傳入參數
event.srcElement
window = this
})

===============================鼠標事件================================
click
dblclick
mousedown //按下
mouseout //鼠標從某元素移開。
onmouseover //鼠標移到某元素之上。
mouseup //鼠標按鍵被鬆開。
mousemove //鼠標被移動。

事件的觸發順序

mousedown //按下
mouseup //鼠標按鍵被鬆開。
click
mousedown //按下
mouseup //鼠標按鍵被鬆開。
dblclick

====================================================================

clientX //客戶區座標位置相對瀏覽器左上角
clientY //客戶區座標位置

screenX //屏幕座標位置相對顯示器屏幕左上角
screenY //屏幕座標位置

----------------------------------------------------------

這些屬性包含的都是布爾值，若是相應的鍵被按下，則值爲true,不然值爲false
altKey //返回當事件被觸發時，"ALT" 是否被按下。
shiftKey //返回當事件被觸發時，"SHIFT" 鍵是否被按下。
ctrlKey //返回當事件被觸發時，"CTRL" 鍵是否被按下。
metaKey //返回當事件被觸發時，"meta" 鍵是否被按下。 IE不支持

=========================================================================

不支持IE
relatedTarget
對於 mouseover 事件來講，該屬性是鼠標指針移到目標節點上時所離開的那個節點。
對於 mouseout 事件來講，該屬性是離開目標時，鼠標指針進入的節點。
用戶：event.relatedTarget.tagName

支持IE
fromElement 對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
toElement

========================button 事件屬性==================================
//DOM參數描述
0 規定鼠標左鍵。
1 規定鼠標中鍵。
2 規定鼠標右鍵。

//IE參數
參數描述
1 規定鼠標左鍵。
4 規定鼠標中鍵。
2 規定鼠標右鍵。

0 沒按下按鈕
1 規定鼠標左鍵
2 規定鼠標右鍵
3 同時按下主次鍵。
4 規定鼠標中鍵。
5 同時按下左中鍵。
6 同時按下右中鍵。
7 同時按下3個鍵

document.implementation //正在運行的程序
hasFeature() //方法肯定 DOM 的實現是否支持某個特性。

document.implementation.hasFeature('omuseEvents','2.0')
//檢查 DOM implementation 是否可執行指定的特性和版本。
http://www.w3school.com.cn/xmldom/met_domimplementation_hasfeature.asp

IE屬性用處不大
altLeft
ctrlLeft
offsetX
offsetY
shiftLeft

===============================================================

onkeydown //‘任意鍵’按下觸發
onkeypress //‘字符鍵’按下觸發
onkeyup //鬆開鍵盤觸發

keyCode表
//在Firefox和Opera中，按分號鍵時keyCode值爲59，也就是ASII中分號的編碼；但IE和Safari返回186，即鍵盤中按鈕的鍵碼。
//在Safari3以前的版本中，上、下、左、右箭頭和上、下翻頁鍵返回大於63000的值。在Opera9.5以前的版本中，會將非數字字母鍵的keyCde設置爲等於相應字符的ASCII編碼，所以小於鍵返回44而不是188。
//在Safari3以前的版本中，不會由於按下了製表、上檔、控制或替代鍵而觸發keydown和keyup事件。
---------------------------------------------------------------------------------------------------
event.charCode //firefox chrome safari 這屬性只有在發生keypress事件時才包含值
event.keycode //IE和opera 則是在中保存ASCII編碼
跨瀏覽器方式取得字符編碼，首先檢測charCode屬性是否可用。

String.fromCharCode() //轉換成實際的字符

textInput 事件 //DOM3 safari3 chrome 調用event.data

==============================================================================================

HTML事件：
load：當頁面徹底加載後在window上面觸發，
當全部框架都加載完畢時在框架上面觸發，
當圖像都加載完畢時在<img> 元素上面觸發，
或者當嵌入的內容加載完畢時在<object>元素上面觸發。

EventUtil.addHandler(window,'load',function(event){
alert('loaded!')
})

unload：當頁面徹底卸載後在window上面觸發，
當全部框架都卸載後在框架集上面觸發，
當嵌入的內容卸載完畢後在<object>元素上面觸發。

abort：當用戶中止下載過程時，若是嵌入的內容沒有加載完，則在<object>元素上面觸發。

error：當發生JavaScript錯誤時在window上面觸發，
當沒法加載圖像時在<img>元素上面觸發，
當沒法加載嵌入內容時在<object>元素上面觸發，
當有一或多個框架沒法加載時在框架集上面觸發。

select：當用戶選擇文本框（<input>或<textarea>）中的一或多個字符時觸發。

resize：當窗口或框架的大小變化時在window或框架上面觸發。

scroll：當用戶滾動帶滾動條的元素中的內容時，在該元素上面觸發。<body>元素中包含所加載頁面的滾動條。

focus：在元素得到焦點時觸發。這個事件不會冒泡；全部瀏覽器都支持它。

blur：在元素失去焦點時觸發。這個事件不會冒泡；全部瀏覽器都支持它。

http://www.w3school.com.cn/xmldom/met_domimplementation_hasfeature.asp
var isSupported = document.implementation.hasFeature('HTMLEvents','2.0');

--------------------------------------------------------------------------

DOM2級事件
應該在*document*而非window上面觸發load事件，
可是，所欲瀏覽器都在window上實現該事件，以確保向後兼容

--------------------------------------------------------------------------

*************************************************************************
新圖像元素不必定要從添加到文檔後纔開始下載，只要設置了src屬性就會開始下載
*************************************************************************
EventUtil.addHandler(window,'load',function(){
var image = new Image();
console.log(image)
EventUtil.addHandler(image,'load',function(event){
alert('載入成功')

})
document.body.appendChild(image) //先加入到DOM
image.src = 'http://img2.fengniao.com/product/43/487/ce5QnYkiyYVlQ.jpg' //在加地址只要設置了src屬性就會開始下載

})

//在不屬於DOM文檔的圖像（包括未添加到文檔的<img>元素和Image()對象）上觸發load事件時，IE不會生成event對象。

---------------------------------------------------------------------------

*************************************************************************
<script> <style>元素的src屬性並將該元素添加到文檔後，纔會開始下載JavaScript文件。
*************************************************************************

resize：當窗口或框架的大小變化時在window或框架上面觸發。
與其餘發生在window上的事件相似，在兼容DOM的瀏覽器中，傳入事件處理程序中的event對象有一個targer屬性，值爲document；而IE則未提供任何屬性關於什麼時候會觸發resize事件，不一樣瀏覽器有不一樣的機制。
IE、Safari、Chrome和Opera會在瀏覽器窗口變化了1像素時就觸發resize事件，而後隨着變化不斷重複觸發。
Firefox則只會在用戶中止調整窗口大小時纔會觸發resize事件。因爲存在這個差異，應該注意不要在這個事件的處理程序中加入大計算量的代碼，由於這些代碼有可能被頻繁執行，從而致使瀏覽器反映明顯變慢。
瀏覽器窗口最大化時也會觸發resize事件。

============================================================================
scroll 滾動事件

EventUtil.addHandler(window, "scroll", function () {
if (document.compatMode == "CSS1Compat") {
alert(document.documentElement.scrollTop); //標準模式 'CSS1Compat' strict mode
} else {
alert(document.body.scrollTop); //混雜模式 'BackCompat' quirks mode
}
})

雖然scroll事件在window對象上發生的，但它實際表示的則是頁面中相應元素的變化。
在混雜模式下，能夠經過body元素的scrollLeft和scrollTop來監控到這一變化；
而在標準模式下，除Safari以外的全部瀏覽器都會經過html元素來反映這一變化（Sfari仍然基於body跟蹤滾動位置），以下面例子所示：
以上代碼指定的事件處理程序會輸出頁面的垂直滾動位置——根據呈現模式不一樣使用了不一樣的元素。
因爲Safari 3.1以前的版本不支持document.compatMode，所以就版本的瀏覽器就會知足第二個條件。
與resize事件相似，scroll事件也會在文檔被滾動期間重複被觸發，因此有必要儘可能保持事件處理程序的代碼簡單。

================================================================================

變更事件 IE不支持

DOM2級定義了以下變更事件
（1）DOMSubtreeModified：在DOM結構中發生的任何變化時觸發。這個事件在其餘任何事件觸發後都會觸發。
（2）DOMNodeInserted：在一個節點做爲子節點被插入到另外一個節點中時觸發。
（3）DOMNodeRemoved：在節點從其父節點中被移除時觸發。 //這個事件的目標(event.target)是被移除的節點

（4）DOMNodeInsertedIntoDocument：在一個節點被直接插入文檔或經過子樹間接插入到文檔以後觸發。這個事件在DOMNodeInserted以後觸發。
（5）DOMNodeRemovedFromDocument：在一個節點被直接從文檔中移除或經過子樹間接從文檔中移除以前觸發。這個事件在DOMNodeRemoved以後觸發。
（6）DOMAttrModified：在特性被修改以後觸發。
（7）DOMCharacterDataModified:在文本節點的值發生變化時觸發。

var isSupported = document.implementation.hasFeature('MutationEvents','2.0');

========================================================================================

contextmenu 事件

EventUtil.addHandler(div, "contextmenu", function (event) {
event = Event.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById('myMenu')
menu.style.left = event.clientX + 'px'
menu.style.top = event.clientY + 'px'
})

EventUtil.addHandler(document, "click", function (event) {
...style.visibilty='hidden'
})

</script></body> </html>

相關標籤/搜索

history+location+navigator+screen+event

action+delegate+event+eventhandle+func+lambda+type

yanlz+framework+unity+lod+mipmap+ref+out+params+delegate+event

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。