console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('事件绑定1')">按钮点击1</button>
    <button id="btn2" onclick="showMessage()">按钮点击2</button>
    <button id="btn3">按钮点击3</button>
    <button id="btn4">按钮点击4</button>
    <button id="btn5">jQuery按钮点击5</button>
    <button id="btn6">jQuery简写按钮点击6</button>
    <div id="app">
        <button id="btn7" v-on:click="alertMessage">Vue绑定按钮点击7</button>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script>
    // HTML事件
    function showMessage() {
        alert("事件绑定2")
    }

    // DOM 0级事件
    var btn3 = document.getElementById("btn3")
    btn3.onclick = function () {
        alert("事件绑定3")
    }

    // DOM 2级事件
    var btn4 = document.getElementById("btn4")
    btn4.addEventListener("click", function () {
        alert("事件绑定4")
    }, false)

    // jQuery 绑定事件
    $("#btn5").on("click",function () {
        alert("jQuery事件绑定5")
    })

    $("#btn6").click(function () {
        alert("jQuery的click简写形式")
    })

    // Vue 绑定事件
    new Vue({
        el: "#app",
        data: {},
        methods: {
            alertMessage() {
                alert("VUE绑定的click事件7")
            }
        }
    })
</script>
</html>