事件处理基础知识

Posted 2020-07-16

事件处理分为DOM0,DOM2,DOM3事件。

DOM0就是直接通过 onclick写在html里面的事件, 比如:<input onclick="alert(1)" />，或者通过获取id的方式在js中直接添加onclick，比如document.getElementById("id").onclick。不能够添加多个事件方法，只显示最后一个。

DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定。IE的事件流是冒泡, 从里面往上面冒。而现代浏览器默认冒泡，若将addEventListener的第三个参数设置为false，则为捕获。可以进行事件累加，addEventListener是DOM2，但attachEvent不是DOM2，是IE自己的方法，虽可以实现事件累加，但顺序是反着的。

 

 

比如如下代码： if(document.addEventListener){         //addEventListener是DOM2，
         p1.addEventListener("click",function(){
            alert("hello");     //现代浏览器，先显示hello，后显示hi
        },true);       //true - 事件句柄在捕获阶段执行；false-  默认。事件句柄在冒泡阶段执行
        p1.addEventListener("click",function(){
            alert("hi");
        },true);
        }else{       //兼容IE浏览器，此方法不是DOM2，可以添加多种事件方法，但是先显示hi再显示hello
        p1.attachEvent("onclick",function(){
            alert("hello");
        });
        p1.attachEvent("onclick",function(){
            alert("hi");
        });
        }