JS 事件

事件流:

  1. 事件流:

    描述的是在页面中接受事件的顺序

  2. 事件冒泡:

    由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点(文档)

  3. 事件捕获:

    最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

事件处理

  1. HTML 事件处理:

    直接添加到 HTML 结构中

  2. DOM0级事件处理

    把一个函数赋值给一个事件处理程序属性

    <script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){alert("DOM0 事件处理程序1);};//会被下面的程序2覆盖掉
    btn.onclick = function(){alert("DOM0 事件处理程序2);};
    //清除掉其 onclick 效果
    //btn.onclick = null;
</script>
  3. DOM2级事件处理

    addEventListener("事件名","事件处理函数","布尔值");

    true: 事件捕获

    false: 事件冒泡

    removeEventListener();

  4. IE 事件处理程序,版本<=8

    attachEvent: btn.attachEvent("onclick",fun1);

    detachEvent

事件对象

  1. 事件对象:

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

  2. 事件对象 event

    type: 获取事件类型

    target: 获取事件目标

    stopPropagation(): 阻止事件冒泡

    preventDefault(); 阻止事件默认行为

    <div id="div">
   <button id="btn">按钮</button>
   <a id="aid" href="https://www.baidu.com">度娘</a>
</div>
<script>
    document.getElementById("btn").addEventListener("click",disType);
    document.getElementById("div").addEventListener("click",disDiv);
    document.getElementById("aid").addEventListener("click",disA);
    function disType(event){
        //alert(event.type);//弹出（click）
        alert(event.target); //弹出（[object HTMLButtonElement]）
        event.stopPropagation();//阻止事件冒泡
}
    function disDiv() {
        alert("div");
    }
    function disA() {
        event.stopPropagation();
        event.preventDefault();//此时无法跳转
    }
</script>