事件的方法（常见）

事件

1，DOM常见事件

浏览器或者用户做的一些事情统称为事件；是元素天生自带的一种行为。

1.1鼠标事件：鼠标动作时触发的事件

onmouseover鼠标划入事件
onmouseoout鼠标划出事件
onmousemve鼠标移动事件
onmousedown鼠标点击事件
onmouseup鼠标抬起事件
onclick鼠标点击事件
ondblclick鼠标双击事件
onmouseenter鼠标划入事件（不支持冒泡）
onmouseleave鼠标划出事件（不支持冒泡）

1.2键盘事件事件

• onkeydown键盘点击事件
• onkeypress键盘点击事件（在onkeydown之后onkeyup之前执行）
• onkeyup键盘抬起事件

1.3表单元素事件

onfoucs获得焦点事件
onblur失去焦点事件
onchange输入的被改变和失去焦点事件
oninput输入的值被改变事件

1.4系统事件

window.onload页面所有资源加载完成后触发
window.onresize当前窗口尺寸发生变化时触发
window.onscroll滚动条滚动时触发

1.5移动端事件

ontouchstart触摸开始时触发
ontouchend触摸结束时触发
ontouchmove触摸滑动是触发
移动端使用click大概有300ms的延迟

2，事件对象

在事件触发时，浏览器传递给事件函数的第一个实参；其中包含了本次事件触发的具体信息

let box = document.querySelector('#box');
box.onclick = function (e) {
console.log(e); // e 一般称为事件对象，window.event 
// 在IE浏览器下没有e，但是会把事件的信息挂载到
// e.clientX 鼠标点击的位置相对于当前浏览器可视窗口的左边距离
// e.clientY 鼠标点击位置相对于当前浏览器可视窗口的上边距离
// e.offsetX 鼠标点击位置相对于当前点击元素的左边距离
// e.offsetY 鼠标点击位置相对于当前点击元素的上边距离
// e.pageX 鼠标点击位置相对于 body 左边的偏移量
// e.pageY 鼠标点击位置相对于 body 上边的偏移量
// e.target 事件源 ，当前事件是谁触发的事件源就是谁
// e.type  事件类型 例如点击事件 ： 'click'
// e.cancelBubble:是否阻止事件默认的冒泡传播(true为阻止)
// e.stopPropagation(); 停止事件的冒泡传播(IE8及以下不兼容)

};
window.onkeydown = function (e) {
console.log(e.keyCode);
// e.keyCode 键码：键盘上每个键对应一个键码
};

3，事件的形式行为

有些元素是有替代行为的，如a标签点击会进行进行

let a = document.getElementById('a');
// 阻止默认行为：
a.onclick = function (e) {
alert(111);
e.preventDefault(); // 阻止元素的事件默认行为(IE8级以下不兼容)
// IE 低版本可以使用：e.returnValue = false
};

4，DOM事件绑定

js中的事件分为DOM0级事件和DOM2级事件

1.1 DOM0级事件

1.1事件绑定

box.onclick = function () {
console.log(1)
};
box.onclick = function () {
console.log(2);
};

DOM0事件：给元素的同一个事件类型只能绑定一个函数(默认存在冒泡计机制)，如果绑定多个，下面的会覆盖上面的

当用户点击box元素时，控制台会打印2

1.2事件的去除

box.onclick = null

1.2，DOM2级事件绑定

1.1事件绑定

1，给元素的同一个事件类型可以绑定多个函数

2，可以指定绑定的函数在冒泡阶段执行还是在捕获阶段执行

元素.addEventListener(‘事件类型’, 函数, false冒泡 || true捕获)

box.addEventListener(‘click’, function(){}, false)
box.removeEventListener(‘click’, function(){}, false) // 移除事件

1.2 attachEvent IE浏览器的DOM2级事件绑定

元素.attachEvent(‘事件类型’, 函数);
box.attachEvent(‘onclick’, function(){});
1.3 attachEvent和addEventListener的区别

添加绑定方法中的这个是当前被绑定的元素，而att中的this是窗口
add不能给元素的同一个事件类型绑定同一个方法，但是att可以
添加绑定的函数按绑定的顺序执行，但是att绑定的方法倒着执行

5，事件的传播

• 1，冒泡传播的机制：当触发子元素的事件时，会转换为触发当前元素祖先元素身上对应的事件（从里到外）；

• 2，捕获传播的机制：当触发子某一个事件时，会最外层的祖先元素开始出发对应的事件，直到目标元素为止（往外到里）；

• 3，目标阶段：目标阶段的函数执行执行和函数绑定的顺序一致

• 4，三个阶段的执行顺序：捕获阶段->目标阶段->冒泡阶段

• 5，dom2级事件绑定时第三个参数可以控制函数在哪个阶段执行（true：捕获阶段； false：冒泡阶段）

    function fn1(e){
        console.log("center","冒泡");
    }
    function fn2(e){
        console.log("inner","冒泡");
    }
    function fn3(e){
        console.log("outer","冒泡");
    }
    function fn4(){
        console.log("center","捕获");
    }
    function fn5(){
        console.log("inner","捕获");
    }
    function fn6(){
        console.log("outer","捕获");
    }
    center.addEventListener("click",fn4,true);
    center.addEventListener("click",fn1,false);
    inner.addEventListener("click",fn2,false);
    inner.addEventListener("click",fn5,true);
    outer.addEventListener("click",fn3,false);
    outer.addEventListener("click",fn6,true);
    
    // 当用户点击center元素时，函数执行的顺序是:
    捕获阶段-->目标阶段-->冒泡阶段
  
    fn6-->fn5-->fn4-->fn1-->fn2-->fn3
  

6，事件委托

事件委托：主要利用事件的冒泡传播机制，给最外层的盒子绑定事件；触发里边元素的事件会把外层盒子对应的事件也触发

<div id="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<script>
    // 三个div将onmouseover这个事件委托给这三个盒子的父元素 
    let parent  = document.getElementById("parent");
    parent.onmouseover=function(e){
        if(e.target.innerHTML==="1"){
            console.log("红色");
        }else if(e.target.innerHTML==="2"){
            console.log("绿色"); 
        }else if(e.target.innerHTML==="3"){
            console.log("黄色");
        }
    }
 </script>