-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
? ? <div>
? ? <input type="button" value="HTML事件" id="btn" onclick="showMes()">
? ? <input type="button" value="DOM0事件" id="btn2">
? ? <input type="button" value="DOM2事件" id="btn3">
? ? <input type="button" value="IE事件" id="btn4">
? ? </div>
? ? <script type="text/javascript">
? ? //HTML事件，將觸發(fā)事件放在HTML里面?？梢灾苯訉?，也可以封裝。
? ? ? ? ? ? function showMes(){
? ? alert("hello world");
? ? }
? ? var d=document;
? ? var btn2=d.getElementById("btn2"),
? ? ? ? btn3=d.getElementById("btn3"),
? ? ? ? btn4=d.getElementById("btn4");
? ? //DOM0事件，在js里觸發(fā)事件，便于修改；當觸發(fā)的事件=null為刪除該事件。
? ? /*btn2.onclick=function(){
? ? alert("這是通過DOM0級添加的事件");
? ? }
? ? btn2.onclick=null;*/ //null不加引號。刪除事件后，點擊按鈕將不再跳出彈框。
? ? //DOM2事件，處理事件addEventListener("其包括三個參數(shù)，觸發(fā)、函數(shù)、false"),刪除事件removeEventLiatener("同樣包含三個參數(shù)")。
? ? ? ? //注意：DOM2的觸發(fā)事件不加“on”，且此方法不支持IE瀏覽器。
? ? ? ? /*btn3.addEventListener("click",showMes,false);
? ? ? ? btn3.removeEventListener("click",showMes,false);*/
? ? //IE事件
? ? ? ? ?//IE8以及更早瀏覽器只支持事件冒泡
? ? ? ? ?//添加事件attachEvent("其包含兩個參數(shù)，觸發(fā)、函數(shù)（觸發(fā)需要加‘on’）")，刪除事件detachEvent("統(tǒng)一包含兩個參數(shù)")。
? ? ? ? ? ?//btn4.attachEvent("onclick",showMes);
? ? ? ? ? ?//btn4.detachEvent("onclick",showMes);
? ? ? ? //封裝一個DOM0,DOM2,IE事件，誰行誰用上。
? ? ? ? ? ? var eventutil={
? ? ? ? ? ? addhandler:function(element,type,handler){
? ? ? ? ? ? if(element=addEventListener){
? ? ? ? ? ? ? ? ? ? ? ?element=addEventListener(type,handler,false);
? ? ? ? ? ? }else if(element=attachEvent){
? ? ? ? ? ? ? ? ? ? ? ?element=attachEvent('on'+type,handler);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ?element['on'+type]=handler;
? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? removehandler:function(element,type,handler){
? ? ? ? ? ? if(element=removeEventListener){
? ? ? ? ? ? ? ? ? ? ? ?element=removeEventListener(type,handler,false);
? ? ? ? ? ? }else if(element=detachEvent){
? ? ? ? ? ? ? ? ? ? ? ?element=detachEvent('on'+type,handler);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ?element['on'+type]=handler;
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? eventutil.addhandler(btn3,'click',showMes);
? ? ? ? ? ? eventutil.removehandler(btn3,'click',showMes);
? ? </script>
</body>
</html>
查看全部 -
Dom鍵盤事件
查看全部 -
type?事件屬性 target?事件目標 stopPropagation()?阻止事件冒泡 preventDefalut()?阻止事件默認行為
查看全部 -
node.addEventListener(eventName,?function,?eventType) node.removeEventListener(eventName,?function,?eventType)
查看全部 -
DOM0級事件：簡單，易維護，跨瀏覽器
查看全部 -
hmtl 事件處理程序
????優(yōu)點：事件明確
????缺點：不方便代碼修改和維護
查看全部 -
事件冒泡，在沖突的時候要阻止
查看全部 -
dom0級 其實就是 先把元素取出來? 然后在添加? funciton 事件?
查看全部 -
DOM2級事件處理程序，addEventListener()和removeEventListener()有三個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和布爾值。布爾值true：在捕獲階段調(diào)用事件處理程序。false：在冒泡階段調(diào)用事件處理程序
查看全部 -
HTML事件處理程序最大的缺點：HTML和JS代碼緊密的耦合在一起
查看全部 -
布爾值--false：表示在冒泡階段調(diào)用事件處理程序(可以最大限度的兼容瀏覽器)，一般設為false；true表示在捕獲階段調(diào)用事件處理程序
查看全部 -
《JavaScript高級程序設計》中講了，DOM0級對每個事件只支持一個事件處理程序，這也正是DOM2級相對DOM0級的好處，即DOM2級對每個事件支持多個事件處理程序。
查看全部 -
布爾值：true:捕獲級 ? false：冒泡級
查看全部 -
function showMes() {
alert('Hello world!');
}
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
btn2.onclick = function () {
alert('這是DOM0級事件');
}
btn2.onclick = null;
// //DOM2級事件
// btn3.addEventListener('click',showMes,false);
// btn3.removeEventListener('click',showMes,false);
// btn3.attachEvent('onclick',showMes);
// btn3.detachEvent('onclick',showMes);
var eventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detaachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
}
}
eventUtil.addHandler(btn3, 'click', showMes);
eventUtil.removeHandler(btn3, 'click', showMes);
查看全部 -
function showMes() {
alert('Hello world!');
}
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
btn2.onclick = function () {
alert('這是DOM0級事件');
}
btn2.onclick = null;
// //DOM2級事件
// btn3.addEventListener('click',showMes,false);
// btn3.removeEventListener('click',showMes,false);
// btn3.attachEvent('onclick',showMes);
// btn3.detachEvent('onclick',showMes);
var eventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detaachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
}
}
eventUtil.addHandler(btn3, 'click', showMes);
eventUtil.removeHandler(btn3, 'click', showMes);
查看全部
舉報