百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

JavaScript 事件——“事件流和事件处理程序”的注意要点

myzbx 2025-01-10 15:40 15 浏览

事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。

事件冒泡

即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div>Click</div>
</body>
</html>

当点击了页面中的div元素，那么这个click事件会按照如下顺序传播：

  1. div元素

  2. body元素

  3. html元素

  4. document对象

事件捕获

事件捕获的思想是最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达目标之前捕获它。

当点击了页面中的div元素，那么这个click事件则会按照如下顺序传播：

  1. document对象

  2. html标签

  3. body标签

  4. div标签

虽然规范要求事件应该从document对象开始传播，但浏览器一般都是从window对象开始捕获事件的。因为老版本浏览器不支持，所以一般都使用事件冒泡。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

在DOM事件流中，实际的目标在捕获阶段不会接收事件。就是说在捕获阶段，事件从document到html再到body后就停止了。下一个阶段是“处于目标”阶段，于是事件在div中发生，并在事件处理中被看成是冒泡阶段的一部分。然后，冒泡阶段发生。IE8及更早的版本不支持DOM事件流，浏览器在捕获阶段触发事件对象上的事件，结果就是有两个机会在目标对象上面操作事件。

事件处理程序

事件就是用户或浏览器自身执行的某种动作；事件处理程序（或事件侦听器）就是响应某个事件的函数。事件处理程序的名字以“on”开头，如onload、onclick等。

HTML事件处理程序

若要在按钮被单击时执行一些js代码，可以这样编写：

<div onclick="alert('Clicked')">Click</div>

注意：不能在其中使用未经转义的HTML语法字符。

也可以调用在页面中其他地方定义的脚本：

<script>
    function showMessage  {
        document.write("fdas");
    }
</script>
<input type="button" value="Click Me" onclick="showMessage" />

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

这样使用会创建一个封装着的元素属性值的函数。这个函数有一个局部变量event，也就是事件对象：

<input type="button" value="Click Me" onclick="alert(event.type)" />

其中，this值等于事件的目标元素，如：

<input type="button" value="Click Me" onclick="alert(this.value)" />

HTML事件处理程序存在众多问题，所以应该使用js指定的事件处理程序

DOM0级事件处理程序

要使用js指定事件处理程序，首先必须取得一个要操作的对象的引用。

每个元素都有自己的事件处理程序属性，这些属性通常全部小写，如onclick。如：

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function {
    console.log("hello");
}
</script>

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行的；也就是this引用当前元素：

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function {
    console.log(this.type);
}
</script>

以上述这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

删除通过DOM0级方法指定的事件处理程序：

btn.onclick = null;

DOM2级事件处理程序

addEventListener

该方法接收三个参数：要处理的事件名、事件处理程序函数和布尔值；布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。如：

var btn = document.getElementById("btn");
btn.addEventListener("click", function  {
    console.log(this.id);
})

还可以为该按钮添加多个事件处理程序，如：

var btn = document.getElementById("btn");
btn.addEventListener("click", function  {
    console.log(this.id);
})
btn.addEventListener("click", function  {
    console.log(this.value);
})

removeEventListener

var btn = document.getElementById("btn");
function info  {
    console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function  {
    console.log(this.id);
});
btn.addEventListener("click", function valueAndId  {
    console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function  {
    console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样就可以最大限度地兼容各种浏览器。

相关推荐

以文本的方式绘制简单的SVG流程图——flowchart.js

介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的，因此可以重复使用节点，并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...

全国首套构网型SVG在木垒投运

中新网新疆新闻1月5日电（翟文辉）12月29日，全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网，本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...

Popmotion – 小巧，灵活的 JS 运动引擎

Popmotion是一个只有12KB的JavaScript运动引擎，可以用来实现动画，物理效果和输入跟踪。原生的DOM支持：CSS，SVG，SVG路径和DOM属性的支持，开箱即用。Popmoti...

零基础教你学前端——43、初识SVG

解决网站图标问题的最佳方案——SVG！SVG是一种基于XML语法的图像格式，英文全称是：ScalableVectorGraphics，即可缩放矢量图，是W3C的一项建议。我们用手机拍摄...

2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF

2.3文件格式全解：PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则，决定了：-信息保留程度（图层/透明度/动画）-压缩方式与画质损失-跨平台兼容性-...

vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升，前端开发再提速!

前言：Vite6.3.2来了！2025年4月18日，Vite团队正式发布了v6.3.2版本！虽然是一个小版本更新，但修复了多个关键问题，并带来了性能优化和稳定性提升，让开发体验更丝滑！如果你还...

一篇文章带你了解SVG 蒙版(Mask)

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见，以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析：本示例使用ID=mask1定义...

SVG实现的流程图绘制

一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作（选择、自动插入、开始结束、普通活动、子活动、块活动、路...

解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享

前言当我们访问网站时，如果访问到不存在的路径时，会出现404错误。为了避免给访问者带来不良体验，设计网站时通常会在页面上展示“404页面不存在”的提示，并引导用户进行返回首页等操作。因此在建立网...

交互设计师做好动画后，提交给开发的文档有哪些?

谢邀！简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有：Gif动画视频动画Web动画，而Web动画又包括：CSS动画、JS动画（Canvas动画、原生JS动画API）、SVG动画等...

Motion for Vue:为Vue量身定制的强大动画库

在前端开发中，动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库，但真正能做到高性能、易用且功能丰富的并不多。今天，我们要介绍的是MotionforVue（motion-v），...

Web开发人员的福音!8个实用的SVG工具

SVG可缩放矢量图形（ScalableVectorGraphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

一键画波浪线、一键多图片调色?这3个网站好玩到停不下来

作为一个经常收集网站的PPT设计师，无意中发现了一些超级有趣的网站。只要你动手能力足够强，就一定会利用它做出创意作品。不说废话，直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...

vite 6.2.5 更新速递:告别SVG路径Bug，构建效率再提升!

Vite6.2.5更新公告2025年4月3日，Vite团队正式发布了Vite6.2.5版本！此次更新虽然是一个小版本迭代，但修复了一个关键问题，涉及SVG文件路径检查，对前端开发者尤...

DrawSVG – SVG 路径动画 jQuery 插件

jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画，用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...

一周热门
最近发表
标签列表