DOM操作_事件操作

DOM操作_事件操作

在浏览网页时，我们经常会通过移入鼠标、点击鼠标、敲击键盘等操作，来使用网站提供的功能。
如果要让我们自己实现这样的功能，就需要通过操作事件来实现了。
实际上，移入鼠标、点击鼠标、敲击键盘等，都是常见的DOM事件。
操作事件的两个方法:

●addEventlistener 添加(绑定)事件

●removeEventListener 移除(解绑)事件

addEventListener 添加事件

作用:给DOM元素添加事件。

dom. addEventListener (事件名称，事件处理程序)

事件名称:字符串,比如: ‘click’ (鼠标点击事件)、‘mouseenter’ (鼠标进入事件)。
事件处理程序:回调函数,指定要实现的功能，该函数会在触发事件时调用。

示例:鼠标点击按钮，打印内容。

let but1 = document.querySelector('#but1')
//鼠标点击事件
but1.addEventListener('click',function () {
    console.log('2021年牛气冲天')
})
//鼠标移动到按钮时的事件
but1.addEventListener('mouseenter',function (){
    console.log('鼠标移入了。。。')
})

运行结果

事件对象(event) ，是事件处理程序(回调函数)的参数。
表示:与当前事件相关的信息，比如:事件类型(type) 、触发事件的DOM元素(target) 等。

let but1 = document.querySelector('#but1') as HTMLButtonElement

but1.addEventListener('click',function (event){
    console.log(event.target) 	//触发事件的元素
    console.log(event.type)		//事件类型
})

运行结果

通过监听事件,改变标签的style属性

 let but1 = document.querySelector('#but1') as HTMLButtonElement

 but1.addEventListener('click',function (event){
 	//event.target本身是没有style这个属性的，通过类型断言指定为具体类型
     let target = event.target as HTMLButtonElement
     target.style.fontSize = '30px'
 })

removeEventListener 移除事件

作用:移除给DOM元素添加的事件,移除后,事件就不再触发了。
dom. removeEventListener (事件名称，事件处理程序)
事件名称:同添加事件的第一个参数。
事件处理程序:必须要跟添加事件时的事件处理程序是同一个，否则无法移除!
正确方式:

说明:添加和移除事件时，事件处理程序是同一个,都是函数handleCl ick

错误案例:

注意:以上两个函数虽然长的一样，却是不同的函数(双胞胎，不是同一个人)

//事件响应函数
function handleClick (){
     console.log('2021年牛气冲天！')
 }
 let but1 = document.querySelector('#but1') as HTMLButtonElement
 //按钮1的响应函数
 but1.addEventListener('click',handleClick)

 let remove = document.querySelector('#but2') as HTMLButtonElement
 //按钮2的响应函数
 remove.addEventListener('click',function(){
    but1.removeEventListener('click',handleClick)
 })

只触发一次事件

如果事件只需要触发一次，可以在添加事件时处理。
处理方式:传入第三个参数,将once属性设置为true。
btn. addEventListener(‘click’, function () {}, { once: true })
once:如果值为true,会在触发事件后，自动将事件移除,达到只触发-次的目的。

function handleClick (){
     console.log('2021年牛气冲天！')
 }
 let but1 = document.querySelector('#but1') as HTMLButtonElement
 but1.addEventListener('click',handleClick,{once: true})