DOM 1級(jí)方式設(shè)置(4種)
- 通過(guò)onclick指定JS函數(shù)名稱
<input type="text" name="userName" onclick="函數(shù)名稱()">
function 函數(shù)名稱(）{···};
- 在onclick中直接寫入過(guò)程代碼
<input type="text" name="userName" onclick="var a=10;alert(a);">
- JS中節(jié)點(diǎn).onclick = 匿名函數(shù)
- JS中節(jié)點(diǎn).onclick = 函數(shù)名稱 注意是函數(shù)名稱，不是調(diào)用函數(shù)
itnode.onclick = 有名函數(shù)名稱;
function 函數(shù)名稱(){···}
注意：以上DOM1級(jí)事件設(shè)置的4種具體表現(xiàn)形式，除了第1種(this代表window)，其他三種方式內(nèi)部this都代表當(dāng)前節(jié)點(diǎn)本身
DOM 2級(jí)事件設(shè)置
所謂DOM 2級(jí)事件設(shè)置可以更加靈活的任何可視節(jié)點(diǎn)添加動(dòng)作事件。
- addEventListener：節(jié)點(diǎn).addEventListener(動(dòng)作名稱，事件名稱，事件流)
//addEventListener第一種使用方式
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',function(){
this.style.backgroundColor ="pink";
});
//addEventListener第二種使用方式
dv.addEventListener('mouseover',f1);
function f1(){
dv.style.backgroundColor ="pink";
};
- removeEventListener：節(jié)點(diǎn).removeEventListener(動(dòng)作名稱，事件名稱，事件流)
如果是IE瀏覽器(IE9以下)的話最好使用attachEvent(事件類型，事件處理)和detachEvent(事件類型，事件處理)
事件流
多個(gè)彼此嵌套的元素，他們擁有相同的時(shí)間，最內(nèi)部事件被觸發(fā)后，外邊多個(gè)元素的同類型時(shí)間會(huì)被觸發(fā)，多個(gè)元素他們同類型時(shí)間同時(shí)執(zhí)行的效果稱為"事件流"
注意：在addEventListener或者removeEventListener中最后一個(gè)參數(shù)如果為false（冒泡型，從內(nèi)而外），為true（捕捉型，從外而內(nèi)）
事件對(duì)象
事件對(duì)象，每個(gè)事件(包括鼠標(biāo)，鍵盤事件)觸發(fā)執(zhí)行的過(guò)程中，都有對(duì)應(yīng)的事件對(duì)象，通過(guò)事件對(duì)象可以獲得鼠標(biāo)相對(duì)頁(yè)面的坐標(biāo)信息，什么鍵子被觸發(fā)執(zhí)行，通過(guò)事件對(duì)象還可以阻止事件流產(chǎn)生，阻止瀏覽器默認(rèn)動(dòng)作。
獲得事件對(duì)象
聲明觸發(fā)方法時(shí)參數(shù)evt，evt就是事件對(duì)象獲取鼠標(biāo)的坐標(biāo)信息
event.clientX/clientY （相對(duì)dom的坐標(biāo)）
event.pageX/pageY （考慮滾動(dòng)條）
event.screenX/screenY （相對(duì)屏幕坐標(biāo)）
- 阻止事件流
event.stopPropagetion() //主流瀏覽器
event.cancelBubble = true //IE瀏覽器
冒泡型、捕捉型都可以進(jìn)行阻止
- 阻止瀏覽器默認(rèn)動(dòng)作
事件對(duì)象.preventDefault() //主流瀏覽器
事件對(duì)象.returnValue=false //IE瀏覽器
return false //dom1級(jí)事件設(shè)置
- 獲取被觸發(fā)鍵盤鍵子信息
event.keyCode 獲得鍵盤對(duì)應(yīng)的鍵值碼信息，返回的為ASC碼
加載事件 onload
JS代碼執(zhí)行時(shí)如果涉及到html或者css時(shí)，需要讓html和css執(zhí)行后，在執(zhí)行js代碼，但通過(guò)加載事件可以實(shí)現(xiàn)JS代碼寫在html和css代碼之前
具體設(shè)置：
//方式1（不推薦）
<body onload=“加載函數(shù)()”>
//方式2
//在js中書寫
window.load=加載函數(shù)();
