事件委托
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id = "div1">
<a href = "http..." id = "link1">某连接</a>
<a href = "http..." id = "link2">某连接</a>
<a href = "http..." id = "link3">某连接</a>
<a href = "http..." id = "link4">某连接</a>
<p id = "p1">激活</p>
<p id = "p2">取消</p>
</div>
<div id = "div2">
<p id = "p3">取消</p>
<p id = "p4">取消</p>
</div>
<script type="text/javascript">
//基本事件绑定
// var bth = document.getElementById('btn1')
// bth.addEventListener('click', function (event) {
// console.log('clicked')
// })
//事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
//封装绑定函数
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', function(e) {
e.preventDefault() //阻止默认行为
alert('clicked')
})
//冒泡事件
var p1 = document.getElementById('p1')
bindEvent(p1, 'click', function(e) {
e.stopPropagation()
alert('激活')
})
var body = document.body
bindEvent(body, 'click', function(e) {
alert('取消')
})
//事件代理
</script>
</body>
</html>
事件代理实例，选项卡
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
</style>
</head>
<body>
<ul id= "mylist">
<li id="list1">1</li>
<li id="list2">2</li>
<li id="list3">3</li>
<li id="list4">4</li>
<li id="list5">5</li>
</ul>
</body>
</html>
<script type="text/javascript">
var list = document.getElementById('mylist');
var listchild= document.getElementsByTagName('li');
for(var i=0; i<listchild.length; i++) {
listchild[i].addEventListener('click', function() {
this.style.background = 'red';
})
}
</script>
绑定不同事件
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
</style>
</head>
<body>
<ul id= "mylist">
<li id="list1">1</li>
<li id="list2">2</li>
<li id="list3">3</li>
<li id="list4">4</li>
<li id="list5">5</li>
</ul>
</body>
</html>
<script type="text/javascript">
var list = document.getElementById('mylist');
list.addEventListener('click', function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
switch(target.id) {
case "list1" : alert('list1');
break;
case "list2" : alert('list2');
break;
case "list3" : alert('list3');
break;
case "list4" : alert('list4');
break;
case "list5" : alert('list5');
break;
}
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
</head>
<body>
<table id="table1">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
</body>
</html>
<script type="text/javascript">
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
var table1 = document.getElementById("table1")
bindEvent(table1,'click',function(e){
alert(e.target.innerText);
})
</script>
浙公网安备 33010602011771号