Question

我想知道addEventListener是否可以在其中包含两个函数。我试过了，但似乎没有用。如果可能的话，请给我一个简单的例子。

谢谢，

亚历

Answer 1

将您的功能包裹在一个功能中。

const invokeMe = () => console.log('I live here outside the scope');
const alsoInvokeMe = () => console.log('I also live outside the scope'); 

element.addEventListener('event',() => {    
     invokeMe();
     alsoInvokeMe();    
});

Answer 2

较旧的模型与较新的DOM Level 2事件之间的两个主要差异 model是1）较新的模型不依赖于特定的事件处理程序属性，2）您可以为任何一个对象上的任何一个事件注册多个事件处理函数。（来自：学习JavaScript）例如：

.card

因为，甚至可以为任何一个对象上的一个事件删除特定的事件处理函数。例如：

<!DOCTYPE html>
<html>
    <body>
        <div id="myElement"> Please click here.</div>
        <script>
            function func0() {
                alert("Function0 is called");
            }
            function func1() {
                alert("Function1 is called");
            }
            document.getElementById("myElement").addEventListener("click", func0, true);
            document.getElementById("myElement").addEventListener("click", func1, true);
        </script>
    </body>
</html>

Answer 3

将函数包装在函数中。但是需要从addEventListener回调（参数event）发送所有参数

const callbackOne = (...props) => {
    console.log('callbackOne', ...props)
};
const callbackTwo = (...props) => {
    console.log('callbackTwo', ...props)
};

element.addEventListener('eventName',(...props) => {    
     callbackOne(...props);  
     callbackTwo(...props);
});

您

addEventListener两个函数

3 个答案: