什么是js事件里的父级，能简单清晰的说明不？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了什么是js事件里的父级，能简单清晰的说明不？相关的知识，希望对你有一定的参考价值。
理解以下几点后就很清楚了：DOM是html 文档接口。
DOM将html文档的元素（即html标签）根据层级整理成树状模型。
而js操作html都是通过DOM来操作的。
一棵树，有干、有枝、有叶，叶的父级是枝，枝的父级是干。
如果你只是看文件的内容的话它是可以这样理解的：
中国 包含 云南，云南 包含 红河州， 红河州 包含 红河人hongheren.cn
红河州就是红河人 的父级，云南是红河州的父级，中国是云南的父级
例：<html><body><div></div></body></html>
body是div的父级，html是body的父级
其它一次类推。
以上是DOM父级的理解，有助于理解js事件的父级。
js事件的父级，说白了就是事件发生点的元素的对象的父级对象上的事件。
如下面的代码保存为html文件：
<html><body onclick="alert(\'body\')"><div onclick="alert(\'div\')"
style="width:600px;height:400px;background-color:F00;"> </div></body></html>
用浏览器开打后你会发现点击div是body的onclick事件也被触发了。
如上，应该能够理解了吧。 参考技术A 父级？？？呵呵，你问this的父级还是event？ this父级是当前操作对象的继承对象或者dom树中的上一级对象。event是Object.追问
function menubtnclick()
var leftarrow = document.getElementById("leftarrow");
var rightarrow = document.getElementById("rightarrow");
if(leftarrow)
leftarrow.onclick=function()
curmenuindex--;
if(curmenuindex<=1)
curmenuindex=1;
btnindexfunc();
else
if(curmenuindex ==2)
btngsjjfunc(); 解释下可以吗
就是这样啦：取得id为leftarrow和rightarrow,如果leftarrow取到了就绑定点击事件在它身上，执行curmenuindex--;如果值小于等于1就值为1，执行btnindexfunc函数，否则判断curmenuindex是否为2，是的话就执行btngsjjfunc函数。
怎么样？完整吧？懂了吗？不懂找我
JS中的事件委托详解（未完）
什么是JS事件委托呢？
首先，我们要明确什么是事件：所谓的事件就是像：onclick，onmouseover，onmouseover.......这些事件，那委托呢？就是指原来发生在这些事件上的元素，加到其它的元素身上来完成。
JS事件委托的原理：就是利用冒泡的原理，把事件加到父级或是父级的父级身上，来触发执行操作。
使用事件委托的优势：1）提高性能；
2）新添加的元素也会有之前加的事件；
下面我们用例子来说明一下：点击改变li的背景颜色
HTML部分：
1 <ul id="ul1"> 2 <li></li> 3 <li></li> 4 <li></li> 5 <li></li> 6 <li></li> 7 <li></li> 8 <li></li> 9 <li></li> 10 </ul>
style样式部分：
1 <style> 2 *{ margin:0; padding:0; list-style:none; } 3 ul{ overflow:hidden; } 4 li{ width:100px; height:100px; background:#ccc; float:left; margin:10px; } 5 </style>
<script>部分：
window.onload=function (){ var oUl=document.getElementById(‘ul1‘); var aLi=oUl.getElementsByTagName(‘li‘); for(var i=0; i<aLi.length; i++){ aLi[i].onclick=function (){ this.style.background=‘red‘; }; }; };
上面的例子就是我们常用的普通写法是如上这种写法，但是大家知道如果页面上有n多个li标签，就会循环无数多次，这样对性能的损耗是巨大的，所以这时候我们就可以考虑用事件委托来完成，把onclick事件加到li的父级上去。
事件委托的写法如下：
<script> window.onload=function (){ var oUl=document.getElementById(‘ul1‘); var aLi=oUl.getElementsByTagName(‘li‘); oUl.onclick=function(){ this.style.background=‘red‘; }; }; </script>
一步操作，省了循环，是不是一下子提高了性能呢？但有些同还可能会问，不对啊，里面的this指向的可是oUl这个元素，不再是指向了aLi[i]，是的，你的分析是对的，要想用事件委托做出来跟for循环中一样的效果，我们还必须知道event对象里有一个叫事件源的东西，那什么又是事件源呢？简单讲就是不管在哪个事件中，你操作的那个元素就是事件源，并用它也是有一定的兼容性问题存在的。
在IE，chrome中事件源的获取方法是srcElement 。在FF中事件源的获取方法是target，所以我们还要给它写一个兼容的写法，并且给事件源加样式，就完成了跟for循环一样的效果。
<script> window.onload=function (){ var oUl=document.getElementById(‘ul1‘); var aLi=oUl.getElementsByTagName(‘li‘); oUl.onclick=function(ev){ var oEvent=ev||event; var target=oEvent.srcElement||oEvent.target; target.style.background=‘red‘; }; }; </script>
不过这还不算完，为什么呢？因为有些同学在点页面的时候突然会点到ul的区域，会出现了整个Ul都变红色的情况，那我们肯定是不希望触发ul的这个事件呢，所以还需要进行有效的判断，在这里面我们判断的时候用到了tagName。
<script> window.onload=function (){ var oUl=document.getElementById(‘ul1‘); var aLi=oUl.getElementsByTagName(‘li‘); oUl.onclick=function(ev){ var oEvent=ev||event; //事件兼容写法。 var target=oEvent.srcElement||oEvent.target; //事件源兼容写法。 if(target.nodeName!=‘Li‘) return; //判断如果节点的名字不是LI就返回。 target.style.background=‘red‘; }; }; </script>
好，完美了！
以上是关于什么是js事件里的父级，能简单清晰的说明不？的主要内容，如果未能解决你的问题，请参考以下文章