继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

focuspe
关注TA
已关注
手记 20
粉丝 26
获赞 246

事件冒泡:从最具体的元素到最上级
事件捕获:与捕获相反
事件处理程序:
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>
  1. 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;
        }
    }
};
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP