您的位置：首页 > Web前端 > JavaScript

JS 事件处理

2015-10-27 18:58 489 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航