前端 —— JavaScript 基础篇13 --- 事件监听器(DOM2级事件)

之前的文章的案例中 为DOM元素添加事件,出现两种方式。今天再说下第三种方式,也能为元素添加事件。

事件监听器 (DOM2级事件)

addEventListener

可以添加多个事件。存在兼容问题,支持 IE9 以上

实例:

 
var btn = document.querySelector('button');
btn.addEventListener('click',function () {
	alert('哈哈')
});


function fn2() {
	alert('2222222')
};
btn.addEventListener('click',fn2);

移除监听事件:removeEventListener

btn.removeEventListener('click',fn2)

那么IE 6、7、8 怎么变呢,他们也有监听器

btn.attachEvent('onclick',function(){
    函数体
});

//移除事件监听器
btn.detachEvent('事件名',函数名)

解决监听事件兼容性  实例:

function jt(){
	alert('监听事件的兼容问题')
}

function addEventListener(ele,eventName,fn){
	if (ele.addEventListener) {
		ele.addEventListener(eventName,fn);
	}else if (ele.attachEvent) {
		ele.attachEvent('on' + eventName,fn);
	}else{
		ele['on' + eventName] = fn;
	}
}

addEventListener(btn,'mouseover',jt)

下面是移除监听器的实例:

function removeEventListener(ele,eventName,fn){
	if (ele.removeEventListener) {
		ele.removeEventListener(eventName,fn);
	}else if (ele.detachEvent) {
		ele.detachEvent('on' + eventName,fn);
	}else{
		ele['on' + eventName] = fn;
	}
}

removeEventListener(btn,'mouseover',jt)

 

补充:

开头提到的两种事件的用法

方法 1:

    element.onclick= function(){
        //事件处理函数
    }

方法 2:
    向html元素分配事件属性 ,调用函数来执行事件
    比如向button元素 分配一个点击事件的属性,如下:    


    function funClick(){
        //事件处理函数
    }

 

你可能感兴趣的:(JavaScript)