事件监听addEventListener()和removeEventListener() ---------1

一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了

首先,DOM0级事件和DOM2级事件

给一个元素添加事件有三种方法

HTML

<input type="button" value='button1' id='btn1' />
<input type="button" value='button2' id='btn2' />
<input type="button" value='button3' id='btn3' onclick="alert('我是btn3')" />

对于btn3的按钮,事件是直接加到元素标签内的,好像叫html事件,缺点就是没有分离吧

DOM0级事件

//添加事件
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
alert('我是btn1')
}
//解除事件
btn1.onclick=null;

直接取到btn1,给他添加conclick事件,缺点只能添加一个事件,如果再添加,会覆盖第一个事件

DOM2级事件

//添加事件
var btn2=document.getElementById('btn2');
function box(){alert('我是btn2');}
btn2.addEventListener('click',box,false);
//解除事件
btn2.removeEventListener('click',box,false);

添加事件用  addEventListener(什么事件、做什么事、false);      false好像是事件冒泡阶段 对应的 true事件捕获阶段,一般我这种菜鸟用不到true,没试过,反正一律写false

删除事件用  removeEventListener(什么事件、做什么事、false);

ps:添加事件和删除事件,必须和添加的时候相同才能移除,不然清不掉。

好像挺简单,真的要是这样就好了,这个addEventListener和removeEventListener有兼容问题,好像是IE8以下不好使,所以还有另外的单词要记

attachEvent 和 detachEvent,这个好像是IE专属,

用法

//添加事件
var btn2=document.getElementById('btn2');
function box(){alert('我是btn2');}
btn2.attachEvent('onclick',box);
//解除事件
btn2.detachEvent('onclick',box);

没有第三个参数是因为IE8以前只支持事件冒泡,另外需要记住,这里是onclick,所有的事件都要加on,低级的浏览器事比较多

好了,要记住这四个单词

addEventListener、removeEventListener、attachEvent、detachEvent

------------------------------------------------------------------------------------分割线------------------------------------------------------------------------------------------------------------------

要兼容所有浏览器,就做判断,谁有能力,谁做事

var btn2=document.getElementById('btn2');
function box(){alert('我是btn2');}
var eventUtil={
// 添加事件
addHandler:function(element,type,handler){ ////三个参数分别为元素、事件、做什么事(方法)
if(element.addEventListener){ //如果支持element.addEventListener方法就用addEventListener
element.addEventListener(type,handler,false);
}else if(element.attachEvent){ //如果支持element.attachEvent方法就用attachEvent
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler; //如果都不支持,那就用DOM0级的方法
}
},
// 删除事件 //同上
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]=null;
}
}
}
eventUtil.addHandler(btn2,'click',box);
eventUtil.removeHandler(btn2,'click',box);

封装了一个方法,以后可以直接拿过来用

上一篇:ECharts JavaScript图表库 ECharts


下一篇:python_基础学习_01_按行读取文件的最优方法