下面是对JavaScript的事件的一些总结，后续会有更新，还会对JavaScript相应框架中的事件做分析：
JavaScript有三种事件模型：
一，原始事件模型（0级DOM模型）：响应事件时调用的事件句柄名。
事件类型分类：
1，按语义划分,有两类：
a）“原始事件”和“输入事件”：这些事件是用户对鼠标和键盘的操作，只描述用户的操作，没有其他含义。
b）“语义事件”：这些高级事件是在特定环境下发生的，如：用户点击提交按钮时，会发生onmousedown，onmouseup，onclick。鼠标点击的结果，将生成onsubmit事件。
2，按设备相关和设备无关来分,有两类：
a）和设备相关（鼠标和键盘）的事件：名字中带有mouse和key的，如onmouseover。
b）和设备无关的事件：如onsubmit。
二：2级DOM中的高级模型（除了IE以外的所有的浏览器都支持）：
1，事件传播：
在0级事件模型中，当文档元素有对应的事件发生时，就运行对应的句柄，除此之外，不再执行其它操作。但在2级事件模型中就复杂
的多。步骤如下：
1），在捕捉阶段，事件从Document对象沿着文档树向下传播。如果任何目标元素的祖先注册了专门捕捉事件句柄，那么在事件的传播过程中，就会运行这些
句柄。
2）运行注册在目标上的适合事件句柄，这和0级事件模型是一样的。
3）起泡阶段：事件从目标元素向上传播回Document对象。一般来说，原始事件起泡，而高级语义事件不起泡。
在事件的传播过程中，可以调用Event的stopPropagation来停止下一步的传播。
虽然这种时间传播方式看起来比较复杂，但是可以帮助事件处理代码中心化。
2，事件句柄的注册
可以通过调用对象的addEventListener()为特定元素添加句柄，如为一个form元素的提交设计添加句柄：
document.myform.addEventListener("submit",function(e){},false)
此函数的第一个参数是事件类型；第二个参数是句柄函数；最后一个参数是布尔类型的，如果是true，则指定的事件句柄在事件传播的捕捉阶段用于捕捉事件。
如果是FALSE，则事件是常规的，当事件发生在此元素上，或者发生在元素的子女，又向上起泡到该元素时将触发事件句柄。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function init(){
if(window.Event){
document.getElementById("d1").addEventListener("click",f1,false);
document.getElementById("d1").addEventListener("click",f3,false);
}else{
document.getElementById("d1").attachEvent("onclick",f1);
document.getElementById("d1").attachEvent("onclick",f3);
}
//document.getElementById("d3").addEventListener("click",f3,true);
//document.getElementById("d1").addEventListener("click",function(){alert("e2")},false);
//document.getElementById("b").addEventListener("click",function(){document.getElementById("d1").removeEventListener("click",f1,false)},false);
// document.getElementById("d1").onclick = f1;
}
function f1(e){
//alert(this.innerHTML);
//alert(e.currentTarget.innerHTML);
//alert(e.BUBBLING_PHASE+":"+e.CAPTURING_PHASE+":"+e.AT_TARGET);
//e.stopPropagation();
alert(e.detail)
alert(e.type+(e.target==e.currentTarget)+":"+e.eventPhase+":"+e.bubbles);
}
function f2(){
alert(22)
}
function f3(){
alert(33)
}
function f4(){
alert(44)
}
</script>
</HEAD>
<BODY onload="init()">
<script language="javascript">
</script>
<div id="d3" style="width:400px;height:400px;background-color:red">
<div id="d1" style="width:300px;height:300px;background-color:yellow" onclick="f4()">
<div id="d2" style="width:200px;height:200px;background-color:blue">
div
</div>
</div>
</div>
<input id="b" type="button" value="button"/>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function init(){
if(window.Event){
document.getElementById("d1").addEventListener("click",f1,false);
document.getElementById("d1").addEventListener("click",f3,false);
}else{
document.getElementById("d1").attachEvent("onclick",f1);
document.getElementById("d1").attachEvent("onclick",f3);
}
//document.getElementById("d3").addEventListener("click",f3,true);
//document.getElementById("d1").addEventListener("click",function(){alert("e2")},false);
//document.getElementById("b").addEventListener("click",function(){document.getElementById("d1").removeEventListener("click",f1,false)},false);
// document.getElementById("d1").onclick = f1;
}
function f1(e){
//alert(this.innerHTML);
//alert(e.currentTarget.innerHTML);
//alert(e.BUBBLING_PHASE+":"+e.CAPTURING_PHASE+":"+e.AT_TARGET);
//e.stopPropagation();
alert(e.detail)
alert(e.type+(e.target==e.currentTarget)+":"+e.eventPhase+":"+e.bubbles);
}
function f2(){
alert(22)
}
function f3(){
alert(33)
}
function f4(){
alert(44)
}
</script>
</HEAD>
<BODY onload="init()">
<script language="javascript">
</script>
<div id="d3" style="width:400px;height:400px;background-color:red">
<div id="d1" style="width:300px;height:300px;background-color:yellow" onclick="f4()">
<div id="d2" style="width:200px;height:200px;background-color:blue">
div
</div>
</div>
</div>
<input id="b" type="button" value="button"/>
</BODY>
</HTML>
三：IE事件模型
这个模型是介于0级和2级之间的模型，不支持DOM模型中捕捉形式的事件传播，（IE5后有专门的函数支持捕捉鼠标事件捕捉）。
1，IE Event 对象
IE中 Event 对象和2级DOM模型的区别是：IE的Event对象是window的属性，是全局对象；而2级DOM模型中是传参给事件句柄，相当于是局部变量。
2，IE 中的事件起泡
和2级事件模型中的起泡方式一样，差别在于停止起泡的方法，IE中用：
window.event.cancelBubble = true;
2级模型中有event.stopPropagation();
3,注册事件句柄的方式
document.myform.attachEvent("onsubmit",function(e){})
和二级模型相比，比二级模型的事件名称多个on，并且不支持冒泡。
分享到：
相关推荐
4. **执行JS代码**：在解析并获取所需信息后，如果需要执行JS代码，可以调用JavaScript引擎提供的执行方法，传递必要的参数和上下文。 5. **结果处理**：JS执行的结果会以对象形式返回给C#，可以进一步处理或集成到...
资源为js文件，下载后直接用script标签引入，需要解析时调用该js第一个方法，参数为cron定时器表达式字符串，例如：translateCRONToChinese("0 0 12 */1 * ?");
json3.js 【JS / JavaScript 中解析JSON的js包，JSON官方的JSON解析包】。JavaScript中解析JSON的js包，页面中引入json3.js，即可使用。 使用方法：JSON.parse(str), JSON.stringify(obj) 更多详情请参考博文： ...
1，引入二维码解析的js插件llqrcode.js 2，解析的图片，这里采取的是上传图片解析（可以采用扫一扫输出的图片解析） //获取图片路径 let getObjectURL = function(file){ let url = null ; if (window....
JS 解析 XML 文件 作为一名 IT 行业大师，我将从给定的文件中生成相关知识点，涵盖 JS 解析 XML 文件的各种方面。 JS 解析 XML 文件的必要性 在当前的 web 开发中，XML 文件广泛应用于数据交换和存储。因此，如何...
本文将深入探讨如何使用JavaScript在浏览器端解析和读取Excel文件，主要基于开源库`js-xlsx`。 `js-xlsx`是一个强大的JavaScript库，专门用于解析和操作Excel文件（.xlsx和.xls格式）。它支持读取二进制文件、Base...
用途：js解析apk包信息，这只是暴露出去的接口文件，另外还有几个内部文件，不过还有问题，等改好再上传吧
总结来说，使用原生JavaScript解析二维码需要结合HTML5的Canvas和FileReader接口，以及第三方的解码库。"erweima-jiexi-demo"压缩包的"test.html"是一个很好的学习起点，通过实践和扩展，我们可以构建出更强大、更...
JavaScript（简称JS）是一种广泛用于Web开发的轻量级脚本语言，它在浏览器环境中运行，为网页添加交互性。LRC（Lyric）是一种歌词文件格式，常用于存储带有时间戳的歌词，使得音乐播放时能同步显示歌词。本文将深入...
【基于js粘贴事件paste简单解析以及遇到的坑】 在JavaScript中，`paste`事件允许开发者在用户执行粘贴操作时捕获并处理剪贴板的内容。本文将深入探讨如何在Chrome浏览器中利用此事件，并解决与Safari浏览器兼容性的...
Noesis.Javascript是一个用C#编写的高性能JavaScript引擎，它允许C#应用程序动态解析和执行JavaScript代码，从而实现了C#与JavaScript之间的互操作性。 在提供的文件列表中，我们看到了以下几个关键文件： 1. **...
在实际开发中，你还可以结合其他JavaScript库，如D3.js或Chart.js，利用Papa Parse解析的数据创建数据可视化应用。总之，Papa Parse是一个强大且易用的工具，为JavaScript开发者处理CSV数据提供了极大的便利。
JavaScript（JS）作为前端开发的主要语言，通过特定的技术手段，能够实现对本地Excel文件的读取与解析。本文将深入探讨如何利用JS来读取和解析Excel文件，以及如何进行数据验证，确保上传的数据符合预设的格式要求。...
比较好的C＋＋解析Javascript示例，实现的功能有： 1.C＋＋创建对象Javascript调用 2.Javascript 创建对象C＋＋调用 3.C＋＋创建函数由Javascript回调 4.Javascript创建函数由C++回调 ...
chevrotain, 用于JavaScript的解析器构建工具包 Chevrotain简介Chevrotain是一个收费非常快速的 和的feature Parser解析器构建工具包，用于的JavaScript 。 它可以用于为各种用例构建 parsers/compi
jsep, JavaScript表达式解析器 jsep: 一个简单的JavaScript表达式解析器jsep 是用JavaScript编写的简单表达式解析器。 它可以解析JavaScript表达式，但不能解析操作。 表达式和操作之间的差异与Excel电子表格 vs 中...
总的来说，JavaScript解析服务器端XML文件并生成树形菜单是一个常见的任务，涉及到XMLHttpRequest、DOM操作和递归算法等多个知识点。通过掌握这些技术，开发者可以构建出强大的前端应用程序，实现与服务器的数据交互...
pdf.js 解析PDF文件DEMO 下载这个DEMO 轻松搞定在线解析PDF文件 支持翻页浏览 pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持 注意：只兼容支持HTML5的浏览器
JavaScript中的XML解析器是用于处理XML数据的关键工具，它允许开发者在浏览器环境中解析XML文档或者XML字符串，从而在Web应用中有效地使用这些数据。XML（eXtensible Markup Language）是一种结构化数据语言，常用于...
标题 "把文本解析为js框架" 暗示了我们主要讨论的是如何将文本数据转换成JavaScript框架的理解和实现过程。JavaScript框架是用于构建交互式Web应用的工具，它们简化了DOM操作、事件处理和数据管理等任务。在这个过程...