js学习第5天：事件监听

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <!-- 冒泡事件 从内而外，依次响应同名事件-->
    <!-- 捕获型事件 从外到内 IE不支持-->

    <!-- attach/removeEvent IE -->
    <!-- add/removeEventListener  标准BOM浏览器-->

    <script type="text/javascript">
        window.onload = function() {
            //加载完后加载
            //alert('windows.onload()')
            var mbody = document.getElementById('mbody');
            var mdiv = document.getElementById('mdiv');
            var mp = document.getElementById('mp');

            //false：冒泡 p->div>body  
            //true：捕获 body->div->p
            mbody.addEventListener('click', function() {
                show('body<br/>')
            }, true); //body

            mdiv.addEventListener('click', function() {
                show('div<br/>')
            }, true); //body div

            mp.addEventListener('click', function() {
                show('p<br/>')
            }, true); //body div p

            <!-- bom对象属性绑定-->
            var img = document.getElementsByTagName('img')[0];
            img.onclick = handle;

        }


        function testFunction() {
            alert("元素绑定");
        }

        function test1() {
            alert("bom对象属性绑定")
        }

        //冒泡事件 从内而外
        function show(sText) {
            var oDiv = document.getElementById('display')
            oDiv.innerHTML += sText;
        }

        //捕获型事件
        function handle(oEvent) {
            if (window.event) {
                //oEvent = window.event;//IE
            }
            var oTaget;
            if (oEvent.srcElement) {
                oTaget = oEvent.srcElement; //IE
            } else {
                oTaget = oEvent.target;
            }
            alert(oTaget.tagName);
        }
    </script>

    <!-- onclick="show('body<br/>');" -->
    <!-- onclick="show('div<br/>');" -->
    <!-- onclick="show('p<br/>');" -->
    <body id="mbody">body点我呀
        <div id="mdiv">div点我呀
            <p id="mp">p点我呀</p>
        </div>

        <div id="display">
            <img src="Snipaste_2019-11-25_15-25-23.png" border="0" /><br /><br/>
            
            <!-- 阻止点击事件 -->
            <a href="http://www.baidu.com" onclick="return false">惦记我跳转</a><br/><br/>
            
            <!-- 元素绑定 -->
            <input type="button" value="测试" id="testButton" onclick="testFunction()" /><br/><br/>
            
            <!-- bom对象属性绑定 下面的js代码为他绑定了事件 -->
            <button type="button" id="btn1">
                <b>测试</b>
            </button>
        </div>

        <!-- 按顺序执行 -->
        <script type="text/javascript">
            document.getElementById("btn1").onclick = test1;
        </script>
    </body>
</html>
js学习第5天：事件监听

推荐阅读更多精彩内容
