有的时候我会遇到导入本地文件<input class="IamInputElement" type="file"/>的情况，但是往往为了美观或者为了可以自己设计一个美观的样式而将input的样式设置为display:none。然后给出一个button，为button添加click时间，然后document.getElementByClassName("IamInputElement").click()，这样就可以实现对input框的点击了。
但是我们还需要获取到input输入的地址，这个时候往往会给input框添加上addEventListener事件：document.getXXX("XXX").addEventListener("change",function(e){
var file = e.target.files[0]
})
另外如果是react的话就可以用this.refs.XXX.addEventListener来实现（一般会在componentDidMount中实现）
以上作为一个分割线吧，虽然跟题目没有什么太大的关系。但是因为上面的问题而引起的对题目（addEventListener和on的区别）的思考。家长里短的说一下。
抛开上面的例子。以一个button为例子，在js中为他加上click点击事件的话可以使用。document.getElementById("thisIsButtonId").onclick = function(){
//dosomething
}
通过以上的方法可以在button被点击的时候做出响应。
但是这种方法如果为同一个button添加多个响应事件，只会执行最后一个，因为后面的会覆盖前面的。
然后来看看addEventListener（）方法：
document.getElementById("thisIsButtonId").addEventListener（“click”,function(){
//dosomething
}）,这个样子的话就可以实现跟上面一样的效果了。只是如果通过这个方法为button添加多个方法的时候每一个方法都会执行。
来看看某网站的文档说明：
这里面的bool型参数useCapture是控制执行的顺序的(useCapture默认为FALSE)
上面大概的意思是如果两个element都包含响应事件的话，useCapture控制执行的顺序：
如果useCapture为false：根据事件冒泡的顺序执行的。也就是说是根据被点击的元素向外逐个执行。
如果useCaptrue为true：跟上面相反。也叫事件捕获执行。
为什么使用addEventListener（）呢？
第一：允许为一个event（例如:click）添加多个handler。
第二：为我们提供了可选的执行顺序，有useCaptrue来控制（如果我没有理解错的话）
第三：实用在任何DOM中，这个在最前面提到的react中使用到了。可以通过this.refs.XXX.addeventListener('click',function(){},false)
另外，addEventListener（）过后需要removeEventListener（）的话需要使用同一个function()也就是说document.getElementById("XX").addEventListener('click',function(){})
然后document.getElementById("XX").removeEventListener('click',function(){}),这样是不对的。因为前后两个的function是不一样的，即使他们的方法都是一模一样的。应该使用
function func(){//dosomething}，然后将这个func放进去，这样的话两个方法用的就是同一个function了。但是要注意：func后面就不可以加“（）”了
以前的时候很少看文档，现在慢慢养成这样的习惯吧。这次总结（如果这鬼东西也能叫总结的话），我看英文文档看的心好累。最后的时候感觉自己总结的狗屁不通。慢慢改进吧。x
网友评论