JavaScript的事件模型（事件处理程序）

最新推荐文章于 2024-09-26 21:28:22 发布

水木子@

最新推荐文章于 2024-09-26 21:28:22 发布

阅读量371

点赞数

分类专栏： JavaScript 文章标签： JavaScript 事件处理程序事件冒泡与捕获事件委托面试

本文链接：https://blog.csdn.net/qq_39771710/article/details/88822276

版权

本文介绍了JavaScript的事件模型，包括DOM0级和DOM2级事件处理程序，以及IE事件处理程序。DOM0级事件模型允许直接在DOM对象上注册事件，但只能绑定一个同类型事件。DOM2级引入了addEventListener和removeEventListener，支持添加多个事件处理程序并控制捕获和冒泡阶段。此外，文章还详细讲解了事件捕获和冒泡的概念，并讨论了事件委托的优势及其应用场景。

摘要由CSDN通过智能技术生成

简述事件模型

JavaScript中的事件模型有两种，分别是DOM0级事件处理程序和DOM2级事件处理程序

一、DOM0级：

DOM0级事件模型是早期的事件模型，所有的浏览器都是支持的，而且其实现也是比较简单。代码如下：

<p id = 'click'>click me</p>
<script>
    document.getElementById('click').onclick = function(event){
        alert(event.target);
    }
</script>

这种事件模型就是直接在dom对象上注册事件名称，然后添加相应的操作。解除事件 就是将null复制给事件函数，如下：

document.getElementById('click'_).onclick = null;

由此我们可以知道DOM0中，一个DOM对象只能注册一个同类型的函数，注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。

var click = document.getElementById('click');
click.onclick = function(){
    alert('you click the first function');//执行
};
click.onclick = function(){
    alert('you