JS事件绑定的三种方式比较
2024-09-06 19:33:12
js事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
input{
display: block;
margin-bottom:10px;
}
.active{
color:orange;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ var btn = document.querySelector("#btn");
//时间句柄
var clickme = function(){
alert("hello~");
}
btn.addEventListener("click", clickme);
}); </script>
</head>
<body> <button id="btn">点击我</button>
</body>
</html>
事件监听的三种方法:
1、直接在html上添加事件(不建议)
强耦合,不利用代码复用
2、DOM 0级
一个元素只能绑定一个事件的限制
如果绑定了多个事件,后面的会覆盖掉前面的
2、DOM 2级
一个事件可以绑定多个监听函数
还可以定义事件捕获和事件冒泡
btn.addEventListener("click", fn, false); 第三个参数默认是false
btn.attachEvent("onclick", fn); IE的事件监听函数attachEvent
document.body.addEventListener("load", init);
document.body.attachEvent("onload", init);
function init(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width:100%;
height:100%;
}
input{
display: block;
margin-bottom:10px;
}
.active{
color:orange;
}
</style>
<script src="DomReady.js"></script>
<script>
myReady(function(){ // DOM 0级
var btn3 = document.querySelector("#btn3");
btn3.onclick=function(){
alert("hello3~");
} var btn4 = document.querySelector("#btn4");
function click4(){
alert("hello4~");
}
btn4.onclick=click4; // DOM 2级
var btn5 = document.querySelector("#btn5");
//事件句柄
var click5 = function(){
alert("hello5~");
}
//这里的clickme不需要加括号
btn5.addEventListener("click", click5); });
</script>
</head>
<body>
<!-- 直接加在HTML上的两种方式 -->
<button id="btn1" onclick="alert('hello1~')">按钮1</button>
<!-- 这里的click1()需要加括号 -->
<button id="btn2" onclick="click2()">按钮2</button><br> <!-- DOM 0级 -->
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button><br> <!-- DOM 2级 -->
<button id="btn5">按钮5</button> <script>
// 突然发现这个函数只能在btn的后面,而不能在前面
// 即使用了domReady也不行哎
function click2(){
alert("hello2~");
}
</script>
</body>
</html>
最新文章
- 学习和研究下unity3d的四元数 Quaternion
- 【Django】Django 定时任务实现(django-crontab+command)
- Using Recursive Common table expressions to represent Tree structures
- IE兼容forEach/map/every/some/indexOf/filter
- 修改 dispatchTouchEvent方法 来处理事件冲突
- 【T-SQL系列】新的排序函数
- jQuery右键菜单ContextMenu使用笔记
- 关于java调用linux shell 的问题
- win32窗口机制之CreateWindow
- [Redux] Introduction
- 设计模式(十五):Iterator迭代器模式 -- 行为型模式
- cocos2dx 碰撞检测
- 学习爬虫的day03 (通过代理去爬去数据)
- 项目实战12.2—企业级监控工具应用实战-zabbix操作进阶
- LIRe 源代码分析 6:检索(ImageSearcher)[以颜色布局为例]
- C++切割文件
- haproxy-1.7.7 基于域名的调度配置
- iOS Healthkit 使用探索分析 &#127771;
- Linux Shell基础 read命令
- OSI七层与TCP/IP五层网络架构