zoukankan      html  css  js  c++  java

  • DOM事件

    主要内容：

    1.事件流

    2.事件注册

    3.事件对象

    4.事件分类

    5.事件代理

    什么是DOM事件？

  • 点击一个DOM元素

  • 键盘按下一个键

    • 输入框输入内容

    页面加载完成

    1.事件流

    DOM事件流经历的三个阶段(w3c标准)：

    1.捕获阶段(capture phase)：从顶层的window到 事件触发节点的父节点。

    2.触发阶段/目标阶段(target phase)：事件触发节点。

    3.冒泡阶段(bubble phase)：从当前时间节点的父节点 到 顶层的window对象。

    注意:

    1.w3c定义的这三个阶段，也不是所有的浏览器都实现的。比如：在IE的低版本里面就没有『捕获过程』，只有『触发』和『冒泡』过程。

    2.DOM事件中也不是全部都有这三个过程，有些事件是没有冒泡的，比如： 『页面load事件』就没有冒泡。

    关于『事件流』还可以参考(英文)： https://www.w3.org/TR/uievents/#dom-event-architecture

    2.事件的注册与触发

    2.1 事件注册

    2.2 取消事件注册

    2.3 事件触发

    其主体都是一个『DOM元素』

    2.1 事件注册

    eventTarget.addEventListener(type,listener[,useCapture]);

    addEventListener方法时w3c规定的。三个参数：

    参数名 可选参数 描述
    type    事件类型。
    listener    事件处理函数。
    useCapture  可选 是否是『捕获过程』。
    默认情况下DOM事件里面处理的是『冒泡过程』,只有把 useCapture 设为 true 时，它才会处理『捕获过程』

    举个栗子：

    var elem=document.getElementById('div1');
var clickHandler = function(event){
    //TODO
}

elem.addEventListener('click',clickHandler,false);

    2.2 取消事件注册

    eventTarget.removeEventListener(type,listener[,useCapture])

    举个栗子:

    elem.removeEventListener('click',clickHandler,false);//w3c规范
elem.onclick=null;//通常不建议用这种方式

    2.3 事件触发

    事件触发其实有很多方式，比如『点击元素』『按下按键』『程序代码触发 』，这里只讲 『程序代码触发』。

    如何用程序代码触发呢? w3c中规定了这样的API

    eventTarget.dispatchEvent(type);  //在DOM对象上，通过 dispathEvent 传入一个 事件类型 就可以触发。

    浏览器兼容性（IE6，7，8）,

    我们再前面讨论的都是 w3c标准规定的，而有些厂商并没有按照 w3c标准。那么我们在平时编程中，

    遇到低版本的 IE浏览器，应当怎么办呢？ 实际上这些不遵循w3c标准的浏览器厂商也规定了自己的 事件注册，事件取消，事件触发的API。这就是需要我们在平时编程当中做一些兼容。

    在 IE的低版本中(IE6、7、8)

    事件注册与取消

    --attchEvent/detachEvent    注册事件/取消事件

    事件触发

    --fireEvent(e)

    no capture 在IE低版本中，是不存在『捕获阶段』的。

    浏览器兼容性

    注册事件

    var addEvent = document.addEventListener ?
//w3c
    function(elem,type,listener,useCapture){
    elem.addEventListener(type,listener,useCapture);
}:
//IE 6,7,8
    function(elem,type,listener,useCapture){
    elem.attachEvent('on'+type,listener);
};

    取消事件

    var delEvent = document.removeEventListener ? 
