学科分类
目录
JavaScript网页编程

事件三要素

在学习事件时,我们需要对一些非常基本又相当重要的概念有一定的了解。事件由事件源、事件类型和事件处理程序这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,还有很多其他的类型,具体会在后面的章节进行详细讲解。

点击此处
隐藏目录