js 事件代理问题？怎样将事件代理写到某一列td上
用事件代理给每个删除键绑定事件，应该如何绑定？
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<div>
<label>城市名称：<input id="aqi-city-input" type="text"></label><br>
<label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">确认添加</button>
</div>
<table id="aqi-table">
</table>
</body>
<script type="text/javascript">
var aqiData = {};
function addAqiData() {
var aqiCity=trimStr(document.getElementById("aqi-city-input").value),
aqiValue=trimStr(document.getElementById("aqi-value-input").value);
if(isCorrect(aqiCity)){
alert("Correct输入");
if(isInt(aqiValue)) {
aqiData[aqiCity] = aqiValue;
console.log(aqiData);
}
else{
alert("value 输入错误");
}
}
else{
alert("非法输入");
}
}
function trimStr(str){
return str.replace(/(^\s*)|(\s*$)/g,"");
}
function isInt(temp){
var re=/^[0-9]*[1-9][0-9]*$/;
if(re.test(temp))
return true;
return false;
}
function isCorrect(temp)
{
var re = /[^\u4e00-\u9fa5]/,
re2=/^[A-Za-z]+$/;
if(!re.test(temp)||re2.test(temp))
return true;
return false;
/*if(re2.test(temp))
return true;
return false;*/
}
function renderAqiList() {
var data = "";
data += " <table id='mytable'>";
data += " <tr>" +
"<td >城市</td>" +
"<td >空气质量</td>" +
"<td >操作</td>" +
"</tr>" ;
for (var i in aqiData ) {
data += "<tr >";
data += "<td>" + i + "</td>";
data += "<td>"+aqiData[i]+"</td>";
data += "<td>"+"<button class='delete'>"+"删除"+"</button>"+"</td>";
data += "</tr>";
}
data += "</table>";
document.getElementById("aqi-table").innerHTML = data;
}
function addBtnHandle() {
addAqiData();
renderAqiList();
}
function delBtnHandle(event) {
console.log(event.target);
// do sth.
/* var tbList=document.getElementsByTagName("table")[0];
tbList.addEventListener("click",function(event){*/
if(event.target){
var tdParent= event.target.parentNode.parentNode;
console.log( tdParent);
//console.log(tdParent);
var aqiCity=tdParent.cells[0].innerHTML;
var aqiValue=tdParent.cells[1].innerHTML;
// console.log( aqiCity);
delete aqiData.aqiCity;
}
/* });*/
renderAqiList();
}
function init() {
// 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
var btn=document.getElementById('add-btn');
btn.addEventListener("click",function(){
addAqiData();
renderAqiList();
});
// 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
var tbList=document.querySelectorAll("delete");
tbList.addEventListener("click",function(event){
if(event.target){
var tdParent= event.target.parentNode.parentNode;
console.log( tdParent);
//console.log(tdParent);
var aqiCity=tdParent.cells[0].innerHTML;
var aqiValue=tdParent.cells[1].innerHTML;
// console.log( aqiCity);
delete aqiData.aqiCity;
}
})
}
init();
</script>
</html>
展开
收起
1
条回答
写回答
写回答
-
function delBtnHandle() { var tbList=document.getElementsByTagName("table")[0]; tbList.addEventListener("click",function(event){ if(event.target){ var tdParent= event.target.parentNode.parentNode; var aqiCity=tdParent.childNodes[1].innerText; var aqiValue=tdParent.childNodes[2].innerText; console.log( aqiValue); } }); }但是你这样绑定事件是不对的，click绑在table 上，只要在表格范围内单击都会触发click事件，这样的话，会导致event.target 获取的对象不同
2019-07-17 18:59:38赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
