飞行的猪哼哼

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
02：DOM事件基础

1：事件三要素：
事件由三部分构成：事件源 事件类型 事件处理程序。
案例：点击唐伯虎的按钮弹出点秋香的会话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <button id="btn">唐伯虎</button>
    <script>
      //1：得到事件源
      var btn = document.getElementById("btn");
      //2：要触发怎样的事件（点击onclick  鼠标经过   键盘按键）
      //3：事件处理程序，交给函数来完成
      btn.onclick = function(){
        alert("点秋香");
      }
    </script>
</body>
</html>

在这里插入图片描述
2:执行事件的步骤：

1：获取事件源
2：注册事件（绑定事件）
3：添加事件处理程序（采取函数赋值的方式）

案例：点击div 则控制台输出 ：我被选中了这句话。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div id ="bbb">123</div>
    <script>
        // 1:获取事件源
        var aaa = document.querySelector("div");
        //2：注册事件
        aaa.onclick = function(){
            console.log("我被选中了！");
        }
    </script>
</body>
</html>
posted on 2020-02-18 20:30  飞行的猪哼哼  阅读(14)  评论(0)    收藏  举报