注冊事件(三種方式)
on的方式
語法:事件源.on+事件類型 = 事件處理程序
缺點:只能注冊一次同類型的事件,如果多次注冊,會覆蓋(賦值的方式容易被后面注冊的事件覆蓋)
btn.onclick = function() {
//ul.removeChild(li5);
ul.removeChild(ul.children[ul.children.length-1]);
}
addEventListener的方式 -- 添加事件監(jiān)聽
語法:事件源.addEventListener("事件類型",事件處理程序,false); (false可有可無)
優(yōu)點:不會出現(xiàn)覆蓋問題,協(xié)同工作的時候推薦使用
兼容:ie8及以下瀏覽器不支持
close[i].addEventListener('click', function () {
this.parentNode.parentNode.style.display = 'none';
})
attachEvent的方式
語法:事件源.attachEvent("on"+事件類型,事件處理程序函數(shù))
兼容:只有ie5~ie10支持,ie11開始放棄,不支持主瀏覽器
btn.attachEvent('onclick',function(){
console.log(123);
})
封裝瀏覽器兼容問題的函數(shù)
/* * 一般是函數(shù)的功能: 兼容的注冊事件
* @param element 要注冊事件的元素對象
* @param type 要注冊的事件類型
* @param callback 事件的處理程序
*/
function addEvent(element,type,callback){
//判斷要注冊事件的元素是否可以通過addEventListener來注冊
if(element.addEventListener != undefined){
//可以,執(zhí)行這一步
element.addEventListener(type,callback,false);
}
//不可以 , 判斷要注冊事件的元素是否可以通過attachEvent 來注冊
else if( element.attachEvent != undefined){
//可以使用attachEvent 來注冊
element.attachEvent('on'+type,callback);
}
}
/* != undefined 可以不寫*/
移除事件(三種方式)
on的方式移除
語法:事件源.on+事件類型 = null
//使用on的移除事件
btn.onclick = function(){
console.log(123);
this.onclick = null;
}
addEventListener的方式移除
語法:事件源.removeEventListener(事件類型,要移除的函數(shù)名)
// 使用removeEventListener移除事件
function fn2(){
console.log(456);
this.removeEventListener('click',fn2,false);
}
attachEvent的方式移除
語法:事件源.detachEvent("on"+事件類型,函數(shù)名)
//使用detachEvent移除事件
var fn = function(){
console.log(123);
}
function fn2(){
console.log(456);
btn.detachEvent('onclick',fn2);
}
btn.attachEvent('onclick',fn);
btn.attachEvent('onclick',fn2);