HTML Events VS. DOM Events

很长一段时间，在看别人的代码或者自己写代码的时候都会对一些事件的名称感到困惑，比如我们写一个button的敲击事件，如果直接在html文件里，我们可以在button元素里添加这样的代码 onclick = "javascript code...."; 但是我们又常常看到angular里面的事件绑定的时候，我们常常看到（click） = “methods”；这样的形式，所以就容易困惑，到底什么时候写onclick，什么时候写click；

其实这是一个html javascript events和dom events的不同写法，html里面每个元素，比如buttom有很多属性，onclick代表单击这个属性，而每个属性是可以用JavaScript赋予一些操作的，这在html里就是对所有的属性赋予JavaScript用 html的属性名=JavaScriptcode 的形式来表示；

所有的html属性可以在这里查看，你会发现哦原来这些都是html的属性，以前都不知道是啥：

https://www.w3schools.com/tags/ref_attributes.asp

而当我们需要用JavaScript直接对dom元素添加一些操作的时候，我们就可以用到定义好的event接口下的一些具体的事件：

https://developer.mozilla.org/en-US/docs/Web/Events

总结就是，JavaScript 的event有好几种表示方法：

第一可以直接在html元素里使用 属性比如 onclick = “code/function（）”这样的方式来定义一个JavaScriptevent，

但是也可以直接在JavaScript代码里，通过selector来选定一个元素，并对这个元素添加event listener的方式来做到一样的效果：

比如下面的代码就是选定来id是button的那个元素，对其添加来一个click事件的listener，并且对click事件触发时发生的功能做了定义，就是后面的function；

var button = document

  .getElementById("button")

  .addEventListener("click", function () {

    console.log("123");

  });

//或者一般是在JavaScript里面写好几个函数，添加eventlistener的时候直接调用他们，调用的时候，eventlistener里面的函数名称直接写函数名不用加小括号：

var button = document

  .getElementById("button")

  .addEventListener("click", function1);

function function1(){

console.log(123);

}

这样的写法和

click here效果一样，只是要注意，我们在纯JavaScript代码里面添加listener的方式写事件的时候，事件的名称是我们的dom事件名称，（https://developer.mozilla.org/en-US/docs/Web/Events），而我们直接写在html元素里面的JavaScript events前面的那部分是html的属性名称（https://www.w3schools.com/tags/ref_attributes.asp）

千万不要记混了，也不要搞错了。