事件的基础概念

发生在 HTML 元素上的事情，用于实现js与html的交互，事件代表文档或浏览器窗口中具有某个特定意义的时刻，即用户或浏览器指向的某种动作

常用事件

事件	说明
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

绑定事件的方式

声明函数

说明

声明函数后，将函数赋值给对象的事件

语法


object.onclick = function() {
    
}

Eg


<body>
 <div id="banner" style="font-size: 20px;width:100px;height:100px">ok<div>
 <script>
  var a =document.getElementById("banner");
  a.onclick = function() {
      alert("test")
  }
 </script>
</body>

Document对象的addEventListener方法

说明

用于向文档添加事件句柄，此方法可以多次对同一元素绑定多个事件，按照绑定事件顺序执行

语法

绑定事件


元素对象.addEventListener("事件名",方法,是否在捕获阶段触发)
//即
object.addEventListener(event, function, useCapture)

参数
event: 描述事件名称的字符串，不要使用 "on" 前缀[Eg:使用"click"来取代"onclick"]

function: 事件触发后执行的函数

useCapture: 可选布尔值，指定事件是否在捕获或冒泡阶段执行

true - 事件句柄在捕获阶段执行
false-默认。事件句柄在冒泡阶段执行

返回值：无

移除事件


元素对象.removeEventListener("事件名",方法对象,是否在捕获阶段触发)

目录