JS 事件处理
DOM 0级处理：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="pid">hello</p>
<button id="btn1">butn</button>
<script>
var btn1=document.getElementById("btn1");
btn1.onclick=function(){alert("hello world");}//更改一个地方即可 有木有一点像“单例设计模式”~_~
btn1.onclick=null;//直接清空
</script>
</body>
</html>
但是 会覆盖：
var btn1=document.getElementById("btn1");
btn1.onclick=function(){alert("hello world");}
btn1.onclick=function(){alert("hello world2");}
Dom2级事件处理不会覆盖 需要这么写：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="pid">hello</p>
<button id="btn1">butn</button>
<script>
//下面只是拆开写了 var btn1=document.getElementById("btn1").addEventListener("click",demo);
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
function demo1()
{
alert("Dom1级事件处理程序");
}
function demo2()
{
alert("Dom2级事件处理程序");
}
</script>
</body>
</html>
移除：
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
function demo1()
{
alert("Dom1级事件处理程序");
}
function demo2()
{
alert("Dom2级事件处理程序");
}
btn1.removeEventListener("click",demo1);
IE：
var btn1=document.getElementById("btn1");
if(btn1.addEventListener)
{
btn1.addEventListener("click",demo);
}
else if(btn1.attachEvent)
{
btn1.attachEvent("onclick",demo)
}
else btn1.onclick=demo();
function demo()
{
alert("hello");
}
事件对象 1）type 获取事件类型
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="pid">hello</p>
<button id="btn1">butn</button>
<script>
document.getElementById("btn1").addEventListener("click",showType);
function showType(event)
{
alert(event.type);
}
</script>
</body>
</html>
2）target获取事件对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="pid">hello</p>
<button id="btn1">butn</button>
<script>
document.getElementById("btn1").addEventListener("click",showType);
// document.getElementById("btn1").
function showType(event)
{
alert(event.target);
}
</script>
</body>
</html>
事件冒泡的栗子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="pid">hello</p>
<div id="div">
<button id="btn1">butn</button>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
function showType(event)
{
alert(event.target);
}
function showDiv(event)
{
alert("div");
}
</script>
</body>
</html>
此时弹出两个对话框 因为div包含button
阻止：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="pid">hello</p>
<div id="div">
<button id="btn1">butn</button>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
function showType(event)
{
alert(event.target);
event.stopPropagation();//阻止事件冒泡
}
function showDiv(event)
{
alert("div");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="pid">hello</p>
<div id="div">
<button id="btn1">butn</button>
<a href="http://www.jikexueyuan.con" id="aid">极客学院</a>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showA()
{
event.stopPropagation();
event.preventDefault();//使得链接不能正常打开 即阻止事件默认行为
}
function showType(event)
{
alert(event.target);
event.stopPropagation();//阻止事件冒泡
}
function showDiv(event)
{
alert("div");
}
</script>
</body>
</html>