DOM事件

最新推荐文章于 2024-06-08 16:17:53 发布

weixin_30770495

最新推荐文章于 2024-06-08 16:17:53 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xjuan/p/5438331.html

事件流

事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）
事件捕获：不太具体的节点应该更早接收到事件而最具体的节点最后接收到事件
IE——事件冒泡流

事件对象：在触发DOM上的事件时都会产生一个对象

DOM中的事件对象

type属性用于获取事件类型
target属性用于获取事件目标
stopPropagation 阻止事件冒泡
preventDefault() 阻止事件的默认行为

IE中的事件对象

type属性用于获取事件类型
srcElement属性用于获取事件的目标
cancelBubble属性用于阻止事件冒泡设置为true表示阻止冒泡设置为false表示不阻止冒泡
returnValue属性用于阻止事件的默认行为设置为false表示阻止事件的默认行为

事件处理程序

html事件处理程序

html事件缺点：html和js紧密耦合在一起

<input type="button" value="按钮1" id="btn1" onclick="alert('hello')">
<input type="button" value="按钮2" id="btn2" onclick="showMes()">

DOM0级事件处理程序

较传统的方式：把一个函数赋值给一个事件的处理程序的属性
用的比较多的方法简单跨浏览器的优势

btn3.onclick = function() {
     alert('这是通过DOM0级添加的事件');
}
btn3.onclick = null;

DOM2级事件处理程序

DOM2级定义了两个方法：用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数、布尔值

var btn4 = document.getElementById('btn4');
    btn4.addEventListener('click',showMes,false);   
    // false冒泡
    btn4.addEventListener('click',function(){
        alert(this.value);
    },false);
    删除事件
    btn4.removeEventListener('click',showMes,false);

IE事件处理程序

attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数
不使用第三个参数的原因：IE8及更早的浏览器版本只支持事件冒泡

var btn5 = document.getElementById('btn5');
    btn5.attachEvent('onclick',showMes);
    btn5.detachEvent('onclick',showMes);

跨浏览器的事件处理程序

var eventUtil = {
        // 添加句柄
        addHandler: function(element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler);
            } else {
                element['on' + type] = handler;
            }
        },
        // 删除句柄
        removeHandler: function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false)
            } else if (element.detachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        getEvent: function(event) {
            // event = event || window.event;
            return event ? event : window.event;
        },
        getType:function(event){
             return event.type;
        },
        getElement: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;
             }
        }

    }
eventUtil.addHandler(btn5, 'click', showMes);
    eventUtil.addHandler(box, 'click', function(){
        alert('父盒子');
    });
    eventUtil.addHandler(go, 'click', function(e){
        e=eventUtil.getEvent(e);
        alert(eventUtil.getElement(e));
        eventUtil.stopPropagation(e);
        eventUtil.preventDefault(e);
    });

转载于:https://www.cnblogs.com/xjuan/p/5438331.html