1.addEventListener注册事件
1.1点语法注册事件: 事件源.事件类型 = 事件处理函数
* 特点：不能注册‘同名事件’， 否则会覆盖
1.点语法
box.onclick = function(){
alert(11111)
1.2事件源.addEventListener('事件类型',事件处理函数)
* 特点：可以注册‘同名事件’，依次触发
2.addEventListener()
/**
* @description: 给元素注册同名事件
* @param {string} 事件类型 不要on
* @param {function} 事件处理函数
* @return:
*/
box.addEventListener('click',function(){
alert('1-知足上进')
})
box.addEventListener('click',function(){
alert('2-温柔坚定')
})
2.removeEventListener移除事件
2.1 点语法移除事件， 赋值null
box.onclick = null
//2.addEventListener()
/**
* @description: 给元素注册同名事件
* @param {string} 事件类型 不要on
* @param {function} 事件处理函数
* @return:
*/
box.addEventListener('click',function(){
alert('1-假如生活欺骗了你，请不要悲伤')
})
let fn = function(){
alert('2-因为它明天还会继续欺骗你')
}
/*
fn : 取出函数堆地址 （函数也是一种数据类型，也可以像变量一样赋值）
fn() : 调用函数
*/
box.addEventListener('click', fn )
//移除事件 : 参数与addEventListener一致
/* 注意点： 只能移除具名函数， 无法移除匿名函数 */
box.removeEventListener('click', fn )
2.2-阻止默认事件
1.html中有部分标签自带点击事件 ： form表单,a标签
2.如果给这些标签注册点击事件，会默认跳转
3. 阻止默认事件 ： 执行自己注册的事件
**e.preventDefault()**
//获取元素
let a = document.querySelector('a')
let btn = document.querySelector('.btn')
//注册事件
a.onclick = function(e){
e.preventDefault()
console.log('111111')
}
btn.onclick = function(e){
let uname = document.querySelector('.username').value
let pwd = document.querySelector('.password').value
console.log( uname,pwd )
e.preventDefault()
}
3.事件对象
1.事件对象 : 是存储与事件相关的对象。
* 当用户触发事件的时候，浏览器会自动捕捉触发时(鼠标坐标和键盘按键)的信息,存入对象中。这个对象称之为事件对象。
2.如何获取事件对象 : 给事件处理函数添加形参 event ev e
3.事件对象常用属性 :
3.1 e.pageX / e.pageY :鼠标触发点 到页面左上角距离
let box = document.querySelector('#box')
box.onclick = function (e) {
console.log(e)
console.log(e.pageX, e.pageY)
3.1事件对象常用属性
1.事件对象 ：是存储事件相关数据的对象
* 用户触发事件的时候，浏览器会自动捕捉触发时候的（鼠标与键盘）数据，存入一个对象中，这个对象就叫做事件对象
2.事件对象获取 ： 事件处理函数添加形参
3.事件对象常用属性 :
e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离
document.querySelector('#box').onclick = function(e){
console.log( e.pageX,e.pageY)
}
案例(单词必备)
1.鼠标事件
**onclick : 鼠标单击**
ondblclick : 鼠标双击
onmouseenter : 鼠标移入
**onmouseleave : 鼠标移出**
onmousemove : 鼠标移动
2.网页鼠标移动 : 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'
}
3.2-键盘事件与获取按键
1.键盘事件总结
**onfocus** : 成为键盘焦点
**onblur** : 失去键盘焦点
**oninput** : 键盘输入
* 实时获取输入内容
**onkeydown** : 键盘按下
* 监听enter键
**onkeyup** : 键盘松开
2.如何获取用户按键
**e.key** : 获取字符串 'Enter'
**e.keyCode** : 获取键盘码ASCII码 13
* 键盘上每一个按键对应一个数字，称之为ASCII码
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-键盘松开')
}
4.事件流与事件委托
4.1事件冒泡介绍
含义: 当触发子元素事件时，所有的父级元素‘同名事件’会被依次触发
子元素->父元素->body->html->document->window
//子元素 document.querySelector('.son').onclick = function(e){ alert('我是蓝色子元素') console.log(e); }
//父元素
document.querySelector('.father').onclick = function(){
alert('我是红色父元素')
}
//body
document.body.addEventListener('click',function(){
alert('我是body')
})
//html
document.documentElement.addEventListener('click',function(){
alert('我是html')
})
//document
document.addEventListener('click',function(){
alert('我是document')
})
//window
window.addEventListener('click',function(){
alert('我是window')
})
4.2事件委托（重点）
1.**事件委托**： 给父元素注册事件,委托子元素来处理
2.1 事件委托原理：事件冒泡
2.2 事件委托注意点 ： 不能使用this
this: 事件源，指向父元素
**e.target**: 事件触发源，指向具体触发这个事件委托的子元素
//需求：给每一个li元素注册点击事件，点击之后显示自己的文本
/* 方式一：以前的写法，遍历数组逐一注册 */
// let liList = document.querySelectorAll('ul>li');
// //遍历数组
// for(let i = 0;i<liList.length;i++){
// //逐一注册
// liList[i].onclick = function(){
// //this: 当前点击的li元素
// alert(this.innerText);
// };
// };
/* 方式二：使用事件冒泡，给父元素注册 */
let ul = document.querySelector('ul')
ul.onclick = function (e) {
/*
this : 事件源。 这个事件给谁注册的。
e.target : 事件触发源。 这个事件触发的源头，到底点击的哪一个子元素触发的这个点击事件。
*/
alert(e.target.innerText)
}
4.3事件捕获(了解) :
当触发子元素的事件时候，先从最顶级父元素，一级一级往里触发
1.规则： **window->document->html->body->父元素->子元素**
2.默认情况下注册的事件都是冒泡类型事件，只有唯一的一种语法可以注册捕获类型事件
元素.addEventListener('事件类型',事件处理函数,true)
4.4事件流三个阶段
事件流三个阶段 : **e.eventPhase** 获取事件阶段
(1)捕获阶段
(2)目标阶段
(3)冒泡阶段
4.5-阻止事件流动
阻止事件流动: **e.stopPropagation()**
* 无论是冒泡还是捕捉都可以阻止（停止事件流）