//w3c
    function(elem,type,listener,useCapture) {
    elem.removeEventListener(type,listener,useCapture);
}:
//IE 6,7,8
    function (elem,type,listener,useCapture){
    elem.detachEvent('on'+type,listener);
};

    参考资料：
    http://www.w3.org/TR/uievents/
    https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget

    3.事件对象

    DOM元素注册事件，取消事件注册 ，以及触发事件。那么『事件对象』是什么呢？

    当事件被触发时，会调用这个事件处理函数，浏览器引擎会传入一些信息，那么这个信息就代表当前事件的一些状态，这个就是事件的对象。

    我们在编程过程中，会用到事件对象中的一些属性和方法。

    举个栗子(w3c)：

    左图中，event 就是事件对象，当我用鼠标点击元素时，那么可能这个事件对象中包含了鼠标的位置，x,y坐标、

    键盘上的shift键有没有被按下去、等等这样一些信息都可以在事件对象中找到。

    IE低版本，事件对象的兼容处理

    3.1 事件对象的属性和方法

    事件有很多种类型，每一种不同类型的事件是在处理不同的场景，当然这些处理不同场景的事件对象中包含的信息也就不太一样。所以我们将属性和方法时，分为 『通用的』『个性的』。

    事件对象通用的属性和方法

    属性

    属性名 描述 举个栗子
    type 事件类型 click
    target(srcElement) 事件触发的节点  
    currentTarget 当前处理事件节点的函数。
    当我们要给<a>注册一个事件的时候，我们可以不注册到<a>上面，而直接注册到<a>的父节点上面，因为当事件冒泡到<a>的父节点时，我仍然可以处理这个事件。
    当我们把事件注册到<a>的父节点时，那么curreTarget就是父节点。只有当事件处于目标阶段时，target才和currentTarget的值是一样的。    		  

    方法

    方法名 描述 举个栗子
    w3c的
    stopPropagation

    IE低版本的
    event.cancelBubble=true    		 阻止传播。
    有时，我们不想让事件再冒泡上去了，我们就需要调用这样的一个方法。    		 比如我在document这个节点就处理了这个事件,如果我不想让事件传给window节点的话，这时就需要阻止传播。
    w3c的
    Event.preventDefault()

    IE低版本的
    Event.returnValue=false    		 阻止默认行为

    默认行为:

    当我打开一个连接时，连接就会被打开。

    当我双击一段文字时，这段文字就会被选中。

    这些都是浏览器中定义的默认行为，但是有时候我们却不想按照默认的做，而是做一些其他操作，比如:

    当我点击一个连接时，这个连接不会被打开。


    		 只要我在事件处理函数中调用了这个方法，那么他的默认行为就会被阻止。
    stopImmediatePropagation 做了两个事情：
    1.阻止事件向父节点传播
    2.阻止当前节点的后续事件(所有在被阻止的事件 后面 注册的事件 不会被触发)    		  
         

    4.事件分类

    w3c对事件做的分类，每一种分类里面都定义了一些事件。

    MouseEvent

    事件类型 是否冒泡 元素 默认事件 元素例子
    click YES Element focus/activation div
    dbclick YES Element focus/activation div
    mousedown YES Element drag/scroll
    text selection    		 div
    mousemove YES Element None div
    mouseout YES Element None div
    mouseover YES Element None div
    mouseup YES Element context menu div
    mouseenter NO Element None div
    mouseleave NO Element None div

    MouseEvent对象

    属性

    image

    clientX--点到 浏览器 左侧的距离                    

    clientY--点到 浏览器 顶部的距离

    image

    screenX--点到 屏幕 左侧的距离 

    screenY--点到 屏幕 顶部的距离

    ctrlKey,shiftKey,altKey,metaKey

    当MouseEvent事件被触发的时候，如果 键盘中的 Ctrl键 是按下去的，则 ctrlKey的值为true,  否则为false。

    button(0,1,2)

    当MouseEvent事件被触发的时候，当前按下的鼠标是  左键-0  中间键-1  右键-2

    MouseEvent顺序

    鼠标事件是非常灵敏的，在鼠标移动的时候实际上会触发很多mousemove的事件，在移动的过程当中会有很多鼠标事件的产生。那么这些事件之间到底是怎么样的顺序？

    举个栗子：

             『 从元素A上方移过 』

    mousemove—>mouseover(A)—>mouseenter(A)—>mousemove(A)—>mouseout(A)—>mouseleave(A)

              『 点击元素 』

    mousedown—>[mousemove]—>mouseup—>click

    注意:是在鼠标键弹起时触发的click

    实例： 拖拽div

    WheelEvent 鼠标滚轮

    属性

    deltaMode

    deltaX

    deltaY

    deltaZ

    FocusEvent 焦点事件

    事件类型 是否冒泡 元素 默认事件 元素例子 描述
    blur NO Window、Element None window、input 当元素失去焦点时
    focus NO Window、Element None window、input 当元素获得焦点时
    focusin NO Window、Element None window、input 当元素即将获得焦点时（在获得焦点之前）
    focusout NO Window、Element None window、input 当元素即将失去焦点时（在失去焦点之前）

    属性

    relatedTarget    当一个元素失去焦点时，另外一个元素就会获得焦点。  relatedTarget就是  紧接着获得焦点的那个元素。

    InputEvent 输入事件

    当在输入框中输入内容时，会不断的触发事件

    事件类型 是否冒泡 元素 默认事件 元素例子 描述
    beforeinput YES Element update DOM Element input 此时输入框还没有值
    input YES Element None input  

    KeyboardEvent 键盘事件

    事件类型 是否冒泡 元素 默认事件 元素例子
    keydown YES Element beforeinput/input focus/blur div,input
    keyup YES Element None div,input

    属性

    key  - 按下的功能键？数字键

    code

    ctrlKey、shiftKey、altKey、metaKey

    repeat  持续按一个键不松开，repeat的值就是 true

    keyCode

    charCode

    which

查看全文
  • 相关阅读:
    ASP.NET Core 中的配置
    依赖注入简介
    Authoriztion Code Flow
    建立IdentityServer项目
    OAuth2 OpenID Connect概述
    Asp.Net Core 项目运行部署到发布
    javascript Template tmpl
    webform ajax 异步请求
    hosts 文件
    webform 使用富文本编辑器
  • 原文地址：https://www.cnblogs.com/qq-757617012/p/6000284.html
    • Copyright © 2011-2022 走看看