DOM 级别

此文中涉及到DOM0和DOM2级事件，故先行解释

文档对象模型（DOM）是一个平台，一个中立于语言的应用程序编程接口（API），允许程序访问并更改文档的内容、结构和样式。

DOM被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）
DOM分类

DOM核心：针对任何结构化文档的标准模型
DOM XML：只针对XML文档的标准模型
DOM HTML：只针对HTML文档的标准模型

DOM级别是描述DOM对象，方法和行为的规范集合。基于先前级别构建的DOM规范的更高级别。变化发生在两个方面：

增加一个全新的规格类别（例如，3级添加了“验证”和“加载和保存”规范，这在2级中不存在）
修改现有规范类别（例如更新“核心”规范）

DOM级别

DOM0级别：不是W3C规范。而仅仅是对在Netscape Navigator 3.0和Microsoft Internet Explorer 3.0中的等价功能性的一种定义。DOM1级别建立于此功能性之上
DOM1级别：专注于HTML和XML文档模型。它含有文档导航和处理功能。于1998年10月1日称为W3C推荐标准
DOM2级别：对DOM1级别添加了样式表对象模型，并定义了操作附于文档至上的样式信息的功能性。同时还定义了一个事件模型，并提供了对XML命名空间的支持。作为一项W3C推荐标准，于2000年11月13日发布
DOM3级别：规定了内容模型（DTD和Schemas）和文档验证。同时规定了文档加载和保存、文档查看、文档格式化和关键事件

注：DOM1级标准中未定义事件相关的内容，故没有所谓的DOM1级别事件模型

事件

JavaScript和HTML的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预定事件，以便事件发生时执行相应的代码。

网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比如说，我们可以在用户点击某按钮时产生一个事件来触发某个函数。事件在HTML中定义

事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点至上
在表单中选取输入框
确认表单
键盘按键

事件流

事件流描述的是从页面中接受事件的顺序

如图2.1，目标节点是，当点击事件的传播如下所示：
[图片上传失败...(image-5bef-1534760955972)]

事件冒泡

事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
所由的现在浏览器都支持事件冒泡，但在具体是线上还是有一些差别。IE5.5及更在版本中的事件冒泡会跳过元素（从直接跳到document）。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。
即上图中的3阶段，事件传播顺序： - - -

- - - -

事件捕获

不太具体的节点更早接收事件，而最具体的元素最后接收事件，与事件冒泡相反
即上图中的1阶段，事件传播顺序： - - - -

- - -

DOM 事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。
即上图中的1，2，3个阶段

事件处理程序

事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以on开头，因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。为事件指定处理程序的方式有好几种。

HTML事件处理程序

元素支持的每个元素都可以使用一个相应事件处理程序同名的HTML属性指定。这个属性的值应该是可以执行的JavaScript代码，我们可以为一个button添加click事件处理程序

在HTML事件处理程序中可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本，刚才的例子可以写成如下形式：

在HTML中指定事件处理程序书写很方便，但有两个缺点：

存在时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。
以上面的例子说明，假设showMessage()函数是在按钮下方、页面的最底部定义的。如果用户在页面解析showMessage()函数之前就单击了按钮，就会引发错误。为此，很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面，如下面的例子所示：

这样，如果在showMessage()函数有定义之前单机了按钮，用户将不会看到JavaScript错误，因为在浏览器有机会处理错误之前，错误就被捕获了。

HTML代码和JavaScript代码紧密耦合。如果要更换事件处理程序，就要改动这两个地方：HTML代码和JavaScript代码。

DOM0 级事件处理程序

每个元素（包括window和document）都有自己的事件处理程序属性，这些属性全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序。
使用DOM0 级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中进行；换句话说，程序中的this引用当前元素。例如：

var btn = document.getElementById("myBtn");
btn.onclick = function(){
  alert(this.id); // "myBtn"
}

也可以删除通过DOM0 级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设为null即可：

btn.onclick = null; // 删除事件处理程序

将事件处理程序设置为null后，再单击按钮将不会有任何动作发生。
这种做法的缺点：一次只能定义一个事件处理程序，不能同时定义多个事件处理程序，后定义的事件处理程序会覆盖前面定义的事件处理程序。

