DOM0 级事件
缺点：虽然实现了内容与行为相分离，但是元素仍然只能绑定一个监听函数
演示代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点啊" id="input">
<script>
var obj = document.getElementById('input');//id为input的标签
obj.onclick = function () {//将这个按钮绑定点击事件如果点击就执行以下内容
console.log('你好呀！我是DOM0级事件');//控制台弹出此文字
function fun() {//定义一个函数
console.clear();//清空控制台里面的内容
}
setTimeout(fun,1000);//1000毫秒也就是一秒之后清空控制台的内容
}
</script>
</body>
</html>
DOM2级事件
通过两个函数来给对象添加和删除处理程序，
分别是addEventListener()和removeEventListener();
它们都有三个参数：
- 要处理的事件名，
- 事件处理程序（函数名），
- 一个布尔值，true表示在捕获阶段触发，fasle表示在冒泡阶段触发。但为了兼容性没什么必要就选择冒泡阶段触发。
演示代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点啊" id="input">
<script>
var obj = document.getElementById('input');//id为input的标签
obj.funclick = function () {
console.log('你好呀！我是DOM2级事件');
};
obj.addEventListener('click',obj.funclick,false);//在冒泡阶段处理点击事件
obj.removeEventListener('click',obj.funclick,false);
</script>
</body>
</html>
注意：removeEventListener()的参数必须与addEventListener()一致，否则就会失败
所以处理程序不要使用无名函数
就像这样:obj.addEventListener('click',function(){},false);
添加后，虽然可以添加成功，但是却无法移除
事件对象
在触发DOM事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息，包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标事件对象中会包含鼠标位置信息，而键盘事件对象中，会包含按键信息等等。触发事件时，产生的事件对象会作为参数传给处理程序
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点啊" id="input">
<script>
var obj = document.getElementById('input');//id为input的标签
obj.onmouseover = function (e) {
console.log(e); //参数e是事件对象，包含了事件相关的各种信息
}
//如果要在一个元素对象上处理不同的事件就要用type来处理
obj.onclick = function (e) {
switch (e.type) {
case 'click':console.log('click');break;
case 'mouseover':console.log('mouseover');break;
}
}
</script>
</body>
</html>
还有一个十分重要的事件
//文档加载完毕事件（只响应一次）
window.onload = function(){
//文档加载完了之后在操作DOM，就会避免在DOM加载完之前就执行相关代码而失败的问题
}
鼠标、键盘事件
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red;
100px; height: 100px;
}
</style>
</head>
<body>
<div>我是div</div>
<input type="text" value="" id="input">
<script>
window.onload = function () {
var btn = document.getElementsByTagName('div')[0];
btn.onmouseover = function(e){
//鼠标在div区域内悬停事件
//事件对象e中保存了事件相关的信息
e.buttons; //区分按的是鼠标左键，还是右键等
console.log(e);
}
//键盘事件
var text = document.getElementsByTagName('input')[0];
text.onkeypress = function ( e ){
//按键（onkeypress不会响应ctrl，alt，shift，win等按键onkeydown可以响应）响应处理
e.key; //按键的字符
// e.keyCode; //按键的虚拟键码
console.log(e);//打印事件对象e中的内容
console.log("你按下的是键盘上的",e.key,"键");//打印用户按下了哪个键
}
}
</script>
</body>
</html>
