事件委托:
一个事件本来是加到某些元素身上来完成一些事情,但是这些元素却委托其他元素来替它完成;
比如 ul下有4个li元素,现在要给这些li添加鼠标移入移出事件完成 “改变背景”
<body>
<ul id="ulList">
<li>点我</li>
<li>点我</li>
<li>点我</li>
<li>点我</li>
</ul>
</body>
常规一般我们会这样写:得到ul然后循环为每个li添加点击事件
<script>
window.onload = function () {
var oUl = document.getElementById('ulList');
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onmousemove = function(){
this.style.background="red";
}
aLi[i].onmouseout = function(){
this.style.background="";
}
}
}
</script>
但是此时li委托ul帮他完成这些事情,该怎么写那??
window.onload = function () {
var oUl = document.getElementById('ulList');
var aLi = oUl.getElementsByTagName('li');
oUl.onmousemove = function (ev) {
var e = ev || window.event; // 获取事件对象
var target = e.srcElement || e.target; // 获取事件源
arget.style.background = "red";
}
oUl.onmouseout = function (ev) {
var e = ev || window.event;
var target = e.srcElement || e.target;
target.style.background = "";
}
}
这里简单说下什么是:“事件对象”和“事件源”
事件对象指:事件发生时,记录一些相关信息的对象;事件对象只有在事件发生时才会产生;
比如上面onmousemove 事件发生时,就产生了事件对象,我们用变量var e来接受了这个事件对象;
事件源指 :当前发生事件的那个元素就是事件源
比如ul发生onmousemove 事件,那么当前事件源就是ul,如果是li发生onmousemove 事件,事件源就是li;
上面的代码就因为“事件源”的不同存在一个问题:不光是鼠标移到li上背景变色,移到ul上也会变色
上图为鼠标移到li上的效果
这个是鼠标移到ul上的效果,那么如果防止鼠标移到ul上也触发事件那??就需要对事件源做一下判断,当事件源是li的时候才让她改变背景颜色,那么怎么判断当前事件源是ul还是li,可以通过nodeName或者tagName来判断
if(target.nodeName == 'LI'){
target.style.background = "red";
}
其中target.nodeName == 'LI' 也可以写成target.tagName == 'LI' ,但需要注意不管哪种LI都必须大写,或者通过toLowerCase()来转换成小写也可以:target.tagName.toLowerCase() == 'li' ;这样就只有鼠标移入li上才会改变背景颜色;
修改后完整js代码如下:
window.onload = function () {
var oUl = document.getElementById('ulList');
var aLi = oUl.getElementsByTagName('li');
oUl.onmousemove = function (ev) {
var e = ev || window.event;
var target = e.srcElement || e.target;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "red";
}
}
oUl.onmouseout = function (ev) {
var e = ev || window.event;
var target = e.srcElement || e.target;
if(target.tagName.toLowerCase() == 'li')
target.style.background = "";
}
}
事件委托的好处:
1. 提高性能,如果用传统的for循环写的话,如果有100个li就需要循环为这100个li添加事件,而用事件委托明显性能就提高了
2. 新增元素自动拥有之前的事件. 这句话什么意思那??
看下面的例子:
<ul id="ulList">
<li>点我</li>
<li>点我</li>
<li>点我</li>
<li>点我</li>
</ul>
<input id="inputBtn" type="button" value="Click">
在ul下新增一个button按钮,当点击按钮的时候就创建一个li元素;假如用之前for循环的为li添加事件的方式,当我们点击button按钮新创建的li元素是不具有onmousemove和onmouseout事件的,新创建li元素之后,还需要单独在添加事件才可以;
window.onload = function () {
var oUl = document.getElementById('ulList');
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('inputBtn');
for(var i=0;i<aLi.length;i++){
aLi[i].onmousemove = function(){
this.style.background="red";
}
aLi[i].onmouseout = function(){
this.style.background="";
}
}
oBtn.onclick = function () {
var oLi = document.createElement('li');
oLi.innerHTML = "HELLO";
oUl.appendChild(oLi);
}
}
如下图所示,当鼠标移到新增的li元素上,背景是不变化的;
如果通过“事件委托的”方式,新增加的li元素也会自动拥有事件
window.onload = function () {
var oUl = document.getElementById('ulList');
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('inputBtn');
oUl.onmousemove = function (ev) {
var e = ev || window.event;
var target = e.srcElement || e.target;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "red";
}
}
oUl.onmouseout = function (ev) {
var e = ev || window.event;
var target = e.srcElement || e.target;
if(target.tagName.toLowerCase() == 'li')
target.style.background = "";
}
oBtn.onclick = function () {
var oLi = document.createElement('li');
oLi.innerHTML = "HELLO";
oUl.appendChild(oLi);
}
}
如下图所示: