[JS DOM&BOM]事件

Posted 2021-09-13 鱼竿钓鱼干

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[JS DOM&BOM]事件相关的知识，希望对你有一定的参考价值。

[JS DOM&BOM]事件

事件基础

事件的概念

事件是可以被JS检测到的行为，触发-响应

事件由三部分组成：事件源事件类型事件处理程序
事件源：事件被触发的对象
事件类型：如何触发
事件处理程序：通过一个函数赋值的方式完成

const btn = document.querySelector('button');//事件源

btn.onclick = function() {//onclick为事件类型，匿名函数赋值
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

事件的执行流程

获取事件源
绑定事件（注册事件）
添加事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",
    initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <script>
        var div=document.querySelector('div');//获取事件源
        div.onclick=function(){//绑定事件
            console.log('我被选中了');//添加事件处理程序
        }
    </script>
</body>
</html>

以上是关于[JS DOM&BOM]事件的主要内容，如果未能解决你的问题，请参考以下文章

js--DOM&事件

JS---DOM---part4 课程介绍 & part3 复习