码迷,mamicode.com
首页 > 其他好文 > 详细

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>

 

 

 

滚轮事件:

 

技术分享

技术分享

 

focusEvent

 技术分享

技术分享

技术分享

技术分享

技术分享

 

Event:

技术分享

window对象的Event:

 

技术分享

image对象的Event

技术分享

UIEvent:

技术分享

 

DOM事件

标签:

原文地址:http://www.cnblogs.com/Eyrum/p/4648578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!