DOM跨浏览器处理阻止事件冒泡-原创手记-慕课网

事件冒泡：从最具体的元素到最上级
事件捕获：与捕获相反
事件处理程序：
1.HTML事件处理程序
2.DOM 0 级事件处理程序
3.DOM 2 级事件处理程序
DOM 2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数：要处理的事件名、作为事件处理程序的函数，如 btn2.addEventListener('click',showMessage,false);和btn2.removeEventListener('click',showMessage,false);（false表示冒泡）
4.IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数，如
btn3.attachEvent('onclick',showMessage);和btn3.detachEvent('onclick',showMessage);

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

1.DOM中的事件对象
（1）type属性用于获取事件类型，如click
（2）target属性用于获取事件目标,如element.target.nodeName,获取节点名称
（3）stopPropagation()方法用于阻止事件冒泡
（4）preventDefault()方法阻止事件的默认行为，如跳转
<a href='#'>超链接</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
</head>
<body>
<div id="box">
    <input type="button" value="按钮0" id="btn0" >
    <input type="button" value="按钮2" id="btn2" >
    <input type="button" value="按钮3" id="btn3" >
    <a href="message.html" id="go">跳转</a>
</div>
<script>
    function showMessage(event) {
event = event  window.event;//非IE就是event, IE8以前就是window.event
var ele = event.target  event.srcElement ;//chrome 或 IE
//        alert(ele .type);
//        alert(ele .target);
//        alert(ele .target.nodeName);
        ele .stopPropagation(); //阻止事件冒泡，不然会向上继续触发事件
    }
    function showBox() {
        alert('这是放按钮的盒子');
    }
    function stopGoto(event) {
        event.stopPropagation();  //阻止冒泡，div事件
        event.preventDefault(); //阻止事件跳转，a事件
    }

    var btn0 = document.getElementById('btn0');
    var btn2 = document.getElementById('btn2');
    var btn3 = document.getElementById('btn3');
    var box = document.getElementById('box');
    var go = document.getElementById('go');

    btn0.onclick = function () {
        alert('这是通过DOM0级添加的事件');//DOM 0 级
    };

    btn0.onclick = null; //删除onclick属性
//
//    btn2.addEventListener('click',showMessage,false);//DOM2级
//    btn2.addEventListener('click',function () {
//        alert(this.value);
//    },false);//DOM2级
//
////    btn2.removeEventListener('click',showMessage,false);
//
//    btn3.attachEvent('onclick',showMessage);//IE 浏览器
//    btn3.detachEvent('onclick',showMessage);

    //跨浏览器处理
    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.attachEvent){
                element.detachEvent(type,handler);
            }else {
                element['on' +type] = null;
            }
        }
    };
    eventUtil.addHandler(btn3,'click',showMessage);
    eventUtil.addHandler(box,'click',showBox);
    eventUtil.addHandler(go,'click',stopGoto);

</script>
</body>
</html>

IE中的事件对象
（1）、type属性用于获取事件类型
（2）、srcElement属性用于获取事件的目标
（3）、cancelBubble属性用于阻止事件冒泡，true阻止冒泡，false不阻止
（4）、returnValue属性用于阻止事件的默认行为，false阻止

区分非IE事件和IE事件，将方法进行封装为event.js

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) {
        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;
        }
    }
};

DOM跨浏览器处理 阻止事件冒泡

DOM跨浏览器处理阻止事件冒泡