DOM0 level events
Disadvantages: Although the content and behavior to achieve phase separation, but the elements are still only bind a listener function
Demo code is as follows:
<!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-level events
To add and remove the handler to the subject by two functions,
namely addEventListener () and the removeEventListener ();
which has three parameters:
- The name of the event to be processed,
- Event handler (function name),
- A Boolean value, true indicates that the trigger during the capture phase, fasle shows the trigger in the bubbling phase. But no need for compatibility on the choice of the bubbling stage trigger.
Demo code is as follows:
<!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);
添加后，虽然可以添加成功，但是却无法移除 
Event Object
In the DOM event trigger will generate an event object event, this object contains all the information related to the event, including the elements that caused the event, type of event, and other information related to a specific event. For example, a mouse event object contains the mouse location information, and the keyboard event object will contain key information and so on. When the trigger event objects that are generated will be passed as a parameter handler
code is as follows:
<!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>
There is also a very important event
//文档加载完毕事件（只响应一次）
window.onload = function(){
//文档加载完了之后在操作DOM，就会避免在DOM加载完之前就执行相关代码而失败的问题
}Mouse, keyboard events
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red;
width: 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>