JavaScript中的事件处理程序
时间：2022-07-07 09:50:26|栏目：JavaScript代码|点击： 次
一、Html事件处理程序
弊端：与标签耦合度太高，直接绑定在标签体上
<body>
<button type="button" onclick="alert('消息框');" onmouseout="console.log('控制台')">Html事件处理程序</button>
<button type="button" onclick="fun1();" onmouseout="console.log('控制台')">Html事件处理程序</button>
<script type="text/javascript">
//Html事件处理程序
function fun1(){
alert("消息框");
}
//加载事件 load 当页面中元素和引入的资源加载完毕之后执行里面的代码
window.onload = function(){
//。。。。。。。
}
</script>
</body>
二 、DOM 0级事件处理程序
弊端：不能给同一个元素绑定同一个事件多次
<body>
<button type="button" id="but1">DOM0级事件处理程序</button>
<script type="text/javascript">
/* DOM0级事件处理程序 */
//获取元素
var but1 = document.getElementById("but1");
// 2.给元素绑定事件
but1.onclick = function(){
console.log('DOM0级事件处理程序1');
}
//添加的第二的Click事件起作用，第一个被覆盖
but1.onclick = function(){
console.log('DOM0级事件处理程序2');
}
</script>
</body>
三、DOM2级事件处理程序
优点：解决了以上的两个弊端，可以绑定对个事件
<body>
<button type="button" id="but2">DOM2级事件处理程序</button>
<button type="button" id="but3">删除DOM2级事件处理程序</button>
<script type="text/javascript">
//DOM2级事件处理程序
//获取元素
var but2 = document.getElementById("but2");
var but3 = document.getElementById("but3");
but2.addEventListener("click",function(){
console.log("DOM2级事件处理程序1");
});
but2.addEventListener("click",function(){
console.log("DOM2级事件处理程序2");
});
function fun3(){
console.log("有方法名的处理程序");
}
but2.addEventListener('mouseover',fun3);
//移除but2的某个事件
but3.addEventListener("click",function(){
but2.removeEventListener('mouseover',fun3);
});
</script>
</body>
