1200字范文 > 事件注册方法阻止默认事件事件对象事件冒泡:事件委托事件捕获重置表单

事件注册方法阻止默认事件事件对象事件冒泡:事件委托事件捕获重置表单

时间：2022-04-01 19:12:49

dom两种注册事件语法

1.点语法注册事件:

事件源.事件类型 = 事件处理函数

特点：不能注册‘同名事件’，否则会覆盖

2.addEventListener

事件源.addEventListener(‘事件类型’,事件处理函数)

特点：可以注册‘同名事件’，依次触发

@description: 给元素注册同名事件@param {string} 事件类型不要on click mouseenter@param {function} 事件处理函数@return:

box.addEventListener('click',function(){alert('1-假如生活欺骗了你，请不要悲伤')})box.addEventListener('click',function(){alert('2-因为它明天还会继续欺骗你')})

移出事件

1.点语法移除事件，赋值null

元素.事件类型=null

box.onclick = null

2.移出addEventListener()

元素.removeEventListener(‘事件类型’, 函数名 )

匿名函数即使值相等地址也不一样,不全等,所以必须将匿名函数赋值给函数名变量,这样移除的和注册的才是同一个具名函数

let fn = function(){alert('2-因为它明天还会继续欺骗你')}/* fn : 取出函数堆地址（函数也是一种数据类型，也可以像变量一样赋值）fn() : 调用函数*/box.addEventListener('click', fn )//移除事件 : 参数与addEventListener一致/* 注意点：只能移除具名函数，无法移除匿名函数 */box.removeEventListener('click', fn )

阻止默认事件

1.html中有部分标签自带点击事件： form表单,a标签

2.如果给这些标签注册点击事件，会默认跳转

3. 阻止默认事件：执行自己注册的事件

方法一: e.preventDefault()

方法二: 将 a标签的herf form标签的action 的值改为javascript:void(0); :后面的可以省略

//获取元素let a = document.querySelector('a')let btn = document.querySelector('.btn')//注册事件a.onclick = function(e){//形参为ee.preventDefault()//阻止默认事件console.log('111111')}

<a href="javascript:;">跳转到百度</a><form action="javascript:;"><input class="username" type="text" placeholder="请输入用户名"><br><input class="password" type="text" placeholder="请输入密码"><br><button class="btn">登录</button></form>

事件对象

1.事件对象：是存储事件相关数据的对象

用户触发事件的时候，浏览器会自动捕捉触发时候的（鼠标与键盘）数据，存入一个对象中，这个对象就叫做事件对象

2.事件对象获取：事件处理函数添加形参event ev e

3.事件对象常用属性 :

e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离(数据类型:number)

!!!函数必须写形参e

document.querySelector('#box').onclick = function(e){console.log( e.pageX,e.pageY)}

鼠标事件

onclick : 鼠标单击

ondblclick : 鼠标双击

onmouseenter : 鼠标移入

onmouseleave : 鼠标移出

onmousemove : 鼠标移动

网页鼠标移动

window.onmousemove

window.onmousemove = function(e){console.log(e.pageX,e.pageY)/* 注意点：(1)pageX是数字，设置的时候需要拼接px单位（2）元素移动前提要有定位 */document.querySelector('img').style.left = e.pageX + 'px' document.querySelector('img').style.top = e.pageY + 'px' }

键盘事件总结

onfocus : 成为键盘焦点

onblur : 失去键盘焦点

oninput : 键盘输入(一般用于实时获取输入框’内容’)

onkeydown : 键盘按下(一般用于获取按键监听enter键)

onkeyup : 键盘松开

如何获取用户按键

e.key : 获取字符串 ‘Enter’

e.keyCode : 获取键盘码ASCII码

键盘上每一个按键对应一个数字，称之为ASCII码

确认键ASSCII码:13

document.querySelector('input').onkeydown = function (e) {console.log(e)console.log(e.key, e.keyCode)// console.log('1-键盘按下')if (e.key == 'Enter') {console.log('执行搜索功能');}// keyCode : enter的ascii码if (e.keyCode == 13) {console.log('执行搜索功能')}}document.querySelector('input').onkeyup = function () {console.log('2-键盘松开')}

事件流

事件冒泡

1.事件冒泡: 当触发子元素的事件时候，所有的父级元素‘同名事件’会被依次触发

1.1 规则：子元素->父元素->body->html->document->window

1.2 应用场景：事件委托技术

//子元素document.querySelector('.son').onclick = function(e){alert('我是蓝色子元素')console.log(e);}//父元素document.querySelector('.father').onclick = function(){alert('我是红色父元素')}//bodydocument.body.addEventListener('click',function(){alert('我是body')})//htmldocument.documentElement.addEventListener('click',function(){alert('我是html')})//documentdocument.addEventListener('click',function(){alert('我是document')})//windowwindow.addEventListener('click',function(){alert('我是window')})

2.事件委托: 给父元素注册事件, 委托给子元素处理

2.1 事件委托原理 : 事件冒泡

2.2 事件委托注意点 :

不能使用 this ： this指向父元素

需要使用 e.target : 真正点击的子元素（事件触发源）

2.3 事件委托的应用：给动态新增元素注册事件

//需求：点击页面每一个li元素，自己的颜色修改为红色document.querySelector('.btn').onclick = function(){document.querySelector('ul').innerHTML += `<li>我是动态新增li元素</li>`}//根据事件冒泡原理，点击任何li元素都会触发ul点击事件，只需要给ul注册即可document.querySelector('ul').onclick = function(e){/* this : ule.target : 真正点击的子元素*/console.log( this )console.log( e.target )e.target.style.backgroundColor = 'red'}