DOM2 级事件处理程序

DOM2 级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示再捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序；不写的情况下默认为false。
在按钮上为click事件添加事件处理程序，如下：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
  alert(this.id);
}, false);

与DOM0 级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。如下所示：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
  alert(this.id);
}, false);
btn.addEventListener("click", function(){
  alert("Hello World");
}, false);

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发，因此首先会显示元素的ID，其次会显示“Hello World”消息。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。因为匿名函数体虽然方法体一样，但是句柄却不同是，是完全不同的函数，所以应写成：

var btn = document.getElementById("myBtn");
var handler = function(){
  alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.addEventListener("click", handler, false);

IE 事件处理程序

IE 实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。与DOM方法一样，这也意味着添加的匿名将不能被移除。不过，只要能够将相同函数的引用传给detachEvent()，就可以移除相应的事件处理程序。
使用attachEvent()为按钮添加一个事件处理程序，如下所示：

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
  alert("Clicked");
});

attachEvent()与addEventListener()的区别：

参数个数不同。attachEvent()的有两个参数，添加的事件只能发生在冒泡阶段；而addEventListener()有三个参数，都最后一个参数决定添加的事件处理程序是在冒泡阶段还是捕获阶段（一般为了兼容浏览器都设置为冒泡阶段）
第一个参数意义不同。attachEvent()的第一个参数是事件处理程序名称，例如onclick；而addEventListener()方法中第一个参数是事件处理类型，例如click

3.事件处理程序的作用域不同。在使用DOM2级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。如下：

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
  alert(this === window); // true
});

为一个事件添加多个事件处理程序时，执行顺序不同。与addEventListener()类似，attachEvent()也可以为一个元素添加多个事件处理程序，不过，这些事件处理程序不是以添加它们的顺序执行的，而是以相反的顺序被触发。当添加的事件处理程序较多时则顺序无规律。

跨浏览器的事件处理程序

就不同浏览器的差异，对事件处理程序封装，此方法接收三个参数：要操作的元素、事件名称、事件处理程序函数。jQuery创始人John Resig做法如下：

function addEvent(node, type, handler){
  if(!node){
    return false;
  }
  if(node.addEventListener){
    node.addEventListener(type, handler, false);
    return true;
  }else if(node.attachEvent){
    node['e' + type + handler] = handler;
    node[type + handler] = function(){
      node['e' + type + handler](window.event);
    };
    node.attachEvent('on' + type, node[type + handler]);
    return true;
  }
  return false;
}

在取消事件处理程序的时候，如下：

function removeEvent(node, type, handler){
  if(!node){
    return false;
  }
  if(node.removeEventListener){
    node.removeEventListener(type, handler, false);
    return true;
  }else if(node.detachEvent){
    node.detachEvent('on' + type, node[type + handler]);
    node[type + handler] = null;
    return true;
  }
  return false;
}

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有的浏览器都支持event对象，但支持方式不同。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。
event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过所有事件都会有下表列出的成员。

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将使事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。

阻止事件的默认行为
要阻止特定事件的默认行为，可用使用preventDefault()方法。例如，链接的默认行为就是在被单击时会导航到其href特性指定的URL，若想阻止链接导航这一默认行为，那么提供链接的onclick事件处理程序可以取消它，如下：

var link = document.getElementById("myLink");
link.onclick = function(event){
  event.preventDefault();
}

只有cancelable属性设置为true的事件，才可以使用preventDefault()取消其默认行为

阻止事件传播
stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。例如，直接添加到一个按钮的事件处理程序可以调用stopPropagation()，从而避免触发注册在document.body上面的事件处理程序，如下所示：

var btn = document.getElementById("myBtn");
btn.onclick = function(e){
  alert('Clicked');
  e.stopPropagation()
};
document.body.onclick = function(e){
  alert('Body clicked');
};

调用stopPropagation()后事件不会传到document.body，因此不会触发注册在document.body上的onclick事件处理程序。

只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。

IE 中的事件对象

IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在，如下所示：

var btn = document.getElementById("myBtn");
btn.onclick = function(){
  var e = window.event;
  alert(e.type); // "click"
};

可是，如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中，如下所示：

