DOM--事件

2、事件（核心）

1、事件概述

事件：页面上的元素在某种状态（浏览器实现的）达成时，要执行的提前设定好程序，称之为事件句柄，简称事件。

三要素：

1. 事件源
2. 事件类型
3. 事件处理程序

事件的绑定方式（三种）：

• 行内式（两种写法）：

1、直接在时间里面写处理程序

<div class='box' onclick='console.log('666666')'>点我</div>
1

2、调用外面的事件程序。

<div class='box' onclick='javaScript:myconsole.mylog()'>点我</div>

//
点我

    
<script>
    var myconsole={
   
        mylog:()=>{
   
            console.log('666666');
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 属性绑定

<style>
    .fa {
   
        width: 100px;
        height: 100px;
        background-color: pink;

    }
</style>    


<div class="fa">点我变色</div>
<script>
    var fa = document.querySelector('.fa');
    fa.onclick = function () {
   
        fa.style.backgroundColor = 'hotpink';
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

只能绑定一个处理程序，后面的会覆盖前面的效果

• 给元素添加一个事