事件委托 在大盒子上绑定事件 但是触发的是子节点
<body>
<div class="box">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
</div>
</body>
<script>
var oBox =document.getElementsByClassName("box")[0];
oBox.onclick = function (e) {
console.log(e);
}
</script>
点击li 打印信息中 target保存了触发事件的节点 最底下的元素 li 外边距属于父级 内边距padding属于元素自己
<script>
var oBox =document.getElementsByClassName("box")[0];
oBox.onclick = function (e) {
console.log(this);
console.log(e.target);
}
</script>
分别打印
;li
<li>
<span>列表1</span>
</li>
当点击是li 时 e.target返回的是span 找最后一个
var oBox =document.getElementsByClassName("box")[0];
oBox.onclick = function (e) {
e.target.className="on";
}
点击谁就会添加类名
判断点击的是不是li标签
var oBox =document.getElementsByClassName("box")[0];
oBox.onclick = function (e) {
if (e.target.nodeName=="LI"){
e.target.className="on";
} else{
console.log("不是li标签");
}
}
ie没有target属性 有e.srcElement
oBox.onclick = function(e) {
e = e || window.event;
//不存在就证明是ie
if(e.target === undefined){
e.target = e.srcElement;
}
}
可以在e.target上再次添加事件
oBox.onclick = function (e) {
if (e.target.nodeName=="LI"){
e.target.onclick =function () {
console.log("hello");//需要点击两次才打印
}
} else{
console.log("不是li标签");
}
}
每次点击最终结果只有一个添加类名
var oBox =document.getElementsByClassName("box")[0];
var index=null;
oBox.onclick = function (e) {
e=e||window.event;
if (e.target===undefined){
e.target=e.srcElement;
}
if (e.target.nodeName === "LI"){
if (index !=null){
index.className="";
}
}
e.target.className ="on";
index=e.target;
}