divEle.onclick = clickFn()
divEle就是事件源click就是事件类型clickFn()就是事件处理函数this指向事件源window、document、html、body、表单输入框…form标签内的表单元素才能触发
click
dblclick
contextmenu
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter
mouseleave
wheel
mouseover和mouseout的鼠标事件，事件源的后代元素也会触发
mouseenter和mouseleave的鼠标事件，事件源的后代元素不会触发
keydown
keypress
keyup
focus
blur
input
change
submit
form表单标签enter按键按下会触发submit提交按钮点击会触发button按钮点击会触发reset
form表单标签reset重置按钮才会触发touchstart
touchmove
touchend
selectstart
visibilitychange
document.visibilityState的返回值表示页面可见性
visible表示页面可见hidden表示页面不可见事件源.on事件类型 = 事件处理函数// 获取元素
var divEle = document.querySelector('div')
// 准备的事件处理函数
function clickFn1 () {
console.log('click1')
}
function clickFn2 () {
console.log('click2')
}
// DOM 0级绑定事件
divEle.onclick = function () {
console.log('点击')
}
divEle.onclick = clickFn1
divEle.onclick = clickFn2
// 最终输出：'click2'
事件源.addEventListener(事件类型, 事件处理函数)
事件源.attachEvent(on事件类型, 事件处理函数)
// DOM 2级绑定事件
divEle.addEventListener('click', function () {
console.log('点击')
})
divEle.addEventListener('click', clickFn1)
divEle.addEventListener('click', clickFn2)
// 最终输出：'点击' 'click1' 'click2'
事件源.on事件 = null
=赋值的形式绑定的，所以会将之前绑定的处理函数覆盖掉// 此方式绑定的处理函数无法解除绑定
divEle.addEventListener('click', function () {})
元素.removeEventListener(事件类型, 解绑的事件处理函数)
元素.detachEvent(on事件类型, 解绑的事件处理函数)
window.event获取
window.evente = e || window.event事件对象.button012事件对象.offsetX事件对象.offsetY
事件对象.clientX事件对象.clientY
事件对象.pageX事件对象.pageY
事件对象.screenX事件对象.screenY
document.onwheel = function (e) {
e = e || window.event;
// e.deltaY表示滚轮滚动的距离，正数表示滚轮向下滚动，负数表示向上滚动
console.log(e.deltaY);
}
事件对象.keyCode或者事件对象.whichenter按键返回键码为13keypress键盘事件中获取的字母按键键码区分大小写keydown键盘事件中获取的字母按键键码不区分大小写事件对象.key
a，返回'a'enter按键，返回'Enter'事件对象.code
a，返回'keyA'enter按键，返回'Enter'ctrl按键，返回'ControlLeft'事件对象.ctrlKey
ctrl按键事件对象.shiftKet
shift按键事件对象.altKey
alt按键事件对象.metaKey
win按键true表示按下了对应的按键，false则表示没有按下ctrl + k
事件对象.ctrlKey && 事件对象.keyCode === 75a标签，会默认跳转href地址return false
return false一般书写在函数最后return false之前的代码不能报错（抛出异常）事件对象.preventDefault()
事件对象.returnValue = false
form表单默认提交行为，只能在submit事件中阻止selectstart事件中阻止contextmenu事件中阻止事件对象.currentTarget事件对象.target事件对象.srcElement
this指向事件源window的元素都触发同类型事件
window向事件目标的顺序进行传播window的顺序进行传播addEventListener绑定事件时，第三个参数可以指定事件在哪个阶段触发
事件源.addEventListener(事件类型, 处理函数, 决定触发阶段)
false或者不传递，则绑定的事件在冒泡阶段触发true，则绑定的事件在捕获阶段触发{ capture：布尔值，表示是否在捕获阶段触发, once: 布尔值，表示是否只触发一次 }事件对象.stopPropagation()
事件对象.cancelBubble = true事件对象.stopImmediatePropagation()
this来表示目标元素，因为this指向事件源body、html、document、window// 需求：给每一个ul>li绑定点击事件，弹窗输出li中的内容
// 方案1：给每一个li绑定事件，对动态添加的元素不友好（每一次新增或删除都需要重新遍历）
Array.from(ul.children).forEach(function (li) {
li.onclick = function () {
alert(this.innerText)
}
})
// 方案2：事件委托 --> 将所有的li点击事件委托给ul绑定
ul.onclick = function (e) {
// 可以通过节点名称来判断事件目标是否是委托方元素
if (e.target.nodeName == 'LI') {
// 此处才是委托方的事件逻辑代码
alert(e.target.innerText)
}
}