11. 事件

事件

事件：对某个元素的某种操作

事件元素:触发事件的元素

事件类型:某种动作，单击，移入，移除

事件对象：当某个事件触发时产生的对象就是事件对象

​ 1.事件对象:(非必须)在事件操作中，事件分为两类
​ a.鼠标操作 b.键盘操作

​ 2.事件对象携带着相关事件类型的所有属性和方法

​ 3.事件对象必须得有事件才会产生

<script>
    var oTiger = document.querySelector("#tiger");
    
    document.onclick = function(){
        // 回忆offset读写的语法
        // 写:必须是带px的字符串
        oTiger.style.top = oTiger.offsetTop - 100 + "px";

        setTimeout(function(){
            oTiger.style.top = "500px";
        },2000);
    }
</script>

事件对象的兼容：

每个事件函数天生有一个参数叫event，它是事件对象，如果向修改event的名称，事件函数的第一个参数就是用来修改的

var e = evt || event;

event使用前提，必须有事件 不同的对象产生的事件不同

案例：小老虎跳一跳

坐标：

page:针对于整个页面的左顶点 常用

console.log("page",e.pageX,e.pageY);

client:针对于可视窗口的左顶点 不常用

console.log("client",e.clientX,e.clientY);

offset:针对于父元素的左顶点 常用于拖拽

 console.log("offset",e.offsetX,e.offsetY);

案例：跟随鼠标移动

<script>
    //事件元素:大白板
    //事件类型:onmousemove
    //事件对象:获取鼠标的坐标,将坐标赋值给box的left和top
    // (一个元素要在页面发生位移，本质就是在修改left和top)

    var oTiger = document.querySelector("#tiger");
    //给整个页面绑定：鼠标移动事件
    document.onmousemove = function(evt){
       //兼容的方式获取event对象
        var e = evt || event;
        // 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。
        //注意，如果想通过 style.left 来设置属性，一定要给 box1开启绝对定位。
        oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px";
        oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px";
    }
</script>

DOM事件流

事件传播的三个阶段是：事件捕获、事件冒泡和目标。

• 事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。

• 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

• 事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。

事件捕获

addEventListener可以捕获事件：

   box1.addEventListener("click", function () {
        alert("捕获 box3");
    }, true);  //参数为true，代表事件在捕获阶段执行。

重点：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。

事件冒泡

冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制

注意事项:
并不是所有事件都会产生冒泡问题 onfocus onblur onload不会产生冒泡问题。意思是，事件不会往父元素那里传递。

检查一个元素是否会冒泡，可以通过事件的以下参数：

    event.bubbles
    //如果返回值为true，说明该事件会冒泡；反之则相反。

阻止事件冒泡

   w3c的方法： event.stopPropagation();
   IE10以下则是：event.cancelBubble = true

兼容写法

event = event || window.event;
e.stopPropagation?e.stopPropagation():e.cancelBubble = true; 

如何阻止浏览器的默认行为

  事件对象.函数名或事件对象.属性名

evt.preventDefault();

兼容写法

evt.preventDefault?evt.preventDefault():e.returnValue=false;