JavaScript的事件

Posted 2020-09-03 阿鸠

事件流

1.事件流：在页面接受事件的顺序

2.事件冒泡：其实就是事件向上的一个传播，可以避免绑定多个元素来绑定多个事件

3.事件的捕获：最不具体的节点先捕获事件，而最不具体的节点应该最后捕获事件

事件的处理

1.html事件处理

   直接添加到HTML的结构中，这里写法比较方便一点，但是处理的效果会比较差些

***就是直接在元素标签里面嵌套事件的方法

 

2.DOM 0级的事件处理（多个事件之间会覆盖）

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

    <button id="btn1">按钮</button>
        <script>
            var b= document.getElementById("btn1");
            btn1.onclick=function demo(){alert("dom0级的处理事件1")}
            btn1.onclick=function demo(){alert("dom0级的处理事件2")}
            btn1.onclick=function demo(){alert("dom0级的处理事件3")}
            btn1.onclick=function demo(){alert("dom0级的处理事件4")}
            
            //dom 0级的事件处理会覆盖掉前面的函数
            //这里只是输出了"dom 0级的处理事件4"
        </script>

 

3.DOM2级事件处理(多个事件之间不会覆盖)

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

  true:事件捕获

  flase:事件冒泡

 removeEventListener();

    <button id="btn">按钮</button>
        <script>    
            //这是一个dom二级的事件
            //事件和事件之间是不会覆盖的
            var btn=document.getElementById("btn");
            btn.addEventListener("click",demo);
            function  demo (){
                alert("hello");            
            }    
            btn.addEventListener("click",demo2);
            function demo2(){
                alert("what up???");
            }        
            
            btn.removeEventListener("click",demo2);
        //这里已经是移除了事件demo2
        </script>

4.IE事件处理程序

  attachEVent

 detachEvent