第五章---事件的原理

事件

CSS样式：

pointer-events:none

不接收点击事件

事件原理（捕获，目标，冒泡）

1.捕获阶段

特点：由外向内，

2.目标阶段

3.冒泡阶段

特点：由内向外

addEventListener

DOM对象.addEventListener(“时间类型”,事件出发后的回调函数，是否捕获阶段触发/配置对象)

once:true

addEventListener 第三个参数{once:true}
仅接收一次事件

事件触发时，会遇到两种情况：
1.事件侦听的对象2.事件最终触发的目标对象
如果监听的DOM没有子元素，那么事件侦听的对象，和最终触发的目标对象是一致
如果监听的DOM有子元素，而恰巧点击到这个子元素上，侦听的对象就是外面的父元素，目标点击的对象就是子元素。
事件侦听的对象 e.currenTarget this
事件最终触发的目标对象 e.target e.srcElement(IE)

当容器内有多个子元素需要侦听事件时，我们只需要给父元素侦听事件，通过e.target判断被点击到的实际目标对象，这种方法我们叫事件委托，把子元素的事件委托给父元素
例：

  div1.addEventListener("click",clickhandler1);
  div2.addEventListener("click",clickhandler2);
  div3.addEventListener("click",clickhandler3);

  function clickhandler1(e){
      console.log("div1--","e.target:",e.target,"e.srcElement:",e.srcElement,"e.currentTarget:",e.currentTarget,"this:",this)
      console.log(e.target)
  }

  function clickhandler2(e){
      console.log("div2--","e.target:",e.target,"e.srcElement:",e.srcElement,"e.currentTarget:",e.currentTarget,"this:",this)
    
  }

  function clickhandler3(e){
      console.log("div3--","e.target:",e.target,"e.srcElement:",e.srcElement,"e.currentTarget:",e.currentTarget,"this:",this)
      e.stopPropagation(); 
  }

.stopPropagation

停止继续冒泡
e.preventDefault
去除默认事件行为（比如取消邮件菜单，提交表单跳转。。。）

e.stopImmediatePropagation( ) ;

如果DOM对象针对同一事件类型，侦听多次，执行不同的事件函数，在某个事件函数中使用该方法，可以组织后续的方法执行。事件谁先侦听谁先执行。

.removeEventListener

DOM对象.removeEventListener(“事件类型”，要删除的侦听事件执行函数)；

事件的区别

事件种类

onclick, addEventListener attachEvent ,removeEventListener detachEvent

  document.onclick=function(){
            // 删除事件
   document.onclick=null;
  }

  document.addEventListener("click",clickHandler);
  document.attachEvent("onclick",clickHandler);

  function clickHandler(){
      document.removeEventListener("click",clickHandler);
      document.detachEvent("onclick",clickHandler);
  }

标签中 事件的函数必须写成执行函数
1、onclick会造成回调地狱
2.addEvenListener允许捕获阶段触发，但是onclick不允许捕获阶段触发
3.onclick仅允许执行最后一次赋值的函数，事件只能独立执行一个函数。addEventListenter可以执行多个函数
4.addEventListener支持自定义事件的侦听和抛发，on没有自定义事件侦听
5.on支持所有浏览器，addEventListener支持ie8以上
6.on代码写起来简单容易理解编程，addEventListener适用于函数式编程

------案例

 var n=1;

  div1.addEventListener("click",clickHandler1);
  div1.addEventListener("click",clickHandler2);
  div1.addEventListener("click",clickHandler3);

  function clickHandler1(e){
      console.log("a")
      div1.removeEventListener("click",clickHandler1)
  }

  function clickHandler2(e){
      console.log("b")
      if(n===2){
          div1.removeEventListener("click",clickHandler2)
      }
  }

  function clickHandler3(e){
      n++;
      console.log("c")
  }

案例---- 顺序执行单击事件

  var bn1=document.querySelector("#bn1")
  var bn2=document.querySelector("#bn2")
  var bn3=document.querySelector("#bn3")
   bn1.addEventListener("click",clickHandler);

        function clickHandler(e){
            if(this===bn1){
                bn2.removeEventListener("click",clickHandler);
                bn2.addEventListener("click",clickHandler);
            }else if(this===bn2){
                bn3.removeEventListener("click",clickHandler);
                bn3.addEventListener("click",clickHandler);
            }else{
                console.log("aaa")
            }
        }



        bn.addEventListener('click',clickHandler,true);

Event事件

change

主要针对表单，当表单或者表单元素发生改变，在失焦后触发该事件
所有的表单都必须写name，checkbox和radio都必须写value
可以针对表单form和其表单的元素侦听

error

错误

load

