javascript事件
1、事件冒泡
IE的事件流叫做事件冒泡，即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点。
2、事件捕获
事件捕获是由最不具体的节点开始接收，逐级向下传播到较具体的节点
3.事件流
“DOM2级事件”规定的事件流包括三个阶段： 事件捕获阶段、处于目标阶段和事件冒泡阶段。
4、事件委托
前戏：每一个函数都是对象，对象越多，占用的内存越多，性能越差
对于“事件处理程序过多”问题的解决方案就是事件委托，事件委托利用了事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。
自行封装EventUtil函数
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubbles = true;
}
},
getRelatedTarget: function (event) {
if (event.relatedTarger) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else { return null; }
}
};
委托事件实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="myLinks">
<li id="doSomething">do something</li>
<li id="baidu">打开百度</li>
<li id="hello"> hello</li>
</ul>
</body>
<script>
var EventUtil = {...};
var list = document.getElementById('myLinks');
EventUtil.addHandler(list, "click", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch (target.id) {
case "doSomething":
document.title = "i changed the document";
break;
case "baidu":
location.href = 'https://www.baidu.com';
break;
case "hello":
alert("hello");
break;
}
})
</script>
</html>
最适合事件委托技术的事件包括click,mousedown,mouseup,keydown,keyup,keypress。
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· C# 13 中的新增功能实操
· Ollama本地部署大模型总结
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（4）
· 卧槽！C 语言宏定义原来可以玩出这些花样？高手必看！
· langchain0.3教程：从0到1打造一个智能聊天机器人