zoukankan      html  css  js  c++  java
  • DOM事件

    DOM需知晓的几个点:

    1.DOM事件的基本概念:DOM事件的级别

    2.DOM事件模型:指的就是捕获和冒泡

    3.DOM事件流

    4.DOM事件捕获的具体流程

    5.Event对象的常见应用

    1.事件级别:

    DOM标准定义的级别:

    DOM0:

         DOM0 跟事件相关的一个标准就是:

          js写法: element.onclick = function(){}   、

          html写法: <button οnclick="add()"></button>

    DOM2:

        element.addEventListener('click',function(){},false);

        其中的true,表示这个事件是在捕获的时候触发。

        false 就是在冒泡的时候触发。

    DOM3:

         element.addEventListener('keyup',function(){},false)

        这种事件的定义方式,事件类型增加了许多,比如说 鼠标事件,键盘事件等等。

    2. 事件模型:捕获和冒泡

    捕获是从上往下,冒泡是从当前事件往上。

    3.事件流:就是浏览器在为这个当前页面与用户做交互的过程中。用户点击了鼠标左键,这个左键是怎么传递的,它又怎么响应的。

    第一阶段:捕获。事件通过捕获到达目标元素(目标元素既目标阶段)。

    第二阶段:目标阶段。 比如说用户当前点击了这个按钮,这个按钮就是目标阶段

    第三阶段:冒泡 。 目标阶段通过冒泡上传到window对象

    4.DOM事件捕获的具体流程:

        捕获是从上到下的这么一个过程。第一个接收到事件的对象是window ,接着就是document

    window——> document ——> html标签——>body——> ...——>一直到目标元素

    document.documentElement 它是专门一个表示节点对象的。

    5.Event对象的常见应用:

       Event对象是事件响应中一个很重要的对象。因为我们经常会去获取用户交互的一个参数。

       以下5个是常见却很容易出错的。

     1)、 event.preventDefault();    : 阻止默认事件。

      比如说,一个a标签,a标签绑定了一个事件。那么在响应函数中,如果设置了event.preventDefault() . 就阻止了a标签的一个默认的跳转行为。

    2)、event.stopPropagation() : 阻止冒泡的一个行为。

      比如说,我父元素绑定一个事件,我子元素也绑定一个事件。这时我想子元素执行子元素的事件,父元素执行父元素的事件。

    如果你阻止冒泡,当单机子元素的时候,按照冒泡的原理,父元素也会被响应。这个时候就应该添加一个阻止冒泡。

    3)、event.stopImmediatePropagation() : 

      比如说,一个按钮绑定了两个click事件。click1 和click2. 当我想通过优先的方式,当我想执行click1的时候不要执行click2了

    那么怎么办呢??这时候在click1 事件中加入这么一句,它就能成功的阻止click2 事件的执行。

    4)、event.currentTarget  : 值得就是 当前所绑定的事件对象(下面例子中的父元素)

    5)、 event.target  :当前被点击的元素  (下面例子中的子元素)

    eg:事件委托。

    比如说 给你一个for循环,给一个dom注册了事件,要怎么优化。

    一个父元素有10个子元素,你又不想给10个子元素都绑定一个click元素。那么只要在父级元素上绑定一个事件就可以了。

    这个时候就可以使用事件委托。将子元素的事件转移到父元素身上。然后在绑定事件。然后再响应的时候,区分是哪个元素被点击。那么是怎么区分是哪个子元素被点击的呢?

    这个时候就是target上场的时候。

  • 相关阅读:
    [Python]jieba切词 添加字典 去除停用词、单字 python 2020.2.10
    假期学习【十一】Python切词,以及从百度爬取词典
    Cocos2D-x中关于CREATE_FUNC宏的用法
    Cocos2D-x中关于do{}while(0)和CC_BREAK_IF的用法
    Cocos2d-x学习笔记(三十三)之常用的宏
    Cocos2d-x学习笔记(三十二)之图片渲染
    Cocos2d-x学习笔记(三十一)之 内存管理
    Cocos2d-x学习笔记(三十)之 游戏存档
    Cocos2d-x学习笔记(二十九)之 声音
    Cocos2d-x学习笔记(二十八)之 滚动列表类CCListView
  • 原文地址:https://www.cnblogs.com/yang1997/p/12108563.html
Copyright © 2011-2022 走看看