web-dev-qa-db-ja.com

addEventListener 2つの関数

AddEventListener（）に2つの関数が含まれるようにするにはどうすればよいですか？

自分で解決策を見つけようとしましたが、うまくいかないようです。可能であれば例を挙げてください。

javascriptfunctionaddeventlistener
18
Alex

関数を関数にラップします。

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();    
});
38
Sten Muchow

古いモデルと新しいDOM Level 2イベントモデルの2つの大きな違いは、1）新しいモデルは特定のイベントハンドラープロパティに依存しないこと、2）任意の1つのイベントに対して複数のイベントハンドラー関数を登録できることです。 1つのオブジェクト（From：Learning JavaScript）例：

<!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>

同様に、任意の1つのオブジェクトの1つのイベントの特定のイベントハンドラー関数を削除することもできます。例えば：

<!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);
            document.getElementById("myElement").removeEventListener("click", func0, true);
        </script>
    </body>
</html>
5
MMKarami