JS—事件对象

事件对象

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

事件对象Event:
  1)type:获取事件类型
  2)target:获取事件目标
  3)stopPropagation():阻止事件冒泡
  4)preventDefault():阻止事件默认行为

    <div id="div">
        <button id="btn">按钮</button>
        <a href="www.baidu.com" id="aid">百度</a>
    </div>
    <script>
        document.getElementById("btn").addEventListener("click", show);
        //只需要button事件,但是包含button的div也执行了,发生了事件冒泡
        document.getElementById("div").addEventListener("click", show1);
        document.getElementById("aid").addEventListener("click",show2);
        function show(event) {
            //alert(event.type);//click
            alert(event.target);//[object HTMLButtonElement]
            event.stopPropagation();//阻止事件冒泡
        }
        function show1() {
            alert("Here is div");
        }
        function show2(event) {
            event.preventDefault();//阻止超链接默认的跳转行为
            event.stopPropagation();//阻止事件冒泡,否则show1()会再次执行
        }
    </script>

 

posted @ 2016-04-30 22:46  绯乐  阅读(195)  评论(0编辑  收藏  举报