高级事件

1.传统方式（唯一性）

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

2.方法监听注册方式

同一个元素同一个事件可以注册多个监听器按注册顺序依次执行

// eventTarget.addEventListener(type,listener[,useCapture])
btns[1].addEventListener('click',function () {
  alert(2)
})

// eventTarget.attachEvent(eventNameWithOn,callback)

2.删除事件

/*
* 1、传统注册方式 eventTarget.onclick = null
* 2.方法监听注册方式 eventTarget.removeEventListener(type,listener[,useCapture])
* */

let divs = document.querySelectorAll('div')
divs[0].onclick = function () {
  alert(11)
  divs[0].onclick = null
}

divs[1].addEventListener('click',fn)
function fn(){
  alert(22)
  divs[1].removeEventListener('click',fn)
}

divs[2].attachEvent('onclick',fn1)
function fn1(){
  alert(33)
  divs[2].detachEvent('onclick',fn1)
}

3. DOM 事件流

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

// onclick attachEvent(ie)只能得到冒泡
// 如果addEventListener 第三个参数是true 那么处于捕获阶段
let son = document.querySelector('.son')
son.addEventListener('click',function () {
  alert('son')
},true)
// 如果addEventListener 第三个参数是false或忽略 那么处于冒泡阶段

// 有些事件没有冒泡 onblur onfocus onmouseenter onmouseleave

4.事件对象 event

// e.target 返回的是触发事件的对象（元素） e.target点击了那个元素，就返回那个元素
// this返回的是绑定事件的对象（元素） this那个元素绑定了这个点击事件 就返回谁

let ul = document.querySelector('ul')
ul.addEventListener('click',function (e) {
  // 我们给ul绑定了事件 this指向ul
  console.log(this)
  // e.target指向我们点击那个对象 谁触发了这个事件 我们点击的是li e.target指向的是li
  console.log(e.target)
})

// 了解 currentTarget ie678不认识

// 1.返回事件类型 e.type
// 2.阻止默认行为（事件） 让链接不跳转 提交按钮不提交
let a = document.querySelector('a')
a.addEventListener('click',function (e) {
  e.preventDefault()
  }
)
a.onclick = function (e) {
  // 普通浏览器
  e.preventDefault()
  // 低版本浏览器
  e.returnValue;
  // 我们可以利用return false也能阻止默认行为 没有兼容性
  return false
}

5.阻止事件冒泡

/*
* DOM stopPropagation
* 非标准 cancelBubble
* */
let son = document.querySelector('.son')
son.addEventListener('click',function (e) {
  alert('son')
  e.stopPropagation()
},true)

6.事件委托（代理、委派）

事件委托：不给每个子节点单独设置事件监听器 事件监听器设置在其父节点上 利用冒泡原理影响每个子节点

let ul = document.querySelector('ul')
ul.addEventListener('click',function (e) {
  e.target.style.backgroundColor = 'pink'
})

// contextmenu 禁用右键菜单
// selectstart 禁止鼠标选中
// client 窗口可视区
// page 文档页面
// screen 电脑屏幕

// 图片跟着鼠标移动
let pic = document.querySelector('img')
document.addEventListener('mousemove',function (e) {
  let x = e.pageX
  let y = e.pageY
  pic.style.left = x+'px'
  pic.style.top = y+'px'
})

7.常用键盘事件

// 键盘弹起
document.onkeyup = function () {
  console.log('我弹起了')
}
// keydown 键盘按下
// keypress 键盘按下（不识别功能键ctrl shift 左右键）

// keyCode 得到相对应的ASCII码 keyCode已禁用
document.addEventListener('keyup',function (e) {
  console.log('up'+e.key)
}) 

let con =  document.querySelector('.con')
let jd_input = document.querySelector('.jd')
jd_input.addEventListener('keyup',function () {
  if(this.value === ''){
    con.style.display = 'none'
  }else {
    con.style.display = 'block'
    con.innerText = this.value
  }
})

// blur 失去焦点
jd_input.addEventListener('blur',function () {
  con.style.display = 'none'
})

// focus 获取焦点
jd_input.addEventListener('focus',function () {
  if(this.value !== ''){
    con.style.display = 'block'
  }
})

// keydown和keypress在文本框里面，先执行里面的程序，字还没落里面，值取不过来
// keyup事件触发的时候，文字落入文本框里面
// 因此用keyup