JavaScript中的事件处理程序
更新时间：2022年04月27日 08:35:46 作者：農碼一生
这篇文章介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
用jscript实现获取登录时间的脚本2008-05-05
本文主要介绍了javaScript嗅探执行神器-sniffer.js的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了javscript 数组扁平化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了JS与SQL方式随机生成高强度密码,结合实例形式分析了javascript方式与SQL方式生成高强度密码的相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了node.js使用nodemailer发送邮件的方法,例子中使用的是QQ邮箱,你也可以修改成其它的邮箱如163、gmail等,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了JS如何遍历带有子集的数组集合(嵌套数组)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要给大家分享了十八个杀手级JavaScript单行代码,这些单行代码可以帮助你提高工作效率并可以帮助调试代码,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
在平时工作开发中，大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码，很多情况下都是以他人成果为基础的，或者新增修改需求，自己写的代码也会被其他开发人员调用，所以写好一份高质量可维护的代码就显得十分重要。2021-05-05
这篇文章主要介绍了使用80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了javascript弹出窗口实现代码，非常人性化的设计，点击页面可以弹出窗口，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论