var btn = document.getElementById("myBtn");
btn.attachEvent('onclick', function(event){
  alert(event.type); // "click"
});

像这样使用attachEvent()的情况下，也可以提供window对象来访问event对象，就像使用DOM0级方法一样。不过为方便起见，同一个对象也会作为参数传递。
如果是通过HTML特性指定的事件处理程序，那么还可以通过一个名叫event的变量来访问event对象（与DOM中的事件模型相同），如下所示：

IE的event对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的DOM属性和方法。与DOM的event对象一样，这些属性和方法也会因为事件类型的不同而不同，但所有事件对象都会包含下表所列的属性和方法。

注：使用returnValue达到了阻止默认行为的目的，cancelBubble设为true可阻止事件冒泡。

跨浏览器的事件对象

虽然DOM和IE的event对象不同，但基于它们的相似性，我们还是可以写出跨浏览器的事件对象方案

function getEvent(e){
  return e || window.event;
}

function getTarget(e){
  return e.target || e.srcElement;
}

function preventDefault(e){
  if(e.preventDefault){
    e.preventDefault();
  }else {
    e.returnValue = false;
  }
}

function stopPropagation(e){
  if(e.stopPropagation){
    e.stopPropagation();
  }else {
    e.cancelBubble = true;
  }
}

事件冒泡的应用

事件代理，又称为事件委托。
例如：要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容，如下所示


    1
    2
    3

事件类型

Web浏览器中可能发生的事件有很多类型，DOM3级事件规定了以下几类事件：

UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发
焦点事件，当元素获得或失去焦点时触发
鼠标事件，当用户通过鼠标在页面上执行操作时触发
滚轮事件，当使用鼠标滚轮（或类似设备）时触发
文本事件，当在文档中输入文本时触发
键盘事件，当用户通过键盘在页面上执行操作时触发
合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发
变动（mutation）事件，当底层DOM结构发生变化时触发
此处不想述，具体的可以查看JavaScript程序设计

参考：

W3C DOM
DOM 分类
DOM 规范
JavaScript 高级程序设计
JavaScript 事件流
DOM 事件结构

你可能感兴趣的:(JavaScript 事件)

