DOM基础教程之事件类型

下面是关于“DOM基础教程之事件类型”的完整攻略：

1. 什么是事件？

事件是指用户在与页面进行交互时所发生的情况，如鼠标点击、键盘敲击、表单提交等。开发者可以通过JavaScript代码来响应这些事件，从而实现与用户进行有效的交互。

2. 事件类型

DOM中常见的事件类型有：

• 鼠标事件：onclick, ondblclick, onmousedown, onmouseup, onmousemove, onmouseover, onmouseout
• 键盘事件：onkeydown, onkeyup, onkeypress
• 表单事件：onsubmit, onreset, onfocus, onblur, onchange
• 页面/文档事件：onload, onunload, onresize, onscroll
• 其他事件：oncontextmenu, onselect, ondrag, ondrop

3. 事件处理程序

事件处理程序是一个函数，负责响应特定的事件。常见的定义方式有两种：

• HTML事件处理程序：通过在HTML标签上直接定义，如<div onclick="alert('点击了div元素')">点击我</div>；
• DOM0级事件处理程序：通过JavaScript代码来实现，如给一个button按钮添加点击事件：document.getElementById("button1").onclick = function(){alert('点击了按钮')};

4. 事件对象

事件对象是一个包含有关事件的详细信息的对象。事件对象只有在事件发生时才能访问到。例如，在处理moueseover事件时，可以使用事件对象来确定光标指向哪个对象。

5. 阻止默认事件

浏览器在一些事件上会有一些默认的行为，如点击链接会跳转页面，通过阻止默认事件可以在不影响原有功能的前提下，增强用户操作体验。

阻止默认事件有两种方式：

• 使用event对象的preventDefault()方法：event.preventDefault();
• 在HTML中使用return false：<a href="http://www.example.com" onclick="event.preventDefault();">不跳转链接</a>

示例1

下面是一个例子，当点击按钮时，输出当前的时间：

HTML代码：

<button id="btn">点我看时间</button>

JavaScript代码：

document.getElementById('btn').onclick = function(event){
  var now = new Date();
  alert('当前时间是：' + now.toString());
}

示例2

下面是一个例子，当鼠标移动在div元素上时，改变元素的背景颜色：

HTML代码：

<div id="div1" style="width:100px;height:100px;background-color:red;"></div>

JavaScript代码：

document.getElementById('div1').onmouseover = function(event){
  event.target.style.backgroundColor = 'green';
}

document.getElementById('div1').onmouseout = function(event){
  event.target.style.backgroundColor = 'red';
}

以上是关于“DOM基础教程之事件类型”的攻略，希望对你有所帮助。