事件

什么是事件？事件实在编程时系统内发生的动作或者发生的事情比如用户在网页上单机一个按钮

事件监听就是让程序检测是否有事件产生，有事件触发就调用函数作出响应，也称为注册事件

语法

元素.addEventListener('事件'，要执行的函数)

获取元素
let btn=document.querySelector('button')
事件监听(注册事件)
btn.addEventlistener('click',function(){
alert('被点击了')
})

事件监听三要素：
事件源：那个dom元素被事件触发了，要获取dom元素事件：用什么方式出发，比如鼠标单击click，鼠标经过moouseover等事件调用函数：要做什么事

环境对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境简单来说就是：谁调用，this就是谁

案例

<body>
<button>点名了1</button>
<button>点名了2</button>
<button>点名了3</button>

<script>
let btn1 = document.querySelector('button:nth-of-type(2)')
btn1.addEventListener('click', function() {
// 修改按钮的文本样式
// btn1.style.color = 'red'
// this:谁触发事件，方便就是事件处理函数中的this
this.style.color = 'red'
})
</script>
</body>

排它思想

当前元素为A状态，其他元素为B状态简单来说就是干掉别人（使用for循环），保留自己（通过this或者下标找到自己或者对应的元素）

案例

<body>
<ul class="list">
<li>首页</li>
<li>文章列表</li>
<li class="active">发表文章</li>
<li>关于我们</li>
</ul>

<script>
// 首先获取元素
let lists = document.querySelectorAll('.list>li')
// 然后遍历伪数组,为其中的每个元素绑定单击事件
for (let i = 0; i < lists.length; i++) {
lists[i].addEventListener('click', function () {
// 干掉伪数组里面的active
lists.forEach(function (value, index) {
value.classList.remove('active')
})
// 为当前元素添加active
lists[i].classList.add('active')
})
}
</script>
</body>

DOM事件基础

事件

环境对象

排它思想