事件三要素 - 前端学习教程_ 前端_前端开发

在学习事件时，我们需要对一些非常基本又相当重要的概念有一定的了解。事件由事件源、事件类型和事件处理程序这3部分组成，又称为事件三要素，具体解释如下。

事件源：触发事件的元素。
事件类型：如 click 单击事件。
事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数。

以上三要素可以简单理解为“谁触发了事件”“触发了什么事件”“触发事件以后要做什么”。

在开发中，为了让元素在触发事件时执行特定的代码，需要为元素注册事件，绑定事件处理函数，具体步骤是，首先要获取元素，其次注册事件，最后编写事件处理代码。

下面我们通过一个简单的案例演示事件的使用——为按钮绑定单击事件，具体代码如下。

 1  <body>

 2   <button id="btn">单击</button>

 3   <script>

 4    var btn = document.getElementById('btn'); // 第1步：获取事件源

 5    // 第2步：注册事件btn.onclick

 6    btn.onclick = function () { // 第3步：添加事件处理程序（采取函数赋值形式）

 7      alert('弹出');

 8    };

 9   </script>

 10 </body>

上述代码中，第2行定义了一个id为btn的<button>标签。第4行代码通过getElementById()的方式获取事件源btn。第6行给事件源btn注册事件，语法为“btn.on事件类型”，事件类型click表示单击事件，这步操作实际上是为btn的onclick属性赋值一个函数，这个函数就是事件处理程序。

通过浏览器打开上述案例代码，使用鼠标单击页面中的按钮，就会弹出一个警告框，说明页面中的按钮已经绑定了单击事件。在事件处理函数中，我们可以编写其他想要在事件触发时执行的代码。另外，事件类型除了click，还有很多其他的类型，具体会在后面的章节进行详细讲解。