1.行内绑定
<style>
div {
width: 400px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div onclick="cli1()"></div>
</body>
</html>
<script>
// 绑定事件1
function cli1(){
alert('标签内部绑定事件1');
}
</script>
2.通过元素绑定事件
<style>
div {
width: 400px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div onclick="cli1()"></div>
</body>
<script>
//绑定事件2 元素.on事件名= function name(params参数){}
var div_ = document.getElementsByTagName('div')[0];
div_.onclick = function(){
alert('通过元素绑定事件 绑定事件2')
}
</script>
3.通过事件监听绑定事件
<style>
div {
width: 400px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div onclick="cli1()"></div>
</body>
<script>
var div_ = document.getElementsByTagName('div')[0];
div_.addEventListener('click', function () {
alert('通过事件监听绑定事件');
})
</script>
4.删除事件监听
/*
给dom元素删除事件监听
el_obj.removerEventListener(1,2);
1: 要删除的事件名
2:相关的事件处理函数(注意:该函数需要时一个外部处理函数)
*/
btn_2.removeEventListener('click', fn);