javascript - 事件监听器未触发？

Question

<分区>

Answer 1

parent 是您使用的 NodeList document.querySelectorAll .您将需要使用 Array.prototype.forEach或 for 循环将事件监听器添加到查询选择器选择的每个元素。如果只想匹配第一个元素，可以使用document.querySelector并以您已经完成的相同方式添加事件监听器，因为它将返回与选择器匹配的第一个元素。

改变

window.onload = function() {
    var parent = document.querySelectorAll(".shadowed");
    var shadow = document.createElement("div");
    for (var i = 0; i < parent.length; i++) {
      parent[i].appendChild(shadow);
    }
    parent.addEventListener("mousemove", where(event));
    parent.addEventListener("mouseleave", reset(event));
}

到

window.onload = function() {
    var parent = document.querySelectorAll(".shadowed");
    var shadow = document.createElement("div");
    for (var i = 0; i < parent.length; i++) {
      parent[i].appendChild(shadow);
    }
    parent.forEach(function(item){
      item.addEventListener("mousemove", where);
      item.addEventListener("mouseleave", reset);
    });
}

另外，您只需要将函数的名称提供给事件监听器即可；您不需要调用该函数(传入事件对象)。

改变

parent.addEventListener("mousemove", where(event));
parent.addEventListener("mouseleave", reset(event));

到

parent.addEventListener("mousemove", where);
parent.addEventListener("mouseleave", reset);

window.onload = function() {
	var parent = document.querySelectorAll(".shadowed");
	var shadow = document.createElement("div");
	for (var i = 0; i < parent.length; i++) {
	  parent[i].appendChild(shadow);
	}
  parent.forEach(function(item){
   	item.addEventListener("mousemove", where);
	  item.addEventListener("mouseleave", reset);
  });
}

function where(e) {
	var x = e.offsetX / e.target.offsetWidth * 10 - 5;
	var y = e.offsetY / e.target.offsetHeight * 10 - 5;
	e.target.querySelector('.shadowed div').style.transform = 'translateX(' + x + 'px) translateY(' + y + 'px)';
}

function reset(e) {
	e.target.querySelector('.shadowed div').style.transform = 'translateX(0px) translateY(0px)';
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	background-color: #eee;
	display: flex;
	justify-content: center;
	align-items: center;
}

.shadowed {
	position: relative;
	width: 400px;
	height: 240px;
	margin: 10px;
	background-color: #fff;
	border-radius: 5px;
}

.shadowed div {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 -10px -10px 0;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background-color: #ddd;
	border-radius: 5px;
	z-index: -1;
	transform: translateY(0px) translateX(0px);
	transition: transform .1s ease-out;
}

<div class="shadowed"></div>