11事件上及回顾BOM,DOM

回顾
    BOM(bowser object model)浏览器对象模型
        1.window        窗口对象(全局的变量及函数都是属于window(global))
        2.location        地址栏对象(获取地址栏的内容 使用地址栏跳转页面)
            属性:    hash,search,host,hostname,port,protocol,origin,href
            方法:    assign,replace
        3.history        历史对象
            属性:    state,length
            方法:    forward,back,go,pushState,replState
        4.screen        屏幕对象
            属性:    width,height,availWidth,availHeight
        5.navigator    导航对象
            属性:    userAgent
        6.frames        窗口(window)

    DOM(document object model)文档对象模型
        1.document 文档对象(整个html文档)
        2.element元素对象(所有标签)
        3.attribute属性对象(所有标签里的属性)
        4.text文本文档(显示的文本)

    dom里的知识点
        空文本(换行符.制表符,空格..) 也是一个文本节点
        属性如果是自身自带的属性可以直接点出来(input.value,img.src,a.href...)
        dom会操作对应的html的内容,当你的html内容发生变化,那么对应的页面就会重新渲染.会造成大量的重绘和回流.(后续dom操作要被舍弃(效率))

    重绘和回流(回流必定会产生重绘)
        重绘对应一个元素操作(不改变他的宽高和对应的位置 而改变其他的样式)
        回流对应的元素操作(改变对应的元素所有的内容 宽高和对应的位置都会发生变化)

事件
    概述:事件是一个异步机制.它相当于一个执行者执行--观察者观察 --- 处理函数执行 这个流程称为事件
    组成
        事件名         (内置)
        执行对象        (元素对象)
        处理函数        (自定义函数)
        观察者        (js的事件引擎)

    在js中书写的事件,它的观察者都是事件引擎.我们需要关注就是前面的三个内容(事件名,执行对象,处理函数)

事件的声明书写方式
    内联模式(在标签内部)
    脚本模式(在script中常用)

内联模式和脚本模式的区别
    内联模式里面的函数需要手动调用 而对应的脚本的模式的处理函数自动调用
    内联模式里面的函数调用的this指向window对应的脚本模式里面的处理函数的this指向当前的调用者

事件名的分类
    鼠标事件 (鼠标触发的   mouse)
        click        单击事件
        bdlclick        双击事件
        mousedown    按下
        mouseup        弹起
        mouseenter    移入
        mouseleave    移出
        mouseover    移入
        mouseout    移出
        mousemove    移动
        contextmenu    右键点击
    注意事项
        click和对应mousedown和mouseup的执行顺序(mousedown -- mouseup -- click)
        mouseenter(mouseleave)和mouseover(mouseout)的区别 (mouseenter 子元素不会触发mouseover子元素会触发)

    键盘事件
        kedown        按下
        keyup        弹起
        keypress        字符串(除功能键的其他键)
    注意事项
        执行顺序 keydown -- keypress --keyup
        keypress 一定会触发keydown

HTML事件(HTML中自带的一些事件(只能用于专门的HTML))
    window的事件
        加载事件(load)
        卸载事件(unload)
        关闭窗口的事件(onclose)
        打印之前调用的事件(onbeforeprint)
        卸载之前调用的事件(onbeforeunload)
        滚动栏发生的事件(onscroll)
    表单的事件
        submit    表单提交事件
        reset    表单重置事件
        select    内容被选中(只针对输入框和文本域)
        change    表单的value值发生变化
        input    可输入的表单标签里面进行输入
        blur    失去焦点
        focus    获取焦点
        
    相关聚焦与失焦
        focus    聚焦的方法
        blur    失焦的方法

event事件源对象
    概述:event被称为事件源对象,他是一个全局的内置对象(属于window),它里面包含了一些关于事件执行的相关属性.
    
处理函数中的Arguments
    处理函数也是一个函数,函数就具备一个arguments的属性.arguments是一个伪数组.对应的函数里面也拥有arguments
    从上述代码可得到对应的事件执行处理函数里面会传递一个参数,这个参数的类型是一个event.这个处理函数的arguments数组里面只有一个元素.
    
event的常用属性
    鼠标坐标的相关属性
        screenX        表示鼠标离屏幕的x距离
        screenY        表示鼠标离屏幕的y距离
        pageX        表示当前的鼠标离页面的X距离
        pageY        表示当前鼠标离页面的y距离
        clientX        表示鼠标离页面可视区的x距离(包含卷起部分)
        clientY        表示鼠标离页面可视区的y距离(包含卷起部分)
        offsetX        表示鼠标离父元素偏移的x距离
        offsetY        表示鼠标离父元素偏移的Y距离

    按钮辅助的相关属性
        ctrlKey        是否按下了ctrl键
        altKey        是否按下了alt键
        shiftKey        是否按下了shift键

    鼠标相关属性
        button        按下时哪个键

    事件及相关触发的属性
        type        当前的事件类型
        target        当前事件的触发对象
        currentTarget    表示加事件的元素

    键盘相关的属性
        key表示当前按下的键的字符(区分大小写)
        keyCode(在keydown里面不区分大小写 全部都是大写的ascii码)
        code(key+大写的字符)
        charCode(在keypress里面才管用 区分大小写 返回对应的ascii码)

事件委托机制(事件代理)
    概述:将对应的事件委托给对应的父元素,然后通过对应的额.target获取实际的触发元素进行操作

事件委托的运行场景
    在一个父元素里面有个子元素要添加相同的事件的时候