DOM事件

时间：2015-07-15 16:46:22 阅读：141 评论：0 收藏：0 [点我收藏+]

标签：

参考：http://www.w3school.com.cn/jsref/dom_obj_event.asp

什么是DOM

技术分享

DOM事件包括：

　　技术分享

--------------------------------------------------------------------------------------------------------------

　　1.事件流：DOM事件处理执行的过程

　　技术分享

　　capture phase 捕获过程从window开始捕获直到目标节点的父节点 p

　　target phase 目标过程事件触发从父节点开始捕获获得 a 节点

　　bubble phase 冒泡过程从父节点 p 冒泡到window

--------------------------------------------------------------------------------------------------------------

　　2.事件注册

　　参考：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget

　　语法：

target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted  ]); // Gecko/Mozilla only

兼容IE

if (el.addEventListener) {
  el.addEventListener(‘click‘, modifyText, false); 
} else if (el.attachEvent)  {
  el.attachEvent(‘onclick‘, modifyText);
}

使用attachEvent方法有个缺点，是this 的值会变成 window 对象而不是触发事件的元素。



elem.onclick=clickHandler;
这种方式只能添加一个方法，不过非常的直观简洁。

取消事件注册：

 

事件触发：


浏览器兼容：





事件对象：




阻止事件传播：

event.stopPropagation() (W3C)

　event.cancelBubble=true; (IE)

event.stopImmediatePropagation() (W3C)

这个方法做了两个事，1.阻止了事件往父节点传播 2.阻止了目标节点的其他事件

默认行为：

什么是默认行为，比如点击链接，链接会被打开双击文字，文字会被选中

阻止默认行为：

Event.preventDefault() (W3C)

Event.returnValue=false (IE)

-----------------------------------------------------------------------------------

事件类型：

事件分类：

DOM事件分类及继承关系；鼠标事件类型、鼠标事件对象、鼠标事件举例；键盘、输入、焦点事件类型、事件对象、事件举例；其他常用事件介绍与举例

技术分享

UIEvent继承自Event,他们都是继承关系 MouseEvent是最常用的事件

技术分享

点击

双击

鼠标按下

鼠标移动

当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。

鼠标离开一个元素当鼠标指针位于元素上方时，会发生 mouseover 事件。

鼠标覆盖元素

鼠标键放开

鼠标进入一个元素和mouseover 的区别：当鼠标进入元素的子元素时 mouseenter 不触发，而mouseover会触发。

鼠标离开一个元素当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与 mouseenter 事件一起使用。

MouseEvent属性：

技术分享

button(0,1,2)指按下鼠标的左键中键或右键

MouseEvent顺序

技术分享

拖拽div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽div</title>
    <style>
        #div1{
            position: absolute;top: 0;left: 0;
            border:1px solid #000;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
        var addEvent= document.addEventListener?
            function (elem,type,listener,useCapture){
                elem.addEventListener(type,listener,useCapture);
            }:
            function (elem,type,listener,useCapture){
                elem.detachEvent(‘on‘+type,listener);
            };

        var elem=document.getElementById(‘div1‘);
        var clientX,clientY,moving;
        var mouseDownHandler=function(event){
            event=event||window.event;
            clientX=event.clientX;
            clientY=event.clientY;
            moving=!0;
        }
        var mouseMoveHandler=function(event){
            if(!moving) return;
            event=event||window.event;
            var newClientX=event.clientX,
                newClientY=event.clientY;
            var left=parseInt(elem.style.left)||0,
                top=parseInt(elem.style.top)||0;
            elem.style.left=left+(newClientX-clientX)+‘px‘;
            elem.style.top=top+(newClientY-clientY)+‘px‘;
            clientX=newClientX;
            clientY=newClientY;
        }
        var mouseUpHandler=function(event){
            moving=!1;
        }
        addEvent(elem,‘mousedown‘,mouseDownHandler);
        addEvent(elem,‘mousemove‘,mouseMoveHandler);
        addEvent(elem,‘mouseup‘,mouseUpHandler);
    </script>
</body>
</html>