事件基础

事件三要素

  • 事件源(谁):触发事件的元素

  • 事件类型(什么事件): 例如 click 点击事件

  • 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <body>
        <button id="btn">唐伯虎</button>
        <script>
            // 点击一个按钮,弹出对话框
            // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
            //(1) 事件源 事件被触发的对象   谁  按钮
            var btn = document.getElementById('btn');
            //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
            //(3) 事件处理程序  通过一个匿名函数赋值的方式 完成
            btn.onclick = function() {
                alert('点秋香');
            }
        </script>
    </body>

      

    执行事件的步骤

  • 获取事件源
  • 注册事件(绑定事件)
  • 添加事件处理程序(采用函数赋值的形式)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick
        // 3.添加事件处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

  

 

posted @   Harry宗  阅读(39)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示