js事件，冒泡，捕获

事件分类

1，鼠标事件

事件名称	描述
onmousedown	当鼠标按下的时候触发
onmouseup	当鼠标抬起时触发
onmouseover /onmouseenter	当鼠标进入是触发
onmousemove	当鼠标移动时触发
onmouseleave // onmouseout	当鼠标离开时触发
onclick	鼠标单击
ondblclick	鼠标双击
onwheel	鼠标滚轮事件

onmouseover ：当鼠标移入一个元素或其他子元素都会触发的事件，所以有一个重复触发，冒泡的过程，对应的移除事件是mouseout

onmouseenter：当鼠标移出元素本身（不包含子元素）触发的事件，也就是不会冒泡，对应的移除事件是mouseleave

2，键盘事件

事件名称	描述
onkeydown	键盘按下时触发
onkeyup	键盘抬起时触发
onkeypress	按键 按下抬起触发

3,HTML事件

事件名称	描述
onload	文档加载完成触发
onselect	被选中时触发
onchange	内容被改变触发
onfocus	获得焦点时触发
onresize	页面大小发生改变触发
onscroll	滚动条移动触发

添加事件的方式：

1，行内添加

 <div id="box" onclick="alert('行内添加事件')"></div>

2，内敛添加

<div id="box" onclick='fn()'></div>
    <script>
        function fn() {
            alert('内敛添加')
        }
    </script>

3.动态绑定

var btn = document.getElementById('btn')
//这种方式只能给袁=元素添加一个同类型的事件
        btn.onclick = function() {
            alert('动态添加')
        }
        
        //或者使用事件监听  可以给元素添加多个同类型的事件
        btn.addEventListener('click', function() {
            alert('hello1')
        })
        btn.addEventListener('click', function() {
            alert('hello2')
        })

事件的冒泡和捕获

 btn.addEventListener('click', function(e) {
            alert('hello1')
     e.stopPropagation()//阻止冒泡
            //第三个参数默认为false  当为false时表示事件冒泡  当为true时表示事件捕获
        },false)

事件冒泡：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止

需要时可以阻止冒泡：e.stopPropagation()

事件捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止

阻止默认事件：e.preventDefault()