事件

事件

事件：用户在网页中的行为叫做事件

学习事件的目的：希望能自定义的让用户在网页中进行某种行为之后，去执行写好一段代码 
语法：事件源.on事件类型 = 函数
    事件源：用户在触发事件的时候使用哪个标签
    事件类型：用户在进行哪种行为
    函数：事件处理程序（不是函数调用）

事件类型

1.鼠标类：
         click                  单击
         dblclick               双击
         mouseover/mouseenter   移入
         mouseout/mouseleave    移出
         mousedown              按下
         mouseup                松开
         mousemove              移动
         mousewheel             滚轮滑动事件
         contextmenu            鼠标右击
2.键盘类：
         keydown    键盘按下   不松开就一直触发
         keyup      键盘抬起   经常使用
         keypress   敲击键盘   是按下
3.表单类：
         fours     获取焦点
         blur      失去焦点
                       注意：焦点事件（fours/blur）只针对文本框和文本域
         change    下拉框选项发生改变的事件
         submit    提交表单  
                       注意：必须给form标签绑定
                          事件什么时候触发:当表单域中的提交按钮（input的type为submit或者，
                       button的type为submit）被点击后或者回车后触发
         input     实时监听文本框或者文本域中内容的事件
 4.window类：
         load      加载事件  当页面中所有的资源加载完成后才会触发
         scroll    滚动条滚动事件  当滚动条滚动了触发事件
         resize    窗口大小改变事件  当窗口大小大小改变了触发事件

事件流

 事件流：事件从开始发生到执行结束的这个流程
 捕获阶段：当我们点击小div时，系统会先在整个文档中先找到当前触发事件的这个标签，
     右外向内找，事件流中的第一阶段：捕获阶段（找到目标标签）
 目标阶段：执行目标元素对应的事件函数
 冒泡阶段：当目标元素的事件执行结束后，要经历外面的标签再出去 
 默认情况下，目标元素所在的父标签和其他祖宗标签的事件会在冒泡阶段执行

事件的绑定方法

事件监听器：
          标签.addEventListener（事件类型，事件处理程序，是否在捕获阶段执行（可选，默认是false））
          可以让事件在捕获阶段执行（非目标元素的事件）
          可以让同类型的事件绑定多次并不会覆盖

事件的解绑方法

1.绑定事件的本质是在干什么？将事件类型赋值为一个函数，存到内存中
2.为什么要解绑？有些事件在执行结束后不要了
3.怎么解绑？
    根据绑定方式不同，解绑方式也是不同的：
    1.如果使用标签.on类型绑定的，给标签.on类型 = null
    2.如果使用事件侦听器绑定的，就使用 标签.removeEventListener(事件类型, 对应函数)
    如果绑定的函数是匿名函数，这个事件是解绑不了的

事件对象

事件对象：系统在调用事件函数传入一个了一个实参对象，这个对象就是事件对象
事件对象的作用：记录了跟当前事件相关的很多信息
获取事件对象：
            window.event
            在正常的浏览器中，通过事件函数的第一个参数，也是可以获取到事件对象的，
            在低版本浏览器只能使用window.event
事件对象一定会在事件中
    1.通过window.event来来接收
        box.inclick = function(){
            console.log(window.event)
        }
    2.通过一个形参来接收
        box.inclick = function(e){
            console.log(e)
        }
        box.inclick = function(e){
            console.log(event)
        }
  结果都是一个事件对象
  window.event ==== e ==== event

结果：

阻止事件冒泡

阻止事件冒泡：事件对象.cancelBubble = true
例：
    big.onclick = function（）{
        var e = window.event
        e.cancelBubble = true
    }

获取事件类型

获取事件类型：事件对象.type  代表当前的事件类型
例：
    btn.onclick = function(){
        console.log(window.event.type)  //事件类型为click
    }

获取鼠标按键信息

获取鼠标按键信息：事件对象.button   代表当前鼠标按键信息：左键为0，滚轮为1，右键为2
例：
    btn.onmouseover =function（）{
        console.log（window.event.button）
    }

获取键盘按键信息

键盘按键码：事件对象.keyCode
例：
    window.onkeydown = function(){
        console.log(window.event.keyCode)
    }
    每个字母和数字符号的按键码大致会遵循阿斯克码，但是每台计算机可能结果是不一样，
小写就是小写的阿斯克码，小写就是大写的阿斯克码   
低版本火狐浏览器按键码有兼容问题 
解决方法：var keycode = e.keycode || e.which
    键盘码：数字和字母他们的按键码就是阿斯克码；回车键的按键码13；空格的阿斯克码32；
左上右下的按键码：37 38 39 40
组合键 - 有些键单独是没有什么作用的，通常会配合其他键才能实现功能：ctrl alt shift
事件对象中提供了几个属性用于判断是否按住了这几个组合键
    ctrl - 事件对象.ctrlKey
    alt - 事件对象.altKey
    shift - 事件对象.shiftKey
    

获取鼠标点击的位置

相对于标签：
            事件对象.offsetX
            事件对象.offsetY
相对于浏览器窗口：
            事件对象.clientX
            事件对象.clientY
相对于这个页面：
            事件对象.pageX
            事件对象.pageY

拖拽

拖拽：在div上按下鼠标，移动鼠标，移动过程中让div跟随鼠标移动
绑定按下事件 - box
    获取按下的为位置
    绑定移动事件 - window
        获取移动的位置
        计算left和top = 移动位置 - 按下的位置
        限制left和top的最大值和最小值
        将left和top设置给div
绑定松开事件 - window
    解绑mousemove事件 - window

阻止默认行为

默认行为：自带的功能
有些标签不需要使用js事件操作，自动就能实现某些功能，例如a标签、form、鼠标右击
阻止默认行为：
            1.阻止默认行为 - 事件对象.returnValue = false
                e.returnValue = false
            2.在事件函数的末尾，添加  return false
                return false
在阻止默认行为的过程中，如果在阻止默认行为的代码之前有报错，是阻止不了的

事件委托

事件委托：利用事件冒泡原理，让父标签代替子标签处理事件
    事件委托怎么做？给父标签绑定事件，在父标签事件中，通过事件对象.target获取到当前触
发事件的目标子标签，处理这个行为
好处：
1.提高绑定的效率
2.动态添加的子标签也能具备事件