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>
原文地址：https://www.cnblogs.com/chenyingying0/p/12274792.html
时间： 2024-11-25 04:21:17