JavaScript 事件用法知多少，告诉你三种实用的添加事件方法

什么是事件？

事件就是在某一时刻发生的一些事情。

事件并不陌生，生活中的事件随处可见。穿衣吃饭、上班下班等等都算是事件。

JavaScript中的事件一般发生在人机交互上。比如，点击一个按钮、滚动一下鼠标等等，都属于事件。

事件通常发生在两个东西上。

一个是浏览器，一个是HTML页面中的元素。

当发生事件的时候，我们通常希望能够做一些事情，这些事情就是由JS来完成的。完成的方式通常有两种。

一种是直接写JS代码，一种是调用函数。

发生在浏览器上的事件，一般也可以叫浏览器的方法，浏览器可以看成是一个对象，它在JS里的对象名叫window，所有发生在浏览器上的事件，都是以window的方法来调用的。这个我们在后面讲window对象的时候，再来详细讲解。

今天重点讲发生在HTML页面元素中的事件的添加方式。

在HTML中的事件，通常有三种方式添加事件。

第一种：把事件作为标签的一个属性来设置。

它的写法如下：

<element event = 'JavaScript代码'>

包围JavaScript代码的可以是单引号，也可以是双引号。

写个小例子：

<p id="demo"></p>
<button onclick='document.getElementById("demo").innerHTML="刘小妞"'>
我叫什么？
</button>

上面的onclick是事件名，后面是执行的JS代码。

一般事件名的前缀是“on”。

onclick是点击事件，非常常用。上面的例子，点一下按钮，p标签里就显示刘小妞三个字。

我们也可以修改按钮自身的内容，比如下面这个例子：

<button οnclick='this.innerHTML="刘小妞"'>我叫什么？</button>

还记得this关键词吗？

这里的this指代的是button按钮。

通常我们的JS代码会有很多，把代码全部写在标签上，就显得太混乱了，所以，我们比较常用的是调用函数。把要执行的JS代码写成一个函数来调用。比如，第一个例子可以改成下面这样：

<p id="demo"></p>
<button οnclick='setName()'>
我叫什么？
</button>

<script>
function setName(){
    document.getElementById("demo").innerHTML = "刘小妞";
}
</script>

这样写，即使JS代码再多，HTML里也不受影响。现在前端比较讲究代码分离，HTML、CSS、JS这三部分，最好自己写自己的，写好了，相应的地方关联一下就可以了。这样写的好处是，代码比较清晰，维护起来也比较方便。

第二种：使用JS代码向HTML元素分配事件。

这种方法比第一种方法，对于代码的分离，算是优化了。

像上面的例子，我们用第二种方法写，就是下面这样：

<p id="demo"></p>
<button id="mybtn">
我叫什么？
</button>

<script>
function setName(){
    document.getElementById("demo").innerHTML="刘小妞";
}

document.getElementById("mybtn").onclick = setName;
</script>

这样写，HTML里没有JS代码。算是分离的比较彻底。

第三种：利用事件监听器添加事件。

这种方法和第二种类似，但是，比第二种强大一点。

上面的例子，用事件监听器来写，是这样的：

<p id="demo"></p>
<button id="mybtn">
我叫什么？
</button>

<script>
function setName(){
    document.getElementById("demo").innerHTML="刘小妞";
}

document.getElementById("mybtn").addEventListener("click",setName);
</script>

addEventListener()方法是事件监听器，它的第一个参数是事件类型，第二个参数是调用的函数名。

大家注意一点，用事件监听器添加事件，事件名没有前缀“on”。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
它能够向一个元素添加多个事件处理程序。
它能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。

前面两种，如果是相同的事件，会被覆盖。

addEventListener()总共有三个参数，上面介绍了两个，第三个参数是可选的，它是一个布尔值，默认是false。

我们来介绍一个知识点：在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

HTML DOM可以简单理解成HTML元素，这个以后会详细讲。

事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个<p>，然后用户点击了这个<p>元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理<p> 元素的点击事件，然后是<div> 元素的点击事件。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理<div> 元素的点击事件，然后是<p>元素的点击事件。

addEventListener()的第三个参数就是来设置传播类型的，它的形参名是useCapture，默认是false，就是冒泡模式，如果设置成true，就是捕获模式。

如果我们通过addEventListener()添加的事件，可以通过
removeEventListener()方法清除，比如，清除上面的click，写法如下：

document.getElementById("mybtn").
removeEventListener("click",setName);

两个参数，第一个事件类型，第二个函数名。

注意，removeEventListener()方法只能删除通过addEventListener()方法添加的事件，上面两种方法添加的事件，它删除不了。

细心的同学可能会问，用addEventListener()方法添加事件，如果调用的函数有参数怎样传呢？上面的写法都是直接写函数名，没带参数。

如果带参数，我们需要把调用的函数放到一个匿名函数里。写法如下：

document.getElementById("mybtn").addEventListener("click",function(){
setName(x,y);
});

x,y是实参。

说一下addEventListener()的兼容性。并不是所有的浏览器都兼容addEventListener()。当出现不兼容addEventListener()方法的浏览器时，我们可以用attachEvent()代替。它和addEventListener()，只是换了一个名字。对应的删除事件方法是detachEvent()。

兼容的写法如下：

var x = document.getElementById("mybtn");

//针对支持addEventListener的浏览器
if (x.addEventListener) {
    x.addEventListener("click", myFunction);
}

//针对不兼容addEventListener
else if (x.attachEvent) {
    x.attachEvent("onclick", myFunction);
}

注意一下attachEvent里的事件名加了前缀“on”。

事件我们就讲完了，知道事件怎么用了，那常用的事件都有哪些呢？不用着急，我们会单独写一篇常用的事件。如果想看更多关于前端知识的文章，可以微信搜索公众号：“刘小妞的栖息地”或者识别下面的二维码阅读查看，感谢大家的支持。