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网页 -->
<a href="javascript:;">跳转到百度</a>
<!-- 点击form里面的按钮，默认会跳转action网页 -->
<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 : ul
e.target : 真正点击的子元素
*/console.log( this )console.log( e.target )e.target.style.backgroundColor = 'red'
}

事件捕获(了解)

事件捕获 : 当触发子元素的事件时候，先从最顶级父元素，一级一级往里触发
规则： window->document->html->body->父元素->子元素
默认情况下，所有的注册事件都是冒泡事件。只有唯一一种方式可以注册捕获事件：元素.addEventListener(‘事件类型’,事件处理函数,true)

事件流三个阶段： e.eventPhase

1-捕获阶段
2-目标阶段
3-冒泡阶段

阻止事件流动： e.stopPropagation()

放哪从哪开始阻止

重置表单:form对象.reset()

重置表单:form对象.reset()
/* uname.value = ''
age.value = ''
salary.value = '' */
document.querySelector('form').reset()

== 使用事件委托, 找不到非动态父级时可用body当做父级==

document.body.onclick = function (e){}

注意num++

let num = 1003
console.log(`${++num}`) //1004
num = 1003
console.log(`${num++}`) //1003

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

事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
阻止事件传播阻止事件传播e.stopPropagation() 谷歌浏览器阻止事件传播(冒泡阶段) var oBig = document.getElementById('big');var oS ...
简单解析JavaScript的默认事件及如何阻止默认事件
简单解析JavaScript的默认事件及如何阻止默认事件上篇文章就提到,在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件,现在来聊一聊什么是默认事件,及如何阻止默认事件 ...
JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）
提交表单使用< input > 或 < button >标签都可以定义提交按钮,只要将type属性值设置为"submit"即可,而图像按钮则是通过将 &l ...
关于iview、element-ui重置表单并清除校验的方法
平时在使用iview或者vue重置表单是时,我会习惯使用 this.$refs[formData].resetFields(); 但是直接这样写上去方法是不起作用的, 内容必须要在每个form-ite ...
Vue、element-ui的resetFields()方法重置表单无效问题及解决办法
问题: 使用this.$ref['form'] .resetFields()无法重置表单项原因: 1.没有给表单添加ref属性 <el-form ref="form"> ...
resetFields方法重置表单
<!--* @Descripttion: resetFields方法重置表单* @version: * @Author: zhangfan* @email: 2207044692@qq.com* ...
jQuery之防止【冒泡事件】，阻止默认行为【return false】 event.stopPropagation event.preventDefault...
知识点: event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件,比如button提交后跳转到链接页面两者都可以用 return ...
获取事件类型及阻止默认行为
<div>312</div><a href="https://www.baidu.com">百度</a><button> ...
域控服务器错误事件解决方法,求大神帮忙，域控总有事件报错，事件ID：1864 - winServer论坛 - 51CTO技术论坛_中国领先的IT技术社区...
AD一直有错,事件ID:1864试了dcdiag测试有好多没通过,请大神给支个招环境是:Win2008R2 单域,两台服务器,DC-01,DC--02,还有一几台小的成员功能服务器,应该不影响,分别 ...

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

dom两种注册事件语法

1.点语法注册事件:

2.addEventListener

移出事件

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

2.移出addEventListener()

阻止默认事件

事件对象

鼠标事件

网页鼠标移动

键盘事件总结

如何获取用户按键

事件流

事件冒泡

事件捕获(了解)

事件流三个阶段： e.eventPhase

阻止事件流动： e.stopPropagation()

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

最新文章

热门文章

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

dom两种注册事件语法

1.点语法注册事件:

2.addEventListener

移出事件

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

2.移出addEventListener()

阻止默认事件

事件对象

鼠标事件

网页鼠标移动

键盘事件总结

如何获取用户按键

事件流

事件冒泡

事件捕获(了解)

事件流三个阶段： e.eventPhase

阻止事件流动 ： e.stopPropagation()

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

最新文章

热门文章

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

阻止事件流动： e.stopPropagation()