DOM—事件基础

4.事件基础

4.1 事件概述

JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为

4.2事件组成

事件由三部分组成(事件三要素):

  • 事件源:事件被触发的对象,谁,比如按钮
  • 事件类型:如何触发,什么事件,比如鼠标点击(onclick) 鼠标经过 键盘按下
  • 事件处理程序:通过一个函数赋值的方式完成
<body>
    <button id="btn">唐伯虎</button>
    <script>
        //(1) 事件源:事件被触发的对象,谁,比如按钮
        vsr btn = document.getElementById('btn');
        //(2) 事件类型:如何触发,什么事件,比如鼠标点击(onclick) 鼠标经过 键盘按下
        //(3)事件处理程序:通过一个函数赋值的方式完成
        btn.onclick = function() {
            alert("点秋香");
        }
    </script>
</body>

4.3 执行事件的步骤

  1. 获取事件源

  2. 注册事件(绑定事件)

  3. 添加事件处理程序(采取函数赋值形式)

<body>
    <div>123</div>
    <script>
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2. 绑定事件
        //div.onclick
        // 3. 添加事件处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>
发布了33 篇原创文章 · 获赞 0 · 访问量 377

猜你喜欢

转载自blog.csdn.net/qq_46178261/article/details/105256906