句柄式监听document.getElementById("btn").addEventListener("click",function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="div">hello</p>
    <button onclick="demo()">按钮1</button>
    <button id="btn">按钮2</button>
    <button id="btn_many">添加多个句柄事件</button>
    <script>
        // 以前的监听
        function demo(){
            document.getElementById("div").innerHTML = "改变"
        }
        // 句柄式监听
        document.getElementById("btn").addEventListener("click",
            function(){
                alert("句柄监听事件");
            }
        );  
        // 声明多个句柄
        var x = document.getElementById("btn_many");
        x.addEventListener("click",hello);
        x.addEventListener("click",world);
        // 移出句柄
        x.removeEventListener("click",hello);
        function hello(){
            alert("hello")
        }
        function world(){
            alert("world")
        }
    </script>
</body>
</html>