JS——事件

var EventUtil = {
    addHandler: function(element,type,handler){
        //绑定事件
        //chrome、firefox、IE9等    addEventListener
        //ie8及其以下    attachEvent
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type]=null;
        },

    removeHandler: function(element,type,handler){
        //解除事件
        //chrome、firefox、ie9    removeEventListener
        //IE8及其以下    detachEvent
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type]=null;
        }
    }
}
var handler=function(){};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);

事件捕获与事件冒泡

事件冒泡：在直系亲属树结构中，点击某个元素，由于冒泡作用，亲属树上的元素凡是添加的事件，都会被触发，从下向上。参数是false

事件捕获：直系亲属树中的事件会从上向下触发，参数是true

ie浏览器只支持事件冒泡，其他浏览器两种都支持，但是一般常用事件冒泡

事件委托

原理是事件冒泡

比如在如下结构中，希望点击每一个li会触发不同的事件。可以选择将click事件添加在ul上，虽然每个li没有绑定事件，但是ul与li在直系亲属树上，因此点击li会触发ul上绑定的click事件，只要对ul的click事件进行判断就能完成需求。

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

事件绑定对性能会有影响，对ul绑定事件只需要一次，若对每个li绑定事件需要五次，使用事件委托可以提高性能。

addEventListener中的Event对象属性与方法

event.type

事件的类型，作用是不同的事件可以共用一个方法函数，只需要对event.type做判断

var eventFun=function(event){
    if(event.type =="click"){}
    else if(event.type == "mouseout"){}
}
ele.addEventListener("click",eventFun);
ele.addEventListener("mouseout",eventFun);

event.target

点击谁谁就是target，事件源 event.currentTarget 事件绑定在谁身上，就指向谁

event.preventDefault()

阻止默认行为，比如点击a标签会跳转到其他页面，如果对a标签添加事件，事件句柄为preventDefault方法，阻止自动跳转

event.stopPropagation()

阻止事件冒泡或者捕获

event.clientY pageY screenY

clientY指浏览器顶部底边到鼠标的位置，不计算滚动轴的距离

pageY指浏览器顶部底边到鼠标的位置，计算滚动轴的距离

screenY指屏幕顶部到鼠标位置

IE8(attachEvent)中的Event对象属性与方法

event.type

事件类型

event.returnValue

event.returnValue = false，阻止默认行为，等同于 event.preventDefault

event.cancelBubble

event.cancelBubble = true 取消事件冒泡，等同于 event.stopPropagation

event.srcElement

事件源，同target

Event对象跨浏览器兼容性

getTarget:function(event){
    return event.target || event.srcElement;
},

preventDefault: function(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue=false;
    }
},

stopPropagation: function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble=true;
    }
}

事件类型

UI事件类型

load 当页面完全加载后在window上面触发，可用于img标签，，

unload 用户从一个页面切换到另一个页面

resized 窗口大小发生变化时触发

scroll 滚动时触发

焦点事件

blur 元素失去焦点时触发

focus 元素获取焦点时触发，不支持冒泡

focusin 元素获取焦点时触发，支持冒泡，同focus

focusout 元素失去焦点时触发，同blur

鼠标事件

click 单击时触发在当前事件下，event.shiftKey event.ctrlKey event.altKey event.metaKey表示按下按键并点击鼠标时的按键

dblclick 双击时触发

mousedown 鼠标按下时触发 event.button属性，在当前事件下，按下鼠标左键返回0，按下鼠标中键返回1，按下鼠标右键返回2

mouseup 鼠标松开时触发

mousemove 鼠标移动时触发(重复执行的事件要注意代码优化的问题)

mouseout 鼠标离开目标元素或者其子元素时触发

mouseover 鼠标进入目标元素或者其子元素时触发

mouseenter 只能进入目标元素时触发

mouseleave 只能离开目标元素时触发

键盘事件

keydown 任意键按下时触发

keyup 释放时触发，支持keyCode(键码)

keypress 按下字符键触发,支持charCode(ASCII码)

textInput event.data返回打印的内容

变动事件

DOMNodeInserted DOM结构中任意元素被添加就会触发

DOMNodeRemoved DOM结构中任意元素被删除就会触发

DOMSubtreeModified DOM结构中发生任何变化都会触发

DOMNodeRemovedFromDocument 从文档中移除之前被触发

DOMContentLoaded 在DOM树之后就会触发，不理会图像，JavaScript文件、CSS文件或其他资源是否已经下载，速度比load快

haschange 一定给window对象添加，地址栏中#号后面的指变化时触发

触摸事件

touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发

touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动。

touchend：当手指从屏幕上移开时触发。

touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。

上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlkey和metaKey。

除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。

（1）touches：表示当前跟踪的触摸操作的Touch对象的数组。

（2）targetTouches：特定于事件目标的Touch对象的数组。

（3）changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

adve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——事件

目录事件详解事件定义第一种方式第二种方式(DOM0级事件)第三种方式(DOM2级事件)事件解绑IE事件处理程序添加事件移除事件跨浏览器事件处理程序事件捕获与事件冒泡事件委托addEventListener中的Event对象属性与方法event.type event.targetevent.preventDefault() ...
复制链接

扫一扫