JS中的事件類型和事件屬性的基礎知識
周末無聊， 這幾天又復習了下JS搞基程序設計3， 想著好記性不如浪筆頭哇， 要么把這些東西寫下來， 這樣基礎才能更加扎實么么噠, 知道的同學也可以直接過一下,當做復習， 小姨子再也不用擔心我的學習啦；
成都創新互聯公司成立與2013年，是專業互聯網技術服務公司，擁有項目成都網站設計、網站制作網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元阜康做網站,已為上家服務,為阜康各地企業和個人服務,聯系電話:18982081108
從哪里開始呢?????
？ ???????
事件的類型
DOM3規定了下面這幾事件類型:
UI事件；onload，resize，scoll等等;
焦點事件；
鼠標事件；
滾輪事件；
文本事件；
鍵盤事件；
變動事件；（用的也少）；
變動名稱事件，當元素的屬性名發生改變的時候觸發（沒啥用， 要弄編輯器的時候才用得到）；
UI事件：
"DOMActivate" : 元素被用戶操作(鼠標或者鍵盤激活)會觸發的事件, chrome(38)有效， firefox(34)下無效, 代碼如下,點擊即可打開查看:
運行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件的類型</title>
<meta charset="UTF-8" />
</head>
<body>
<pre>
test </pre>
<script>
document.body.addEventListener("DOMActivate",function(){
alert("body")
},false);
document.getElementsByTagName("pre")[0].addEventListener("DOMActivate",function(){
alert("pre")
},false); </script>
</body>
</html>
"onload" : 會在window， object 以及 img上面觸發(PS:IE8和IE8之前的script標簽不支持 但是支持onreadystatechange, IE家族中所有元素都支持這個狀態屬性么么噠)
"unload" : window.onuload , object.onunload ,圖像不觸發onunload;
運行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>事件的類型</title>
<meta charset="UTF-8" /></head><body><pre>
test
//圖像被刪除不觸發unload事件; </pre><script>
var i = document.createElement("img");
document.body.appendChild(i);
i.onload = function() {alert("load")};
i.onunload = function() {
alert("onunload");
}; //記得要先添加事件哦, 因為img標簽只要添加了url就會開始加載, script和link標簽要等到添加到DOM中才開始加載!important; i.src="http://static.cnblogs.com/images/logo_small.gif";
document.body.removeChild(i);</script></body></html>
"error" : 當一個ｊｓ代碼執行發生錯誤的時候觸發， 或者img, object, script等需要請求遠程資源的標簽沒有請求到, 就會觸發這個事件, 這個事件實際工作中用的不多。。
運行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件的類型</title>
<meta charset="UTF-16" />
</head>
<script>
window.onerror = function(){
alert("JS執行發出錯誤!")
};
a(1) </script>
<body>
<pre>
<img onerror="alert('error')" src="unknow.png" />
</pre>
</body>
</html>
"abort" : 用戶停止下載(用戶問題)或者內容沒有加載完畢(服務器問題), 就會觸發;
"resize" : 把窗口拉大拉小, 最大化和最小化也會觸發這個事件(在移動端上的onoritatinochange反應很慢,就可以用resize代替),而且火狐的低版本是等到用戶停止resize才會執行事件函數;
"scroll" : 滾動,主要是window.onscroll這個事件。
resize事件的執行快的話70毫秒，慢的話100毫秒執行一次,DEMO， 你把界面resize一下，然后快一點點擊cacl 這個按鈕測試瀏覽器平均多久執行一次resize的事件,別怪我懶啊,鍛煉你的反應力的時候到了，懂嗎 \\~_~///;
運行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>事件的類型</title>
<meta charset="UTF-16" /></head><body><pre>
sdfs </pre><div>
result:0</div><button onclick="calc()"> calc </button><script>
var startTime = null; var times = []
window.onresize = function(){ if(startTime === null) {
startTime = new Date().getTime();
};
times.push(new Date().getTime() - startTime);
console.log(new Date().getTime() - startTime)
}; function calc(){ var len = times.length;; var val = times.reduce(function(a,b){return a+b})/len; document.getElementsByTagName("div")[0].innerHTML = val+"毫秒";
};</script></body></html>
焦點事件 : 焦點事件可以獲取用戶在界面上的行蹤;
blur : 失去焦點的 時候觸發， 不冒泡；
focus ： 這個是聚焦的時候發生， 不冒泡；
DOMFocusIn ： 這個時間和 focusin一樣，只是DOM三選擇了focusin
DOMFocusOut ： 這個時間和 focusout一樣，只是DOM3選擇了focusout
focusin ：冒泡的聚焦事件;
focusout ： 冒泡的失焦事件;
檢測焦點事件的代碼如下,只能說火狐不給力，:
運行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>事件的類型</title>
<meta charset="UTF-8" /></head><body><button id="btn"> calc </button>
<pre>
chrome 的結果
focus
focusin
body focusin
DOMFocusIn
blur
focusout
body focusout
DOMFocusOut
firefox的結果：
"focus"
"blur"
chorme所有的冒泡事件都支持。
火狐34還是只支持focus 和blur， 而且界面一開始就自動對body進行了focus; </pre><script>
var eventUtil = {
add : function(el, type, handler) { if(el.addEventListener) {
el.addEventListener(type, handler, false);
}else if( el.attachEvent ) {
el.attachEvent("on"+type, handler);
}else{
el["on"+type] = handler;
}
},
off : function(el, type, handler) { if( el.removeEventListener ) {
el.removeEventListener(type, handler, false)
}else if( el.detachEvent ) {
el.detachEvent(type, handler);
}else{
el["on"+type] = null;
}
}
}; var eBtn = document.getElementById("btn");
eventUtil.add(eBtn,"focus",function() {
console.log("focus")
})
eventUtil.add(eBtn,"blur",function() {
console.log("blur")
})
eventUtil.add(eBtn,"DOMFocusIn",function() {
console.log("DOMFocusIn")
})
eventUtil.add(eBtn,"DOMFocusOut",function() {
console.log("DOMFocusOut")
})
eventUtil.add(eBtn,"focusout",function() {
console.log("focusout")
})
eventUtil.add(eBtn,"focusin",function() {
console.log("focusin")
});
eventUtil.add(document.body,"focusin",function() {
console.log("body focusin")
});
eventUtil.add(document.body,"focusout",function() {
console.log("body focusout")
}); /*
document.body.onfocus = function(){
console.log("body focusin")
} */</script></body></html>
鼠標和滾輪你事件:
DOM3規定了9個鼠標事件(.........)你數一數，是不是剛好九個；
click：一般是左鍵觸發這個事件，右鍵是觸發右鍵菜單，如果當前的元素獲得焦點，那么我們按回車(enter)也會觸發click事件， 這個DEMO不是讓你點擊，是讓你在按鈕聚焦的情況下按enter鍵：
運行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件的類型</title>
<meta charset="UTF-8" />
</head>
<body>
<button autofocus="true" id="btn"> calc </button>
<pre>
</pre>
<script>
var eventUtil = {
add : function(el, type, handler) { if(el.addEventListener) {
el.addEventListener(type, handler, false);
}else if( el.attachEvent ) {
el.attachEvent("on"+type, handler);
}else{
el["on"+type] = handler;
}
},
off : function(el, type, handler) { if( el.removeEventListener ) {
el.removeEventListener(type, handler, false)
}else if( el.detachEvent ) {
el.detachEvent(type, handler);
}else{
el["on"+type] = null;
}
}
}; var eBtn = document.getElementById("btn");
eventUtil.add(eBtn,"click",function() {
alert("click")
}) </script>
</body>
</html>
dblclick：鼠標雙擊的時候觸發，有時候有用， 如果dblclick觸發了也會觸發click的事件;
運行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件的類型</title>
<meta charset="UTF-16" />
</head>
<body>
<div id="btn"> calc </div>
<pre>
</pre>
<script>
var eventUtil = {
add : function(el, type, handler) { if(el.addEventListener) {
el.addEventListener(type, handler, false);
}else if( el.attachEvent ) {
el.attachEvent("on"+type, handler);
}else{
el["on"+type] = handler;
}
},
off : function(el, type, handler) { if( el.removeEventListener ) {
el.removeEventListener(type, handler, false)
}else if( el.detachEvent ) {
el.detachEvent(type, handler);
}else{
el["on"+type] = null;
}
}
}; var eBtn = document.getElementById("btn");
eventUtil.add(eBtn,"click",function() {
console.log("click")
})
eventUtil.add(eBtn,"dblclick",function() {
console.log("dblclick")
}); /*
控制臺輸出 ：
"click"
"dblclick"
"click"
"dblclick"
結論就是兩次快速的點擊會觸發一次dblclick(dbl的意思就是doubleclick的縮寫) */
</script>
</body>
</html>
事件名字只要包含mouse， 都只能通過鼠標的觸發比如, 無法通過鍵盤觸發的事件：
mousedown,
mousemove,
mouseout,
mouseover,
mouseup
mouseenter, (要注意這個事件， chrome的高版本才支持的, 這個事件是ie先弄出來的，jQ有做兼容處理所以在chrome下可以使用這個事件)
mouseleaver (要注意這個事件， chrome的高版本才支持的, 這個事件是ie先弄出來的，jQ有做兼容處理所以在chrome下可以使用這個事件);
因為常用的點擊都是鼠標左鍵， 所以要觸發dblclick會觸發大部分的mouse事件；
比如你要觸發dblclick， 也會依次觸發
1: mousedown
2: mouseup
3: click
4: mousedown
5: mouseup
6: click
7: dblclick;
要檢測鼠標事件的兼容通過：
document.implementation.hasFeature("MouseEvents","2.0") //true （注意注意，DOM2的事件檢測的名字是復數，要加一個s，DOM3的不用的）
document.implementation.hasFeature("MouseEvent","3.0") //true
document.implementation.hasFeature("MouseEvent","4.0") //true
document.implementation.hasFeature("MouseEvent","5.0") //true
chrome和firefox這兩個奇葩了(IE? IE是什么能吃嗎？)， 無論怎么傳都是true, 我勒個去;新航道雅思
事件對象的屬性：
客戶坐標的值：
clientX
clientY
頁面坐標的值：
pageX
pageY;
IE8以及更早版本沒有pageX這個值，我們可以通過客戶指標的值(clientX,clientY)和界面的滾動條算出來；
pageX = clientX + document.documentElement.scrollLeft || document.body.scrollLeft (IE8以及之前的2px沒有處理哦)
pageY = clientY + document.documentElement.scrollTop || document.body.scrollTop; (同上)
屏幕的坐標：
screenX
screenY (這兩個屬性我從來沒有用過..)
修改鍵(熱鍵,也叫快捷鍵)：
//這幾個值都在事件對象下面;
ctrlKey,
shiftKey,
altKey,
metaKey( WINDOW中是窗口鍵， 蘋果電腦是CMD鍵 )
相關元素（relateTarget）:
IE下沒有relateTarget這個東東， 有個toElement和fromElement;這個屬性沒啥用， 唯一的用處就是在不支持mouseenter以及mouseleave的瀏覽器中模擬這兩個事件(chrome低版本);
鼠標按鈕：
平常用的不多，就是在鼠標按下去的時候是鼠標左鍵還是中鍵還是鼠標右鍵的區別；
IE8以及之前對鼠標的按鍵的規定和DOM3區別很大，DOM3是這樣規定的：
0：鼠標左鍵，
1：鼠標中鍵（滾動鍵）；
2：鼠標右鍵；
因為IE和DOM2,DOM3按鈕事件屬性(event)都有button這個屬性，必須通過hasFearture進行判斷（也沒有別的方法了吧，soga）,so,兼容代碼要如下：
運行下面代碼
if( document.implementation.hasFearture("MouseEvents","2.0")return event.button,
else{
swtich( event.button ) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4 :
return 1
};
}
現在到了滾輪事件了：
IE和chrome以及opera的鼠標滾輪滾動都是通過event.wheelDelta標識的;
如果滾輪是向上滾動那么wheelDelta為120，向下值為-120； 哇擦家里么喲鼠標， 筆記本的滾輪怎么滾啊，（￣Ｑ￣）╯，先貼代碼吧，
運行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件的類型</title>
<meta charset="UTF-16" />
</head>
<body>
<style>
#btn{
overflow: auto;
width:400px;
height:400px;
background: #f0ad4e;
}
</style>
<div id="btn"> xx <div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>hehe <br>
<br>
<br>
<br>
<br>hehe <br>
<br>
<br>
<br>
<br>hehe <br>
<br>
<br>
<br>
<br>hehe <br>
<br>
<br>
<br>
<br>hehe </div>
</div>
<pre>
</pre>
<script>
var eventUtil = {
add : function(el, type, handler) { if(el.addEventListener) {
el.addEventListener(type, handler, false);
}else if( el.attachEvent ) {
el.attachEvent("on"+type, handler);
}else{
el["on"+type] = handler;
}
},
off : function(el, type, handler) { if( el.removeEventListener ) {
el.removeEventListener(type, handler, false)
}else if( el.detachEvent ) {
el.detachEvent(type, handler);
}else{
el["on"+type] = null;
}
}
}; var eBtn = document.getElementById("btn");
eventUtil.add(eBtn,"mousewheel",function(ev) {
ev = ev || window.ev;
console.log(ev.wheelDelta);
}) /*
* */
</script>
</body>
</html>
火狐到了現在還是沒有mousewheel事件，我要噴了，還是要使用DOMMouseScroll這個事件進行綁定;
火狐的滾輪的滾動屬性值和chrome和ie都不一樣，是一個叫做detail的屬性，而且向上的值為-3，向下為3（方向反了，這樣記比較好記）;
要寫出兼容代碼，要這樣
運行下面代碼
var eBtn = document.getElementById("btn");
eventUtil.add(eBtn,"mousewheel",wheel)
eventUtil.add(eBtn,"DOMMouseScroll",wheel);
wheel = function() {
ev = ev || window.ev;
if(ev.wheelDelta) {
return ev.wheelDelta
}else{
return - ev.detail*3
}
}
鍵盤事件：
keydown，(如果用戶按住不放會重復觸發，而且這個鍵有點延遲，，)
keypress，(如果用戶按住不放會重復觸發，而且這個鍵有點延遲，)
keyup，
textInput (這個事件是DOM3新增的)
事件的屬性信息：
既然是用戶輸入，那么肯定要有一個是字符串的信息的事件屬性，猜都不用猜的
要跨瀏覽器獲取用戶輸入的字符串編碼，可以通過，
運行下面代碼
if( typeof event.charCode === "number") {
return event.charCode;
}else{
return event.keyCode;
}；
keyCode這個值是包含了回車，制表符，箭頭數字鍵盤，f1，f12所有鍵盤的數值;
charCode只是表示按下字符的ascll編碼;
好了好了，睡覺去了，眼睛要常休息下；
網頁題目：JS中的事件類型和事件屬性的基礎知識
網站URL：http://vcdvsql.cn/article16/gjoigg.html
成都網站建設公司_創新互聯，為您提供服務器托管、網站導航、關鍵詞優化、移動網站建設、標簽優化、建站公司
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 關鍵詞優化的注意事項 2016-10-15
- 成都關鍵詞優化教你通過逆向思維解決SEO難題 2020-07-14
- 網站長尾關鍵詞優化七大技巧 2016-01-01
- 網站優化如何做整站關鍵詞優化 2022-12-24
- 大量長尾關鍵詞優化有哪些好處? 2020-10-22
- SEO外包：SEO網站關鍵詞優化提升排名的方法 2016-11-11
- 關鍵詞優化對成都網站建設的重要性 2016-12-12
- 網站cookie對關鍵詞優化有影響嗎？ 2013-11-24
- 網站關鍵詞優化-選對關鍵詞可以提升你的網站排名 2016-11-11
- 微信小程序SEO指南發布，關鍵詞優化竟然不是“關鍵” 2021-11-24
- 網站關鍵詞優化需要注意些什么？ 2021-09-28
- 網頁優化的關鍵詞優化方法有哪些？ 2022-08-14