原生js 给多个对象绑定事件, 如果要求不用for 或者 while等循环结构，能实现吗？ 请附上代码。谢谢
发布网友
发布时间：2022-05-14 17:28
共3个回答
懂视网
时间：2022-05-14 21:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="a">
<span id="b"></span>
<script>
// var obj = {};
// Object.defineProperty(obj,"hello",{
// set: () => {
// console.log("get方法被调用");
// },
// get: (val) => {
// console.log("se方法被调用"+val);
// }
// })
let obj = {};
//Object.defineProperty(obj, prop, descriptor)
// obj 要在其上定义属性的对象。
// prop 要定义或修改的属性的名称。
// descriptor 将被定义或修改的属性描述符。
Object.defineProperty(obj, 'hello', { //这里定义obj.hello为完成修改的属性
set: (newVal) => { //当obj.hello的属性发生变化,就会以参数传进来
document.getElementById('a').value = newVal; //set触发给a值同时把值给b实现绑定
document.getElementById('b').innerHTML = newVal;
obj.hello
},
get: ()=> {
console.log("hahahaah");
}
});
//addEventListener() 方法用于向指定元素添加事件句柄。
//element.addEventListener(event, function, useCapture)
//event 所有 HTML DOM 事件
//function 指定事件触发时执行的函数。
//useCapture 指定事件是否在捕获或冒泡阶段执行。
document.addEventListener('keyup', (e) => { //监听键盘的按键松开的事件
console.log(e);
obj.hello = e.target.value; //将监听到了变化的值给obj.hello,让他触发set属性
})
</script>
</body>
</html>
热心网友
时间：2022-05-14 18:57
<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>
这个就是事件代理机制，代码里的图片你可以自己替换一下
没用循环，图片的数量不限，同样你也可以将图片替换成其他东西
可以运行，请给分，谢谢
热心网友
时间：2022-05-14 20:15
<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>
