事件

作者: 不知道取个什么昵称不如娶个媳妇 | 来源:发表于2018-09-03 19:18 被阅读0次

    事件,就是人与浏览器交互的过程,例如点击按钮,输入文字,等等。。

    事件驱动模型:

        事件(操作,动作)

        事件类型(具体的动作类型)

        事件源(事件发生的地方)

        事件监听器(监听事件发生的程序)

        事件处理程序(事件响应程序---函数)

    事件句柄:

        DOM0(DOM level 0)事件绑定方式---将事件源元素与事件处理程序关联起来;

    事件对象(Event对象)

      event对象代表事件的状态,比如:光标坐标,键盘的按键,事件所发生的位置等等

      如何获取事件对象?

              标准:事件函数的第一个参数即function(event){}

              非标准:(IE9之前)window.event

              兼容写法:event = event || window.event

      鼠标属性:

              event.clientX

              event.clientY

              ---------------------------->可见视口中的坐标

              event.pageX

              event.pageY

              ---------------------------->文档中的坐标

              event.offsetX

              event.offsetY

              ----------------------------->事件源元素坐标系中的坐标

      键盘属性:

              event.which||event.keyCode

              ----------------------------->获取键盘按钮的“虚拟键盘码”

              event.ctrlKey

              event.altKey

              event.shiftKey

              --返回boolean值,true表示对应按键被按下并保持按下状态

    事件流

            事件流分三个阶段

              a.事件捕获阶段

              b.处于目标阶段(event.target)

              c.事件冒泡阶段

    捕获阶段:

    document----->html----->body----->div----->div----->ul----->li(处理目标)(处于目标阶段)

    冒泡阶段

    document<-----html<-----body<-----div<-----div<-----ul<-----li(处理目标) (处于目标阶段)

    默认情况下,浏览器中事件的处理都是按照冒泡的方式处理,集中式处理事件。

    事件冒泡

    从事件源元素开始向祖先元素作事件传播的行为

    从最确定的元素向最不确定的元素作事件传播行为

    在事件冒泡的过程中,可以使用event.target来获取最初触发事件的事件源元素

    兼容ie写法

    var event = event.target || event.srcElment

    事件委派:

    利用事件冒泡,将后代元素上的事件处理委派给祖先元素。在事件委派过程中,可以使用event.target来获取最初触发事件的事件源元素。事件委派适合未来的元素(动态创建添加的元素)

    阻止事件冒泡:

    由于事件冒泡会带来副作用,所以需要阻止事件冒泡

        标准:event.stopPropagation();

        非标准:event.cancelBubble = true;

         兼容写法(三目运算符的神奇使用)

    event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;

    事件捕获(反向冒泡,IE9之前的浏览器不支持)

    从不确定元素向最确定元素作事件传播的行为

    从祖先元素到子孙元素作事件的传播行为

    添加事件监听:

    element.addEventListener(type,callback[,useCapture])

        type -- 事件类型字符串,不需要“on”前缀

        callback -- 回调函数 事件处理回调函数

        useCapture -- 可选参数,是否使用事件捕获方式处理事件,默认为false

                                false:冒泡事件   true:事件捕获

    IE9之前添加事件监听:

        element.attachEvent(type,callback)

        --type事件类型字符串,需要添加"on"前缀

        --callback事件处理函数:事件处理程序回调函数

    注册事件监听方式:

        1.添加事件监听(addEventListener)--DOM2(推荐)

        2.事件句柄(onclick,onmousemove...)--DOM0

        3.HTML标签的事件属性 -- DOM0(不推荐使用)

    相关文章

      网友评论

        本文标题:事件

        本文链接:https://www.haomeiwen.com/subject/tepiwftx.html