html-css-js
/
14JS事件.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14 JavaScript 事件</title>
</head>
<body>
    <h1>14 JavaScript 事件</h1>
    JavaScript 绑定事件的方法有三种：
    <h2>1 HTML 属性</h2>
    <button onclick="click_event()">此按钮绑定了点击事件onClick按钮</button>
    <br><br>
    <input type="text" onfocus="focus_event()" onblur="blur_event()"
        placeholder="此文本输入框绑定了onfocus和onblur事件"
        style="width: 250px;">
    <h2>2 DOM 属性</h2>
    <h2>3 addEventListener 方法</h2>
</body>
</html>

<script>
    // 点击事件
    function click_event() {
        alert('点击事件onClick触发了');
    }

    // 聚焦事件
    function focus_event() {
        console.log('获得焦点事件onFocus触发了');
    }

    // 失焦事件
    function blur_event() {
        console.log('失去焦点事件onBlur触发了');
    }
</script>