溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
周末無(wú)聊， 這幾天又復(fù)習(xí)了下JS搞基程序設(shè)計(jì)3， 想著好記性不如浪筆頭哇， 要么把這些東西寫下來(lái)， 這樣基礎(chǔ)才能更加扎實(shí)么么噠, 知道的同學(xué)也可以直接過(guò)一下,當(dāng)做復(fù)習(xí)， 小姨子再也不用擔(dān)心我的學(xué)習(xí)啦；
從哪里開始呢?????
？ ???????
事件的類型
DOM3規(guī)定了下面這幾事件類型:
UI事件；onload，resize，scoll等等;
焦點(diǎn)事件；
鼠標(biāo)事件；
滾輪事件；
文本事件；
鍵盤事件；
變動(dòng)事件；（用的也少）；
變動(dòng)名稱事件，當(dāng)元素的屬性名發(fā)生改變的時(shí)候觸發(fā)（沒(méi)啥用， 要弄編輯器的時(shí)候才用得到）；
UI事件：
"DOMActivate" : 元素被用戶操作(鼠標(biāo)或者鍵盤激活)會(huì)觸發(fā)的事件, chrome(38)有效， firefox(34)下無(wú)效, 代碼如下,點(diǎn)擊即可打開查看:
運(yùn)行下面代碼
<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" : 會(huì)在window， object 以及 img上面觸發(fā)(PS:IE8和IE8之前的script標(biāo)簽不支持 但是支持onreadystatechange, IE家族中所有元素都支持這個(gè)狀態(tài)屬性么么噠)
"unload" : window.onuload , object.onunload ,圖像不觸發(fā)onunload;
運(yùn)行下面代碼
<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");
}; //記得要先添加事件哦, 因?yàn)閕mg標(biāo)簽只要添加了url就會(huì)開始加載, 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)一個(gè)ｊｓ代碼執(zhí)行發(fā)生錯(cuò)誤的時(shí)候觸發(fā)， 或者img, object, script等需要請(qǐng)求遠(yuǎn)程資源的標(biāo)簽沒(méi)有請(qǐng)求到, 就會(huì)觸發(fā)這個(gè)事件, 這個(gè)事件實(shí)際工作中用的不多。?！?/p>
運(yùn)行下面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件的類型</title>
<meta charset="UTF-16" />
</head>
<script>
window.onerror = function(){
alert("JS執(zhí)行發(fā)出錯(cuò)誤!")
};
a(1) </script>
<body>
<pre>
<img onerror="alert('error')" src="unknow.png" />
</pre>
</body>
</html>
"abort" : 用戶停止下載(用戶問(wèn)題)或者內(nèi)容沒(méi)有加載完畢(服務(wù)器問(wèn)題), 就會(huì)觸發(fā);
"resize" : 把窗口拉大拉小, 最大化和最小化也會(huì)觸發(fā)這個(gè)事件(在移動(dòng)端上的onoritatinochange反應(yīng)很慢,就可以用resize代替),而且火狐的低版本是等到用戶停止resize才會(huì)執(zhí)行事件函數(shù);
"scroll" : 滾動(dòng),主要是window.onscroll這個(gè)事件。
resize事件的執(zhí)行快的話70毫秒，慢的話100毫秒執(zhí)行一次,DEMO， 你把界面resize一下，然后快一點(diǎn)點(diǎn)擊cacl 這個(gè)按鈕測(cè)試瀏覽器平均多久執(zhí)行一次resize的事件,別怪我懶啊,鍛煉你的反應(yīng)力的時(shí)候到了，懂嗎 \\~_~///;
運(yùn)行下面代碼
<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>
焦點(diǎn)事件 : 焦點(diǎn)事件可以獲取用戶在界面上的行蹤;
blur : 失去焦點(diǎn)的 時(shí)候觸發(fā)， 不冒泡；
focus ： 這個(gè)是聚焦的時(shí)候發(fā)生， 不冒泡；
DOMFocusIn ： 這個(gè)時(shí)間和 focusin一樣，只是DOM三選擇了focusin
DOMFocusOut ： 這個(gè)時(shí)間和 focusout一樣，只是DOM3選擇了focusout
focusin ：冒泡的聚焦事件;
focusout ： 冒泡的失焦事件;
檢測(cè)焦點(diǎn)事件的代碼如下,只能說(shuō)火狐不給力，:
運(yùn)行下面代碼
<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， 而且界面一開始就自動(dòng)對(duì)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個(gè)鼠標(biāo)事件(.........)你數(shù)一數(shù)，是不是剛好九個(gè)；
click：一般是左鍵觸發(fā)這個(gè)事件，右鍵是觸發(fā)右鍵菜單，如果當(dāng)前的元素獲得焦點(diǎn)，那么我們按回車(enter)也會(huì)觸發(fā)click事件， 這個(gè)DEMO不是讓你點(diǎn)擊，是讓你在按鈕聚焦的情況下按enter鍵：
運(yùn)行下面代碼
<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)雙擊的時(shí)候觸發(fā)，有時(shí)候有用， 如果dblclick觸發(fā)了也會(huì)觸發(fā)click的事件;
運(yùn)行下面代碼
<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")
}); /*
控制臺(tái)輸出 ：
"click"
"dblclick"
"click"
"dblclick"
結(jié)論就是兩次快速的點(diǎn)擊會(huì)觸發(fā)一次dblclick(dbl的意思就是doubleclick的縮寫) */
</script>
</body>
</html>
事件名字只要包含mouse， 都只能通過(guò)鼠標(biāo)的觸發(fā)比如, 無(wú)法通過(guò)鍵盤觸發(fā)的事件：
mousedown,
mousemove,
mouseout,
mouseover,
mouseup
mouseenter, (要注意這個(gè)事件， chrome的高版本才支持的, 這個(gè)事件是ie先弄出來(lái)的，jQ有做兼容處理所以在chrome下可以使用這個(gè)事件)
mouseleaver (要注意這個(gè)事件， chrome的高版本才支持的, 這個(gè)事件是ie先弄出來(lái)的，jQ有做兼容處理所以在chrome下可以使用這個(gè)事件);
因?yàn)槌Ｓ玫狞c(diǎn)擊都是鼠標(biāo)左鍵， 所以要觸發(fā)dblclick會(huì)觸發(fā)大部分的mouse事件；
比如你要觸發(fā)dblclick， 也會(huì)依次觸發(fā)
1: mousedown
2: mouseup
3: click
4: mousedown
5: mouseup
6: click
7: dblclick;
要檢測(cè)鼠標(biāo)事件的兼容通過(guò)：
document.implementation.hasFeature("MouseEvents","2.0") //true （注意注意，DOM2的事件檢測(cè)的名字是復(fù)數(shù)，要加一個(gè)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這兩個(gè)奇葩了(IE? IE是什么能吃嗎？)， 無(wú)論怎么傳都是true, 我勒個(gè)去;新航道雅思
事件對(duì)象的屬性：
客戶坐標(biāo)的值：
clientX
clientY
頁(yè)面坐標(biāo)的值：
pageX
pageY;
IE8以及更早版本沒(méi)有pageX這個(gè)值，我們可以通過(guò)客戶指標(biāo)的值(clientX,clientY)和界面的滾動(dòng)條算出來(lái)；
pageX = clientX + document.documentElement.scrollLeft || document.body.scrollLeft (IE8以及之前的2px沒(méi)有處理哦)
pageY = clientY + document.documentElement.scrollTop || document.body.scrollTop; (同上)
屏幕的坐標(biāo)：
screenX
screenY (這兩個(gè)屬性我從來(lái)沒(méi)有用過(guò)..)
修改鍵(熱鍵,也叫快捷鍵)：
//這幾個(gè)值都在事件對(duì)象下面;
ctrlKey,
shiftKey,
altKey,
metaKey( WINDOW中是窗口鍵， 蘋果電腦是CMD鍵 )
相關(guān)元素（relateTarget）:
IE下沒(méi)有relateTarget這個(gè)東東， 有個(gè)toElement和fromElement;這個(gè)屬性沒(méi)啥用， 唯一的用處就是在不支持mouseenter以及mouseleave的瀏覽器中模擬這兩個(gè)事件(chrome低版本);
鼠標(biāo)按鈕：
平常用的不多，就是在鼠標(biāo)按下去的時(shí)候是鼠標(biāo)左鍵還是中鍵還是鼠標(biāo)右鍵的區(qū)別；
IE8以及之前對(duì)鼠標(biāo)的按鍵的規(guī)定和DOM3區(qū)別很大，DOM3是這樣規(guī)定的：
0：鼠標(biāo)左鍵，
1：鼠標(biāo)中鍵（滾動(dòng)鍵）；
2：鼠標(biāo)右鍵；
因?yàn)镮E和DOM2,DOM3按鈕事件屬性(event)都有button這個(gè)屬性，必須通過(guò)hasFearture進(jìn)行判斷（也沒(méi)有別的方法了吧，soga）,so,兼容代碼要如下：
運(yùn)行下面代碼
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)滾輪滾動(dòng)都是通過(guò)event.wheelDelta標(biāo)識(shí)的;
如果滾輪是向上滾動(dòng)那么wheelDelta為120，向下值為-120； 哇擦家里么喲鼠標(biāo)， 筆記本的滾輪怎么滾啊，（￣Ｑ￣）╯，先貼代碼吧，
運(yùn)行下面代碼
<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)在還是沒(méi)有mousewheel事件，我要噴了，還是要使用DOMMouseScroll這個(gè)事件進(jìn)行綁定;
火狐的滾輪的滾動(dòng)屬性值和chrome和ie都不一樣，是一個(gè)叫做detail的屬性，而且向上的值為-3，向下為3（方向反了，這樣記比較好記）;
要寫出兼容代碼，要這樣
運(yùn)行下面代碼
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，(如果用戶按住不放會(huì)重復(fù)觸發(fā)，而且這個(gè)鍵有點(diǎn)延遲，，)
keypress，(如果用戶按住不放會(huì)重復(fù)觸發(fā)，而且這個(gè)鍵有點(diǎn)延遲，)
keyup，
textInput (這個(gè)事件是DOM3新增的)
事件的屬性信息：
既然是用戶輸入，那么肯定要有一個(gè)是字符串的信息的事件屬性，猜都不用猜的
要跨瀏覽器獲取用戶輸入的字符串編碼，可以通過(guò)，
運(yùn)行下面代碼
if( typeof event.charCode === "number") {
return event.charCode;
}else{
return event.keyCode;
}；
keyCode這個(gè)值是包含了回車，制表符，箭頭數(shù)字鍵盤，f1，f12所有鍵盤的數(shù)值;
charCode只是表示按下字符的ascll編碼;
好了好了，睡覺(jué)去了，眼睛要常休息下；
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