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