javascript - 为什么表格里这样写的的事件委托没效果?
本文介绍了javascript - 为什么表格里这样写的的事件委托没效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
为什么表格里这样写的的事件委托没效果?
效果如下:
JS代码如下:
window.onload=function () {
var tab=document.getElementById('tab');
var oBnt=document.getElementById('btn');
var oUser=document.getElementById('user');
var oAge=document.getElementById('age');
var id=tab.tBodies[0].rows.length+1;
function mHover() {
for(var i=0;i<tab.tBodies[0].rows.length;i++){
tab.tBodies[0].rows[i].onmouseover=function () {
this.style.backgroundColor='red';
};
}
for(var i=0;i<tab.tBodies[0].rows.length;i++){
tab.tBodies[0].rows[i].onmouseout=function () {
this.style.backgroundColor='#fff';
};
}
};
mHover();
oBnt.onclick=function () {
var oTr=document.createElement('tr');
var oTd=document.createElement('td');
oTd.innerHTML=id++;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oUser.value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick=function () {
tab.tBodies[0].removeChild(this.parentNode.parentNode);
};
tab.tBodies[0].appendChild(oTr);
mHover();
};
};
*用上面的方法是可以实现效果的,但在优化性能上不可取,如果用下面的方法却实现不了效果,这是为什么?哪位大神可以帮帮小白我!谢谢(>.<*)
PS:我在这里参考事件委托的:http://www.cnblogs.com/liugan...**
window.onload=function () {
var tab=document.getElementById('tab');
var oBnt=document.getElementById('btn');
var oUser=document.getElementById('user');
var oAge=document.getElementById('age');
var id=tab.tBodies[0].rows.length+1;
tab.tBodies[0].onmouseover=function (ev) {
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='tr'){
target.style.backgroundColor='red';
}
};
tab.tBodies[0].onmouseout=function (ev) {
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=='tr'){
target.style.backgroundColor='#fff';
}
};
oBnt.onclick=function () {
var oTr=document.createElement('tr');
var oTd=document.createElement('td');
oTd.innerHTML=id++;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oUser.value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick=function () {
tab.tBodies[0].removeChild(this.parentNode.parentNode);
};
tab.tBodies[0].appendChild(oTr);
};
};
解决方案
function mHover(){
tab.tBodies[0].onmouseover=function (ev) {
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
var tr=target.parentNode.nodeName;
if(tr.toLowerCase()=='tr'){
target.parentNode.style.backgroundColor='red';
}
};
tab.tBodies[0].onmouseout=function (ev) {
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.parentNode.nodeName.toLowerCase()=='tr'){
target.parentNode.style.backgroundColor='#fff';
}
};
};
改成target.parentNode.nodeName 指向tr
这篇关于javascript - 为什么表格里这样写的的事件委托没效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文