<button id="btn">按钮</button>
可以使用下面的两种方法为button对象添加点击事件:
方法1：
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("HelloWorld");
}
方法2：
function hello() {
alert('addEventListener()方法');
}
var btn = document.getElementById('btn');
btn.addEventListener('click', hello, false);
这两种方法为button对象添加点击事件时,为什么一个用的是onclick，而另一个用的却是click呢?
click是一个方法，onclick是一个事件。
1.事件名前一般都以on开头；
2.方法是程序员写语句直接调用，即显示调用；【可以触发onclick事件】 3.事件不需程序员调用，但是，必须由程序员写一个函数且将该函数赋值给相应的事件，其调用是在相应的事件触发时。【告诉浏览器在鼠标点击时候要做什么】所以调用顺序是：首先方法其次事件。
针对你的问题我觉得。你是在纠结为什么一个是onclick，而另一一个是click。
onclick可以拆分为on+click，原生js基本都是on+事件。
btn.onclick 表示给btn添加点击事件触发函数，click是一个元素本身就具有的属性，这边给这个属性添加执行函数。同一个元素的 click函数赋值多次，以
做后一次赋值的为准。
btn.addEventListener这个是通过注册一个监听元素click事件的执行函数，可以有多个。
总结：click本来就是每一个元素原生的一个属性，onclick是给这个click赋值执行函数。addEventListener是通过注册监听莫个事件而触发莫个函数，
例如我注册一个监听函数当元素被click则触发函数。
onclick 是DOM V1的版本提供的元素绑定事件的方法，它有一些缺陷（如一个元素不能绑定两个事件）。
所以在第二版的时候增加了 addEventListener 这个方法来解决之前版本的问题，
addEventListener 与onclick一样 也是一个方法，click 只是它接受的一种参数。
具体可以看下 相关文档。
原生js里面一般都是用onclick,如果是jquery,就用click
简单一点就是 addEventListener = on 都属于监听代理事件，包括你用bind 也可以