用Babel操作AST实现JavaScript代码的自动化生成与转换
目录目录环境搭建代码：修改AST的逻辑重命名函数名重命名变量并修改变量值函数调用替换控制流扁平化还原删除未使用的变量对象属性简化条件表达式优化表达式还原环境搭建安装环境npminstall@babel/parser@babel/traverse@babel/generator@babel/typesast转换的代码框架constfs=require('fs');constvm=require('n
【运维的七种武器】搞技术的季运维
最近项目陆续增加，相应的运维方面压力逐步攀升，经常出现打包和发布失败的情况，给交付团队带来困扰。运维技术是随着软件技术的发展同步发展起来的，当前复杂的软件技术架构对运维的稳定和高效带了了很大挑战。一、运维平台发展史：1.第一阶段，以专业化网管工具为代表，包括网络设备、主机、数据库、中间件、存储等进行专业监控管理的各种专业化工具。2.第二阶段，以ITIL流程化管理为代表的综合网管，通过事件、服务、流
Qt 自定义标题栏——QtWidgets 十年之少 Qt Widgets Qt 自定义标题栏
1.去掉标题栏，实现窗体拖动（常用）以上转载方法实现窗体拖动是通过Windows事件的；但是有时候为了跨平台这种的话就得重写，比较麻烦，所以还是采用最原始的方法：通过QWidgets的鼠标事件来实现。.h文件classQRCodeDialog:publicQDialog{Q_OBJECT...protected:voidmouseMoveEvent(QMouseEvent*event)overri
Node.js 格式化时间的两种方法：原生 Date 与 npm 包 moment 详解还是鼠鼠 node.js node.js npm 前端 javascript vscode
目录Node.js格式化时间的两种做法：内置方法与npm包1.使用JavaScript内置方法格式化时间示例：使用Date对象格式化时间运行程序示例输出原理解析2.使用npm包moment进行时间格式化安装moment示例：使用moment格式化时间运行程序示例输出原理解析3.两种方法的对比4.结论在Node.js开发中，格式化时间是一个常见的需求。例如，将时间格式化为YYYY-MM-DDHH:m
APP怎么抓取原生日志 - Android篇大汉堡玩测试 android 功能测试
文章目录前言为什么要抓原生页面的日志举一个抓取原生日志的例子AndroidDebugBridge(ADB)安装ADB连接设备验证连接抓取日志注意点总结前言好困~写点我觉得重要的吧，IOS和HarmonyOSNEXT这周写为什么要抓原生页面的日志原生日志能够捕捉到与操作系统和应用框架交互的关键信息，包括性能瓶颈、崩溃报告和安全事件等，而这些是纯H5日志无法提供的，确保了对应用行为的全面监控和精准调试
react 技术栈请问该如何优化 DOM 大小混血哲谈 react.js 前端前端框架
针对React应用中DOM大小过大的问题，以下是详细的优化方案和具体操作步骤，帮助你提升Lighthouse性能评分和用户体验：一、问题根源分析DOM大小过大（如超过1500个节点或深度超过32层）会导致：渲染性能下降：浏览器解析和渲染DOM的时间增加。内存占用过高：大量DOM节点占用更多内存，影响低端设备表现。交互延迟：事件监听器绑定过多节点时，响应变慢。常见原因：未优化的列表渲染（如长列表一次
JavaScript 中的性能优化：从基础到高级技巧 lina_mua 深入 javascript 性能优化开发语言
1.引言1.1性能优化的重要性在现代前端开发中，性能优化是提升用户体验的关键。无论是页面加载速度、交互响应时间，还是内存占用，性能优化都能显著提升应用的流畅度和用户满意度。1.2本文的目标本文旨在深入探讨JavaScript中的性能优化，从基础到高级技巧，帮助开发者理解性能优化的核心概念，并掌握其在实际开发中的应用。2.性能优化的基础2.1什么是性能优化？性能优化是指通过改进代码、减少资源消耗、优
JavaScript 模块化语法 import、export详解 qq39138814 javascript 开发语言 ecmascript
JavaScript模块化语法import、export详解1.为什么需要模块化？在JavaScript早期，所有代码都是写在一个全局作用域中，这样做的问题是：变量污染：所有变量、函数都是全局的，容易互相干扰。文件依赖管理困难：多个JS文件之间的依赖关系混乱，难以维护。代码复用困难：无法方便地拆分和复用代码。为了解决这些问题，模块化方案应运而生。2.JavaScript模块化的发展2.1早期的模块
微博ip属地不发微博会不会变 hgdlip ip tcp/ip 服务器网络协议微博
随着社交媒体的普及，微博作为其中的佼佼者，一直备受关注。而且微博上线了显示用户IP属地的功能，这一功能旨在减少冒充热点事件当事人、恶意造谣、蹭流量等不良行为，确保传播内容的真实性和透明度。然而，这也引发了一些用户的疑问：如果不发微博，微博IP属地会不会发生变化呢？本文将对此进行探讨。在微博上，‌仅登录而不发微博、评论或点赞等互动行为，通常不会导致IP属地的变动‌。这是因为微博的IP属地显示是基于用
JavaScript对象全解析：从宿主到内置，深入理解对象分类码农的时光故事前端 javascript
一、JavaScript对象全景图JavaScript对象系统远比表面看起来复杂，我们可以将其分为以下五大类：类别描述示例宿主对象由运行环境提供的对象（如浏览器中的DOM）window、document固有对象标准规定随运行时自动创建的基础对象Array、Date原生对象通过内置构造器创建的特权对象newArray()、newMap()普通对象用户创建的常规对象{}、newObject()特殊行为
JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）码农白衣前端知识 JS javascript 前端开发语言
目录一、概念事件委托（EventDelegation）：事件捕获（EventCapturing）：事件冒泡（EventBubbling）：二、好处事件委托的好处：事件捕获的好处：事件冒泡的好处：三、工作原理事件委托（EventDelegation）：事件捕获（EventCapturing）：事件冒泡（EventBubbling）：四、代码实例1.简单代码实例（事件监听）2.复杂代码实例（简单的待办
解析：浏览器事件冒泡及事件捕获 C860 浏览器浏览器
今天的效率有点奇葩，说高吧，一个上午做了不少事。说低吧，因为一个分布式的算法花了我不少时间，终于有点头绪。估计明天会写一篇文章来讲述一下自己的看法。而今天，还是回到前端。今天来说说事件冒泡和事件捕获。首先肯定是概念：什么是事件冒泡？什么是事件捕获？简单地说，事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点，向父节点传递，直到到达最顶节点
ROS CDK魔法书：建立你的游戏王国（JavaScript篇）阿里云CloudOps 资源编排 ROS 游戏 javascript 开发语言阿里云 ROS CDK
引言在虚拟游戏的世界里，数字化的乐趣如同流动的音符，谱写着无数玩家的共同回忆。而在这片充满创意与冒险的乐园中，您的使命就是将独特的游戏体验与丰富的技术知识相结合，打造出令人难以忘怀的作品。当面对如何实现这一宏伟蓝图时，您或许会想：如何将一款简单而富有趣味的游戏部署到云端，使更多玩家共享这份乐趣？别担心，现在您手中握有一把开启无限可能的大门钥匙——阿里云资源编排服务（ResourceOrchestr
leetcode刷题（javaScript）——栈、单调栈相关场景题总结三月的一天 Leetcode刷题技巧总结 javascript leetcode linux
在LeetCode刷题中，栈是一个常用的数据结构，可以帮助解决很多问题。以下是一些需要使用栈的方法，以及单调栈的应用场景：栈的使用技巧：栈常用于解决与括号匹配相关的问题，如括号序列的有效性、最长有效括号等。栈也常用于解决逆波兰表达式、表达式求值等与计算相关的问题。栈可以用于解决深度优先搜索（DFS）中的回溯问题，如组合、排列等。栈还可以用于解决某些需要“后进先出”（LIFO）特性的问题，如某些遍历
Node.js技术原理分析系列6——基于 V8 封装一个自己的 JavaScript 运行时前端node.js
Node.js是一个开源的、跨平台的JavaScript运行时环境，它允许开发者在服务器端运行JavaScript代码。Node.js是基于ChromeV8引擎构建的，专为高性能、高并发的网络应用而设计，广泛应用于构建服务器端应用程序、网络应用、命令行工具等。本系列将分为9篇文章为大家介绍Node.js技术原理：从调试能力分析到内置模块新增，从性能分析工具perf_hooks的用法到ChromeD
156.HarmonyOS NEXT系列教程之3D立方体旋转轮播案例讲解之事件处理机制 harmonyos-next
温馨提示：本篇博客的详细代码已发布到git:https://gitcode.com/nutpi/HarmonyosNext可以下载运行哦！HarmonyOSNEXT系列教程之3D立方体旋转轮播案例讲解之事件处理机制效果演示1.事件系统概述1.1事件类型点击事件滚动事件动画事件状态变化事件1.2事件处理方式//点击事件处理.onClick(()=>{promptAction.showToast({m
Angular Material中的Overlay和Datepicker交互技巧 t0_54coder 编程问题解决手册 angular.js 前端 javascript 个人开发
在AngularMaterial中，Overlay和Datepicker的交互常常会遇到一些棘手的问题，特别是当我们希望点击Datepicker不关闭Overlay时。本文将通过一个实际的例子来探讨如何解决这个问题。问题描述我们有一个Overlay，它通过overlayOutsideClick事件在用户点击Overlay外部时关闭。然而，当用户点击Datepicker的日期选择按钮时，Overla
python函数支持哪些参数类型_Python函数的几种参数类型 weixin_39965283
以下代码均以Python3为基础理解。初识Python函数大部分常见的语言如C、Java、PHP、C#、JavaScript等属于C系语言，Python不属于他们中的一员（ruby亦然）。在这些语言中，Python也属于比较新奇的一派，就函数来说，它没有大括号，用def关键字定义一个函数，定义后用:然后换行tab指定函数函数的范围，当然也不存在什么分号。作为一个函数，那个它肯定是有参数的，Pyth
TypeScript模块 vs JavaScript模块：现代化开发的模块化之道念九_ysl typescript 前端 typescript
一、模块化开发的重要性在当今前端开发领域，模块化已成为构建可维护、可扩展应用程序的基石。无论是小型项目还是企业级应用，良好的模块化设计都能显著提升代码的可读性和复用性。让我们通过一个简单对比示例开始：JavaScript实现：//math.jsexportfunctionadd(a,b){returna+b}//app.jsimport{add}from'./math.js';console.lo
RocketMQ 和 Kafka 重生之我在成电转码 rocketmq Kafka java 消息队列
✅RocketMQ和Kafka是两种非常流行的分布式消息队列系统，它们广泛用于大规模、高并发的消息传递和事件驱动架构中。虽然它们都属于消息队列，但在设计理念、特性和应用场景上有一些差异。接下来，我们来深入分析这两者的区别与优缺点。一、Kafka和RocketMQ的概述✅1️⃣KafkaKafka是一个分布式的流处理平台，由Apache软件基金会开发，最初由LinkedIn开发并开源。Kafka主要
深入理解Ajax原理 lfsf802 前端技术 ajax xmlhttprequest javascript 服务器 asynchronous
1.概念ajax的全称是AsynchronousJavaScriptandXML，其中，Asynchronous是异步的意思，它有别于传统web开发中采用的同步的方式。2.理解同步异步异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。举个例子来说同步和异步，同步就好像我们买楼一次性支付，而异步就是买楼分期付款。所以
vue中js简单创建一个事件中心/中间件/eventBus 星月前端 javascript vue.js 前端
vue中js简单创建一个事件中心/中间件/eventBus目录结构如下：eventBus.jsclasseventBus{constructor(){this.events={};}//监听事件on(event,callback){if(!this.events[event]){this.events[event]=[];}this.events[event].push(callback);}//
使用libCurl从Web服务器下载文件 eamon100 Win32软件开发 c++开发语言
XlibCurl有两种下载文件方式，同步方式使用easy接口的curl_easy_perform，异步方式可以同时下载多个文件，使用multi接口的curl_multi_perform，通过curl_multi_wait等待传输事件的发生，curl_multi_info_read读取异步传输中的状态。本例使用http下载单个文件和多个文件，ftp方式上传和下载文件，ftp支持断点续传。1、头文件和
《网络安全应急响应技术实战指南》知识点总结（第1~2章网络安全应急响应概述和基础技能）太菜是我的应急响应网络安全 windows
一、应急响应概念一个组织为应对各种意外事件的发生所做的准备，以及在时间发生之后所采取的措施，以减少突发事件造成的损失。二、应急响应流程PDCERF方法：准备阶段（预防）检测阶段（检测已发生或者正在发生的事件以及原因）抑制阶段（限制破坏的范围，同时降低潜在的损失）根除阶段（通过事件分析找出根源并彻底根除，以防再次发生）恢复阶段（把破坏的信息彻底还原到正常运作状态）总结阶段（回顾应急响应事件的过程，分
2.2[frontEnd]ESLint CQU_JIAKE 前端 java
ESLint是一个开源的JavaScript和TypeScript代码质量和代码风格检查工具。它可以帮助开发者检测代码中的问题（如语法错误、潜在的错误、不一致的代码风格等），从而提高代码质量和可维护性。主要功能检测语法错误：ESLint可以检测代码中的语法错误，例如未关闭的括号、缺少分号等。代码风格检查：ESLint可以强制代码风格的一致性，例如：缩进风格（2空格或4空格）。引号类型（单引号或双引
前端性能优化之SSR优化 xiangzhihong8 前端前端
我们常说的SSR是指Server-SideRendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。SSR渲染方案一般来说，我们页面加载会分为好几个步骤：请求域名，服务器返回HTML资源。浏览器加载HTML片段，识别到有CSS/JavaScript资源时，获取资源并加载。现在大多数前端页面都是单页面应
ApplicationContext介绍 lgily-1225 日常积累 java 后端 spring
一、概述ApplicationContext是Spring框架中的一个核心接口，它扩展了BeanFactory接口，并提供了更全面的功能。ApplicationContext不仅包含了BeanFactory的所有功能，还添加了国际化支持、资源访问、事件传播、以及更高级的容器特性，如自动装配和生命周期管理等。它是Spring应用中的核心容器，负责管理和配置应用中的对象（称为beans）。二、主要功能
深入理解 C# 反射的使用鲤籽鲲 C#c#开发语言 C#知识捡漏 C#反射
总目录前言反射是.NET框架中一个强大的特性，允许程序在运行时检查和操作类型信息。通过反射，开发者可以动态地创建对象、调用方法、访问属性等，为程序提供了极大的灵活性。本文将详细讲解C#反射的使用方法及其应用场景。一、什么是反射？1.定义反射（Reflection）是指程序在运行时能够检查和操作其自身的类型信息。通过反射，可以获取类型的成员（如方法、属性、事件等）并动态地调用它们。在.NET框架中，
鸿蒙NEXT开发之开屏广告实现怀男孩 harmonyos harmonyos 华为
1.广告请求服务的实现首先，你需要创建一个广告请求服务来处理广告的加载和展示。你已经在代码中实现了requestAd函数，接下来需要处理广告加载、显示、点击等事件。可以考虑以下结构：1.1创建广告加载函数import{advertising,identifier}from'@kit.AdsKit';import{hilog}from'@kit.PerformanceAnalysisKit';imp
基础篇：ArkTS基础语法介绍言程序plus 鸿蒙Next开发 javascript arkts 鸿蒙
前言：目前流行的编程语言TypeScript是在JavaScript基础上通过添加类型定义扩展而来的，而ArkTS则是TypeScript的进一步扩展。TypeScript深受开发者的喜爱，因为它提供了一种更结构化的JavaScript编码方法。ArkTS旨在保持TypeScript的大部分语法，为现有的TypeScript开发者实现无缝过渡，让移动开发者快速上手ArkTS。ArkTS比typeS
mysql主从数据同步林鹤霄 mysql主从数据同步
配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22 二、配置MySQL主服务器（192.168.21.169）mysql -uroot -p &nb
oracle学习笔记 caoyong oracle
1、ORACLE的安装 a>、ORACLE的版本 8i,9i : i是internet 10g,11g : grid (网格) 12c : cloud (云计算) b>、10g不支持win7 &
数据库，SQL零基础入门天子之骄 sql 数据库入门基本术语
数据库，SQL零基础入门做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
pom.xml 一炮送你回车库 pom.xml
1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
sql查地区省市县 3213213333332132 sql mysql
-- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
关于监听器那些让人头疼的事宝剑锋梅花香画图板监听器鼠标监听器
本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。
JAVA的遍历MAP darkranger map
Java Map遍历方式的选择 1. 阐述　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？　　为了解遍历性能的真实差距，包括在遍历ke
POJ 2312 Battle City 优先多列+bfs aijuans 搜索
来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
Hibernate与Jpa的关系，终于弄懂 avords java Hibernate 数据库 jpa
我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
酸爽的console.log bee1314 console
在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
other operate 征客丶 OS osx
一、Mac Finder 设置排序方式，预览栏在显示－》查看显示选项中二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出，我好及时改正，同时也让我们一
【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
ZooKeeper 入门 BlueSkator 中间件 zk
ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
MySQL取得当前时间的函数是什么格式化日期的函数是什么 BreakingBad mysql Date
取得当前时间用 now() 就行。在数据库中格式化时间用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
读《研磨设计模式》-代码笔记-组合模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
4_JAVA+Oracle面试题(有答案) chenke oracle
基础测试题卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
新一代工作流系统设计目标 comsci 工作算法脚本
用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。在这个设计中，最难的地方是系统根据什么来生成流
oracle 行链接与行迁移 daizj oracle 行迁移
表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
[JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop 电子商务
前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
初三全学年难记忆单词 dcj3sjt126com english word
several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
sphinx实践 dcj3sjt126com sphinx
安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
JPA之JPQL（三） frank1234 orm jpa JPQL
1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public void querySingleObject1() { Query query = em.createQuery("sele
Remove Duplicates from Sorted Array II hcx2013 remove
Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
CentOS安装Mysql5.5 liuxingguome centos
CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
第14章工具函数（下） onestopweb 函数
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
POJ 1050 SaraWon 二维数组子矩阵最大和
POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思：给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
Java8全新打造，英语学习supertool yangshangchuan java superword 闭包 java8 函数式编程
superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他