原生js 给多个对象绑定事件, 如果要求不用for 或者 while等循环结构，能实现吗？ 请附上代码。谢谢 10
2个回答
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="imgDiv">
<img src="001.jpg" style="width: 150px; height: 170px;"> <img
src="002.jpg" style="width: 150px; height: 170px;"> <img
src="003.jpg" style="width: 150px; height: 170px;"> <img
src="004.jpg" style="width: 150px; height: 170px;"> <img
src="005.jpg" style="width: 150px; height: 170px;">
</div>
<script type="text/javascript">
var imgDiv = document.getElementById("imgDiv");
imgDiv.onclick = showMsg;
function getEventTarget(e) {
var target = e ? e.target : (window.event ? window.event.srcElement
: null);
if (!target) {
return null;
}
while (target.nodeType != 1
&& target.nodeName.toLowerCase() != "body") {
target = target.parentNode;
}
return target;
}
function showMsg(e){
var target = getEventTarget(e);
if (target.tagName.toLowerCase() == 'img') {
alert(target.src);
}
}
</script>
</body>
</html>
这个就是事件代理机制，代码里的图片你可以自己替换一下
没用循环，图片的数量不限，同样你也可以将图片替换成其他东西
可以运行，请给分，谢谢
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="imgDiv">
<img src="001.jpg" style="width: 150px; height: 170px;"> <img
src="002.jpg" style="width: 150px; height: 170px;"> <img
src="003.jpg" style="width: 150px; height: 170px;"> <img
src="004.jpg" style="width: 150px; height: 170px;"> <img
src="005.jpg" style="width: 150px; height: 170px;">
</div>
<script type="text/javascript">
var imgDiv = document.getElementById("imgDiv");
imgDiv.onclick = showMsg;
function getEventTarget(e) {
var target = e ? e.target : (window.event ? window.event.srcElement
: null);
if (!target) {
return null;
}
while (target.nodeType != 1
&& target.nodeName.toLowerCase() != "body") {
target = target.parentNode;
}
return target;
}
function showMsg(e){
var target = getEventTarget(e);
if (target.tagName.toLowerCase() == 'img') {
alert(target.src);
}
}
</script>
</body>
</html>
这个就是事件代理机制，代码里的图片你可以自己替换一下
没用循环，图片的数量不限，同样你也可以将图片替换成其他东西
可以运行，请给分，谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div id='tt'>
<span>a</span>
<span>b</span>
<span>c</span>
</div>
<script type="text/javascript">
function aa() {
console.log(2);
document.getElementById('tt').addEventListener('click', (e)=>{
console.log(e.target); //对每个 DOM 进行操作
})
}
aa();
</script>
<span>a</span>
<span>b</span>
<span>c</span>
</div>
<script type="text/javascript">
function aa() {
console.log(2);
document.getElementById('tt').addEventListener('click', (e)=>{
console.log(e.target); //对每个 DOM 进行操作
})
}
aa();
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
