一、html事件处理程序 弊端：与标签耦合度太高，直接绑定在标签体上 <body> <button type="button" onclick="alert(
弊端：与标签耦合度太高，直接绑定在标签体上
<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>弊端：不能给同一个元素绑定同一个事件多次
<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>优点：解决了以上的两个弊端，可以绑定对个事件
<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>--结束END--
本文标题: JavaScript中的事件处理程序
本文链接: https://www.lsjlt.com/news/147466.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0