事件侦听器未触发？

Question

我尝试将两个事件侦听器添加到我的外部脚本中，这两个侦听器作为附加到 HTML 元素的事件属性都运行良好。

事件侦听器是：

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

其余的代码可以在这里看到： https://codepen.io/rowancavanagh/pen/NBmPGv 或者在代码片段中：

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));
}

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>

如您所见，他们应该在 mousemove 和 mouseleave 上触发几个函数，但实际上并没有。

知道我做错了什么吗？

Answer 1

parent 是运行 querySelectorAll 的结果，因此它将是一个元素数组。您可以将事件侦听器移动到循环中，以便 .shadowed 的所有实例都将侦听事件。

另一件事是您将函数传递给事件侦听器的方式。 parent.addEventListener("mousemove", where(event)); 会将函数调用的结果设置为监听器，你只想传递函数的实际名称。 onload 可能看起来像这样：

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[i].addEventListener("mousemove", where);
      parent[i].addEventListener("mouseleave", reset);
    }
}

这些变化之后

Answer 2

您是在绑定事件后立即调用函数。事件处理程序需要函数引用。

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

应该是

parent.addEventListener("mousemove", where);

此外，parent var 包含具有特定 class 的所有元素的活动节点列表。 addEventListener是针对需要单独绑定的特定元素可用的方法

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(elem) {
       elem.addEventListener("mousemove", where);
       elem.addEventListener("mouseleave", reset);
    });
}

Answer 3

parent 是一个 NodeList，因为您使用 document.querySelectorAll. You will need to use Array.prototype.forEach or a for loop to add event listeners to each of the elements selected by the query selector. If you only want to match the first element, you can use document.querySelector 并按照您已经完成的相同方式添加事件侦听器，因为它将 return 第一个与选择器匹配的元素。

改变

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>

Answer 4

parent 是一个数组，你不能将 EventListener 添加到数组中，所以你需要将 EventListener 添加到 for 循环中数组的每个元素

例如：

for (var i = 0; i < parent.length; i++) {
  parent[i].appendChild(shadow);
  parent[i].addEventListener("mousemove", where(event));
  parent[i].addEventListener("mouseleave", reset(event));
}

事件侦听器未触发？

Event listener not firing?

javascript

html

mouseevent

addeventlistener