加载完成

 var img=document.createElement("img");
            //创建Img标签 
         var img=new Image();
         img.src="./img/1.jpg";
         document.body.appendChild(img);
         img.addEventListener("load",loadHandler);
         img.addEventListener("error",errorHandler)
        //  console.log(img.width);//1、必须放在body中，2、必须要有宽高

         function loadHandler(e){
             console.log(this.width);
        }

         function errorHandler(e){
             console.log(e)
         }

注意：offsetWidth clientWidth scrollWidth 获取的前提条件1、必须放在body中，2、必须要有宽高

案例—预加载图片

var n=2;
var arr=[];
function loadImage(){
    var img=new Image();
    img.addEventListener("load",loadHandler);
    img.src="./img/"+n+".jpg";
}

function loadHandler(e){
    this.removeEventListener("load",loadHandler)
    arr.push(this);
    n++;
    if(n>6){
        loadFinishHandler();
        return;
    }
    loadImage();
}

function loadFinishHandler(){
    arr.forEach(function(item){
        console.log(item.src)
    })
}

loadImage();

reset —针对表单

重置 侦听重置表单事件

submit —针对表单

提交 侦听提交表单事件

 var form=document.querySelector("form");
     form.addEventListener("submit",submitHandler);
     form.addEventListener("reset",submitHandler);


     function submitHandler(e){
             e.preventDefault();
             console.log(e)
     }

resize -----针对window

重设大小 window的窗口发生改变时，

案例—图片根据窗口大小改变

window.addEventListener("resize",resizeHandler);

function resizeHandler(e){
    document.documentElement.style.fontSize=document.documentElement.clientWidth/screen.width*100+"px";
}

select

选择 针对input文本框或者textarea文本域使用，当选择其中文字时触发

  var input=document.querySelector("input");
  input.addEventListener("select",selectHandler);

  function selectHandler(e){
      console.log(e)
  }

scroll

滚动条 当滚动条滚动时触发 任何具备有滚动条的都可以触发。窗口的只能使用document或者window

鼠标事件

click 点击
dblclick 双击
mousedown 按键鼠标键
mouseup 释放鼠标键
mouseover 鼠标滑入
mouseout 鼠标滑出
mouseenter 鼠标进入
mouseleave 鼠标离开
mousemove 鼠标移动
contextmenu 右键菜单

mouseover 鼠标滑入
mouseout 鼠标滑出
mouseenter 鼠标进入
mouseleave 鼠标离开

mouseover mouseout 可以冒泡，子元素可以收到该事件并且触发后会冒泡上来
子元素也会触发该事件
mouseenter mouseleave 只执行监听当前元素的进入和离开事件，对子元素不冒泡

e 就是鼠标点击，系统抛发的鼠标事件
e.type 鼠标事件类型
e.altkey 按着alt点击
e.shiftkey 按着shift点击
e.metakey 按着command点击 苹果
e.ctrlkey 按着ctrl点击

主要用于 mousedown mouseup
e.button: 0
e.buttons: 0 监听的键比较多
e.which:0

e.target 目标对象
e.srcElement 目标对象
e.currentTarget 监听对象

坐标

兼容写法，相等 鼠标相对视口左上角坐标
clientX: 242
clientY: 80
x: 242
y: 80

如果定位时与offsetX，offsetY相同，如果非定位时相对定位父元素，如果父元素没有定位就继续向上直到body
layerX: 34
layerY: 28

相对目标元素（e.target）的左上角坐标
offsetX: 34
offsetY: 29

针对mousemove 事件 针对上一次移动的距离 正数向下和向右，负数向上和向左
movementX: 0
movementY: 0

绝对于页面左上角的距离
pageX: 242
pageY: 236

相对于屏幕左上角的距离
screenX: 242
screenY: 191

FocusEvent和InputEvent

FocusEvent

e.relatedTarget 上一次聚焦的对象
所有表单元素，超链接 鼠标点击聚焦，tab键切换聚焦

不能委托给父元素做事件
focus 聚焦
blur 失焦

表单做聚焦事件使用，标签元素可以委托给父元素的时间方式
focusin
focusout

input输入框

e.data 本次输入的数据
e.inputType : 插入输入法文本
e.isComposing 是否开启输入法

节流
先执行一次函数后，在一定的时间内不再执行这个函数，时间过去后再次执行
防抖
进入后延迟一定时间后再执行这个函数

keybordEvent

按键事件
e.code: “KeyZ”
e.key: “z”
e.keyCode: 90 键码
e.which: 90 键码

keydown 按下键
keyup 松开键

滚轮事件

其他浏览器 mousewheel
deltaX: -0
deltaY: -5
deltaZ: 0
detail: 0
wheelDelta: 15
wheelDeltaX: 0
wheelDeltaY: 15

火狐 DOMMouseScroll

detail: 1