html 为什么addEventListener在未触发时工作？[duplicate]

weylhg0b 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(156)

此问题在此处已有答案：

addEventListener calls the function without me even asking it to（5个答案）
6小时前关门了。
我遇到了一个问题。addEventListener方法即使在没有被触发的情况下也能正常工作。如果我以内联方式编写函数，它将正常工作。但是，如果我在循环外编写函数并调用它，则addEventListener会调用它，即使我没有将鼠标悬停在某个元素上。代码如下：

<html>

<head>
    <title>Ljubicasti</title>
    <style>
        .arrow {
            width: 15px;
            margin-right: 12px;
            display: none;
        }

        .row {
            display: flex;
            margin: 5px 0;
            padding: 10px 60px;
            font-weight: 500;
            font-size: 14px;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="row">
        <img class="arrow" src="https://cdn-icons-png.flaticon.com/512/2722/2722985.png">
        Some text
    </div>
    <div class="row">
        <img class="arrow" src="https://cdn-icons-png.flaticon.com/512/2722/2722985.png">
        Some text
    </div>
    <div class="row">
        <img class="arrow" src="https://cdn-icons-png.flaticon.com/512/2722/2722985.png">
        Some text
    </div>
    <script>
        let rows = document.querySelectorAll('.row');
        for (let row of rows) {
            let img = row.querySelector('.arrow');
            img.style.display = 'none';
            row.addEventListener('mouseover', inline(img, row));
        }
        function inline(img, row) {
            img.style.display = 'inline';
            row.style.padding = '10px 60px 10px 30px';
        }
    </script>
</body>

</html>

很简单，但还是不行。
我试过这个：

let rows = document.querySelectorAll('.row');
        for (let row of rows) {
            let img = row.querySelector('.arrow');
            img.style.display = 'none';
            row.addEventListener('mouseover', () => {
                img.style.display = 'inline';
                row.style.padding = '10px 60px 10px 30px';
            });
        }

它起作用了...我不知道为什么。先谢谢你！

Html

来源：https://stackoverflow.com/questions/74818692/why-is-addeventlistener-working-when-not-triggered

1条答案

按热度按时间

i86rm4rw1#

在forloop中，你传递了一个被调用的函数（在这个例子中是returns undefined）。所以基于事件监听器的逻辑，你的代码将循环并实际应用样式，甚至在你触发屏幕上的“mouseover”之前。你必须传递一个可调用的函数
a.addEventListner('someevent', callback)在这里，如果您定义了callback或者callback是一个匿名函数，则可以调用callback。
a.addEventListener('somevent', callback())这里，callback是不可调用的，因为您在将其传递给侦听器时调用了它。

/**
* Here is a good example
*/

const rows = document.querySelectorAll('.row')

rows.forEach(row => {
  const img = row.querySelector('.arrow')
  img.style.display = 'none'
  row.addEventListener('mouseover', () => {
    inline(img, row)
})

function inline(img, row) {
  // do your inline function's logic here
}

/**
* Better way of structuring this code
* Note that eventListener is attached to the 'row' object
* First argument of second argument's callback is always the event object itself
*/

      const rows = document.querySelectorAll(".row");
      rows.forEach((row) => {
        row.addEventListener("mouseover", inline);
      });

      function inline(event) {
        const row = event.target;
        const img = row.querySelector(".arrow");
        img.style.display = "inline";
        row.style.padding = "10px 60px 10px 30px";
      }

添加事件监听器（“某事件”，回调函数）

赞(0）回复(0）举报 2022-12-16

我来回答

html 为什么addEventListener在未触发时工作？[duplicate]

1条答案

相关问题

热门标签

最新问答