JS的事件处理程序
2022/1/25 17:34:16
本文主要是介绍JS的事件处理程序,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、Html事件处理程序
弊端:与标签耦合度太高,直接绑定在标签体上
<body> <button type="button" onclick="alert('消息框');" onm ouseout="console.log('控制台')">Html事件处理程序</button> <button type="button" onclick="fun1();" onm ouseout="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>
这篇关于JS的事件处理程序的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist