有关于addEventListener以及removeEventListener的相关问题

之前在编写js代码时经常容易爆出

cannot read property "....." of null

这种叫“捕获类型错误”，一般往往是因为编写人员粗心大意捕获错了对象所导致的，或是在捕获时类型错误。

addEventListener主要解决了js中需要触发多个函数而被创造出来的，

其中包含三个参数 addEventListener( “触发事件”,”需要运行的函数名”,”是否需要阻止冒泡 (默认为阻止冒泡事件)”)

<div id="clicks">请点击我</div>

<style>
#clicks{
width: 200px;
height: 30px;
text-align: center;
line-height: 30px;
text-align: center;
margin: 0 auto;
border: 1px red solid;
}
</style>

<script>
var y=document.getElementById("clicks");
y.addEventListener("click",fun);
y.addEventListener("click",funs);

function fun(){
alert("Hello World!")
}
function funs(){
alert("Hello William.Yao")
}
</script>

这里需要注意的是addEventListener中的触发函数不可加括号，否则就会失效。由于只能写触发函数的函数名，因此如果需要传参就需要用到bind( )事件（IE6、7、8不支持）具体请详见bind、call、apply的详细介绍

<script>
var y=document.getElementById("clicks");
y.addEventListener("click",fun.bind());
y.addEventListener("click",fun.bind());

function fun(){
alert("Hello World!")
}
function funs(){
alert("Hello William.Yao")
}
</script>

addEventListener在IE中会出现不被支持的现象，因此我们需要做一些兼容性处理：

var y = document.getElementById("clicks");

if( y.addEventListener){ //所有主流浏览器，除了 IE 8 及更早 IE版本

y.addEventListener("click",fun);

}else if( y.attachEvent){ // IE 8 及更早 IE 版本
y.attachEvent("onclick",fun);
}

removeEventListener()

此方法旨在移除添加到addEventListener( )中的触发事件。

<style>
#myDIV
{
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
}
</style>

<div id="myDIV"> div 元素添加了  onmousemove 事件句柄，在你移动鼠标时会显示随机数。
<p>点击按钮移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction()
{
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler()
{
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

IE兼容性写法：

var x = document.getElementById("myDIV");
if (x.removeEventListener) {                   // // 所有浏览器，除了 IE 8 及更早IE版本
x.removeEventListener("mousemove", myFunction);
} else if (x.detachEvent) {                   // IE 8 及更早IE版本
x.detachEvent("onmousemove", myFunction);
}