事件委托：
概念：把本该属于子元素的事件绑定在父元素（父级元素）上，即把子元素的事件委托给父元素，这就是事件委托。
事件委托的原理：
利用冒泡的思路（当子元素的某种类型的事件被触发时，父（级）元素同类型的事件也会被触发，），同时结合event对象的target属性，能够找到真正的事件源（子元素）。
事件委托的优点：
1)、对于未来会添加进来的元素也会有对应事件触发。
2)、不用绑定很多事件，即不用给每个子元素都绑定事件。只需要绑定在父级元素即可。节约了内存。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言功能</title>
</head>
<body>
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
</ul>
<input id="btn01" type="button" value="添加li" />
</body>
</html>
<script type="text/javascript" src="js/eventTools.js"></script>
<script type="text/javascript">
//事件委托：
//概念：把本该属于子元素的事件绑定在父元素（父级元素）上，即把子元素的事件委托给父元素，这就是事件委托
//事件委托的原理：利用冒泡的思路（当子元素的某种类型的事件被触发时，父（级）元素同类型的事件也会被触发，），
// 同时结合event对象的target属性，能够找到真正的事件源（子元素）。
//事件委托的优点：
//1)、对于未来会添加进来的元素也会有对应事件触发。
//2)、不用绑定很多事件，即不用给每个子元素都绑定事件。只需要绑定在父级元素即可。节约了内存。
window.onload = function(){
/*
var lis = $("li");
//给每个li增加onclick事件
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
alert(this.innerHTML);
}
}
*/
//利用事件冒泡，把每个li的onclick事件冒泡到它的父元素ul上
$("ul")[0].onclick = function(event){
var evt = event || window.event;
if(evt.target.tagName.toLowerCase()=="li"){
alert(evt.target.innerHTML);
}
}
var i=4;
$("#btn01").onclick = function(){
var liDom = document.createElement("li");
liDom.innerHTML ="第"+(++i)+"行";
$("ul")[0].appendChild(liDom);
}
}
//封装一个获取页面元素的函数
//参数：字符串
//返回值：
// 如果字符串的第一个字符是#，那么就把参数当作id使用，即使用getElementById获取一个元素
// 如果字符串的第一个字符是.，那么就把参数当作class使用，即使用getElementsByClassName获取若干个元素
// 如果字符串的第一个字符既不是#，也不是. ，那么就把参数当作标签名使用，即使用getElementsByTagName获取若干个元素
function $(str){
if(str.charAt(0)=="#"){
return document.getElementById(str.substring(1));
}else if(str.charAt(0)=="."){
return document.getElementsByClassName(str.substring(1));
}else{
return document.getElementsByTagName(str);
}
}
</script>
4726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
