事件流

事件

用户与网页进行交互时会触发事件（鼠标事件，键盘事件，window）

1、鼠标事件

click 点击事件

 btn.onclick = function(){}

dblclick 双击事件
mouseover 鼠标移入

box[0].onmouseover = function(){}

mouseout 鼠标移出

 box[0].onmouseout = function(){}

mousemove 鼠标移动的时候触发
mousedown 鼠标摁下

box.onmousedown = function(e){}

mouseup 鼠标抬起

box.onmouseup = function(e){}

2、键盘事件

keydown 键盘摁下
keyup 键盘抬起
keypress 键盘摁下又抬起

window 事件
resize 窗口大小改变的时候触发

window.onresize = function()

load 页面加载完成时触发

 window.onload = function()

scroll 页面滚动时触发

window.onscroll = function()

window.scrollY 纵向的滚动距离

window.scrollY 

window.onload = function() {
            box[0].style.fontSize = '30px'
        }
        window.onresize = function() {
            box[0].style.fontSize = '14px'
        }
        window.onscroll = function() {
            if (window.scrollY > '300') {
                box[0].style.position = 'fixed'
                box[0].style.top = '0px'
                box[0].style.left = '500px'

            } else {
                box[0].style.position = 'static'
            }
        }

事件流
事件流分为三个阶段, 捕获阶段,到达具体触发事件的目标阶段,冒泡阶段
目前主流的浏览器事件都是在冒泡阶段阶段触发，想要在捕获阶段触发，可以通过 addEventListener 绑定事件来触发

绑定事件监听
dom.addEventListener(‘事件名’,function(){
//事件触发时要执行的代码
},boolean)

Boolean表示是否在捕获阶段触发事件 true 表示在捕获阶段触发事件 false 表示不在捕获阶段触发事件

阻止事件冒泡
事件对象 e
e.stopPropagation()// 阻止事件冒泡
e.preventDefault()// 阻止浏览器的默认行为

事件委托
利用事件冒泡的原理,将子元素的事件委托给父元素触发,然后从事件对象 e 里找具体触发事件的元素 e.target ,然后再进行其他操作
优点是 不用给子元素一个一个的绑定事件，只需要给父元素绑定一次事件,动过js添加的子元素也能够触发绑定给父元素的事件
if (e.target.localName == ‘li’) { //具体触发事件的对象，li
e.target.remove()
}

this

li.onclick = function(){
 console.log(this)// this 指的就是 li 
} 

事件处理函数里有个对象叫this, 谁触发了这个事件，this指的就是谁