事件处理基础知识

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件处理基础知识相关的知识,希望对你有一定的参考价值。

事件处理分为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");
        });
        }

以上是关于事件处理基础知识的主要内容,如果未能解决你的问题,请参考以下文章

[React 基础系列] 事件处理

2020-10-31-Flink-7(流处理基础)

JavaScript基础教程—处理事件

自然语言处理中的概率基础

js基础知识:闭包,事件处理,原型

Android零基础入门第33节:Android事件处理概述