JavaScript事件处理与兼容性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq43599939/article/details/9903245

<script type="text/javascript">
/****
事件对象在IE的兼容,
****/

function t(ev) {
    // alert(ev.srcElement);
    // 1: 如何兼容的获取事件发生的那个DOM对象
    // 2: 如何阻止事件的传播(即,不让事件冒泡上去了);
    // 3: 如何取消事件的默认效果

    alert('a');

    
    ev.target = ev.target || ev.srcElement; // 兼容获取发生事件的对象

    // 兼容阻止事件的传播
    if(ev.stopPropagation) {
         ev.stopPropagation()
    } else {
         ev.cancelBubble = true;
    }

    // 兼容取消事件的默认效果
    if(ev.preventDefault) {
        ev.preventDefault();
    } else {
        ev.returnValue = false;
    }

}

window.onload = function () {    
    var i0 = document.getElementsByTagName('input')[0];
    var main = document.getElementsByTagName('div')[0]
    if(i0.addEventListener) {
        i0.addEventListener('click',t,false);
        main.addEventListener('click',t,false);
    } else {
        i0.attachEvent('onclick',t,false);
        main.attachEvent('onclick',t,false);
    }
}
</script>

<style type="text/css">

#main{
margin-left:50px;
width:100px;
height:100px;
background:orange;
}

</style>
</head>
    <body>
        <div id="main">
            <a href="http://www.baidu.com">百度</a>
            <input type="button" value="点击">
        </div>
    </body>
</html>