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レベルのイベント
追加して2つの関数によって被験体にハンドラを削除するには
、すなわちのaddEventListener（）とにremoveEventListener（）;
3つのパラメータを有しています。
- 処理されるイベントの名前、
- イベントハンドラ（関数名）、
- 真のブール値は、キャプチャ段階、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イベントトリガのイベント・オブジェクト・イベントが生成され、このオブジェクトは、イベントを引き起こした要素、イベントの種類、および特定のイベントに関連する他の情報を含むイベントに関連するすべての情報を含みます。例えば、マウスイベントオブジェクトは、マウスの位置情報が含まれており、キーボードイベントオブジェクトは、ように、鍵情報とを含むことになります。生成されたトリガイベントオブジェクトは、パラメータハンドラとして渡されます場合は
、コードは次のとおりです。
<!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;
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>