JavaScript中的事件处理程序
短信预约 -IT技能 免费直播动态提醒
一、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">
//获取元素
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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
