u012422829
u012422829

《JavaScript高级程序设计》读书笔记(七):事件

1.事件流

当浏览器发展到第四代时(IE4 及 Netscape Communicator 4),浏览器开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有某个特定的事件?要明白这个问题问的是什么,可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是纸上的所有圆。两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上。换句话说,在单击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整个页面。

事件流描述的是从页面中接收事件的顺序。但有意思的是,IE 和 Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流,而 Netscape Communicator 的事件流是事件捕获流。 

1.事件冒泡

IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。 

 <!DOCTYPE html>
    <html>
    <head>

        <title>Event Bubbling Example</title>
    </head>

    <body>
        <div id="myDiv">Click Me</div>

    </body>
    </html>
以这个为例：

《JavaScript高级程序设计》读书笔记(七):事件_第1张图片

2.事件捕获

Netscape Communicator 团队提出的另一种事件流叫做事件捕获(event capturing)。事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。 

虽然事件捕获是 Netscape Communicator 唯一支持的事件流模型,但 IE9、Safari、Chrome、Opera和 Firefox 目前也都支持这种事件流模型。尽管“DOM2 级事件”规范要求事件应该从 document 对象开始传播,但这些浏览器都是从 window 对象开始捕获事件的。由于老版本的浏览器不支持,因此很少有人使用事件捕获。我们也建议读者放心地使用事件冒泡,在有特殊需要时再使用事件捕获。

3.DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。以前面简单的 HTML 页面为例,单击<div>元素会按照图13-3所示顺序触发事件。 


在 DOM 事件流中,实际的目标(<div>元素)在捕获阶段不会接收到事件。这意味着在捕获阶段, 12事件从 document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段,于是事件在<div>上发生,并在事件处理(后面将会讨论这个概念)中被看成冒泡阶段的一部分。然后,冒泡阶段发生,事件又传播回文档。 

多数支持 DOM 事件流的浏览器都实现了一种特定的行为;即使“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标,但 IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都会在捕获阶段触发事件对象上的事件。结果,就是有两个机会在目标对象上面操作事件。 

2.事件处理程序

onClick的方式会在事件流的冒泡阶段被处理

用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true,表示在捕获阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。 

通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿名函数将无法移除,如下面的例子所示。

    var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function(){

        alert(this.id);

}, false);

//这里省略了其他代码

btn.removeEventListener("click", function(){ //没有用!

alert(this.id);

}, false); 

大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要,我们不建议在事件捕获阶段注册事件处理程序。 

在 IE 中使用 attachEvent()与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。在使用 DOM0 级方法的情况下,事件处理程序会在其所属元素的作用域内运行;在使用 attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此 this 等于 window。来看下面的例子。

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

alert(this === window); //true

});

在编写跨浏览器的代码时,牢记这一区别非常重要。


3.事件对象

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


4.事件类型

  •   UI(User Interface,用户界面)事件,当用户与页面上的元素交互时触发;

  •   焦点事件,当元素获得或失去焦点时触发;

  •   鼠标事件,当用户通过鼠标在页面上执行操作时触发;

  •   滚轮事件,当使用鼠标滚轮(或类似设备)时触发;

  •   文本事件,当在文档中输入文本时触发;

  •   键盘事件,当用户通过键盘在页面上执行操作时触发;

  •   合成事件,当为 IME(Input Method Editor,输入法编辑器)输入字符时触发;

  •   变动(mutation)事件,当底层 DOM 结构发生变化时触发。 

1.UI事件

UI 事件指的是那些不一定与用户操作有关的事件。 

  •   load:当页面完全加载后在 window 上面触发,当所有框架都加载完毕时在框架集上面触发,当图像加载完毕时在<img>元素上面触发,或者当嵌入的内容加载完毕时在<object>元素上面触发。

  •   unload:当页面完全卸载后在 window 上面触发,当所有框架都卸载后在框架集上面触发,或者当嵌入的内容卸载完毕后在<object>元素上面触发。

  •   abort:在用户停止下载过程时,如果嵌入的内容没有加载完,则在<object>元素上面触发。

  •   error:当发生 JavaScript 错误时在 window 上面触发,当无法加载图像时在<img>元素上面触发,当无法加载嵌入内容时在<object>元素上面触发,或者当有一或多个框架无法加载时在框

    架集上面触发。第 17 章将继续讨论这个事件。

  •   select:当用户选择文本框(<input>或<texterea>)中的一或多个字符时触发。

  •   resize:当窗口或框架的大小变化时在 window 或框架上面触发。 

  •   scroll:当用户滚动带滚动条的元素中的内容时,在该元素上面触发。<body>元素中包含所加载页面的滚动条。

2.焦点事件

 blur:在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它。

 DOMFocusIn:在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价,但它冒泡。只有Opera 支持这个事件。DOM3 级事件废弃了 DOMFocusIn,选择了 focusin。

 DOMFocusOut:在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。只有 Opera支持这个事件。DOM3 级事件废弃了 DOMFocusOut,选择了 focusout。 

 focus:在元素获得焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
 focusin:在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价,但它冒泡。支持这个事件的浏览器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。

 focusout:在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。支持这个事件的浏览器有 IE5.5+、Safari 5.1+、Opera 11.5+和 Chrome。

当焦点从页面中的一个元素移动到另一个元素,会依次触发下列事件:

(1) focusout 在失去焦点的元素上触发;
(2) focusin 在获得焦点的元素上触发;
(3) blur 在失去焦点的元素上触发;

(4) DOMFocusOut 在失去焦点的元素上触发;
(5) focus 在获得焦点的元素上触发;
(6) DOMFocusIn 在获得焦点的元素上触发。 

3.鼠标与滚轮事件

click:在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发。这一点对确保易访问性很重要,意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。

dblclick:在用户双击主鼠标按钮(一般是左边的按钮)时触发。从技术上说,这个事件并不是 DOM2 级事件规范中规定的,但鉴于它得到了广泛支持,所以 DOM3 级事件将其纳入了标准。

mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件,但 DOM3 级事件将它

纳入了规范。IE、Firefox 9+和 Opera 支持这个事件。
mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且

在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件,但 DOM3 级事件将它

纳入了规范。IE、Firefox 9+和 Opera 支持这个事件。
mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。 

mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。不能通过键盘触发这个事件。

mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。

mouseup:在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。 

只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件;如果mousedown 或 mouseup 中的一个被取消,就不会触发 click 事件。类似地,只有触发两次 click 事件,才会触发一次 dblclick 事件。如果有代码阻止了连续两次触发 click 事件(可能是直接取消 click事件,也可能通过取消 mousedown 或 mouseup 间接实现),那么就不会触发 dblclick 事件了。这 4个事件触发的顺序始终如下:

(1) mousedown

(2) mouseup

(3) click
(4) mousedown

(5) mouseup

(6) click
(7) dblclick


5.模拟事件

可以使用 JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样。也就是说,这些事件该冒泡还会冒泡,而且照样能够导致浏览器执行已经指定的处理它们的事件处理程序。在测试 Web 应用程序,模拟触发事件是一种极其有用的技术。 

可以在 document 对象上使用 createEvent()方法创建 event 对象。这个方法接收一个参数,即

表示要创建的事件类型的字符串。在 DOM2 级中,所有这些字符串都使用英文复数形式,而在 DOM3 级中都变成了单数。这个字符串可以是下列几字符串之一。

  •   UIEvents:一般化的 UI 事件。鼠标事件和键盘事件都继承自 UI 事件。DOM3 级中是 UIEvent。

  •   MouseEvents:一般化的鼠标事件。DOM3 级中是 MouseEvent。

  •   MutationEvents:一般化的 DOM 变动事件。DOM3 级中是 MutationEvent。

  •   HTMLEvents:一般化的 HTML 事件。没有对应的 DOM3 级事件(HTML 事件被分散到其他类别中)。

例子：
var btn = document.getElementById("myBtn");

//创建事件对象
var event = document.createEvent("MouseEvents");

//初始化事件对象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);

btn.dispatchEvent(event);

6.总结

在使用事件时,需要考虑如下一些内存与性能方面的问题。
 有必要限制一个页面中事件处理程序的数量,数量太多会导致占用大量内存,而且也会让用户感觉页面反应不够灵敏。

 建立在事件冒泡机制之上的事件委托技术,可以有效地减少事件处理程序的数量。 建议在浏览器卸载页面之前移除页面中的所有事件处理程序。

可以使用 JavaScript 在浏览器中模拟事件。“DOM2 级事件”和“DOM3 级事件”规范规定了模拟事件的方法,为模拟各种有定义的事件提供了方便。此外,通过组合使用一些技术,还可以在某种程度上模拟键盘事件。IE8 及之前版本同样支持事件模拟,只不过模拟的过程有些差异。 


你可能感兴趣的:(JavaScript,事件,web前端开发)

  • C#中的委托和事件 190043 java前端javascript
    委托委托（Delegate）是C#中一种特殊的类型，它用于封装方法的引用。委托可以看作是类型安全的函数指针，允许你将方法作为参数传递给其他方法、从方法返回方法或者存储在变量中以备后用。委托在事件处理、回调函数和异步编程等场景中非常有用。委托的基本概念定义委托：首先需要定义一个委托类型，指定它可以引用的方法签名（包括返回类型和参数列表）。实例化委托：然后创建该委托类型的实例，并将其与具体的方法关联起
  • C# 委托和事件委托 火星papa C#c#delegateevent
    C#委托和事件委托目录C#委托和事件委托什么是委托？1、概念2、代码描述委托什么是事件委托？1、概念2、代码描述事件委托利用事件委托在不同窗体传参1、建窗体2、主窗体代码：3、子窗体代码：什么是委托？1、概念  委托（Delegate）类似于C或C++中函数的指针。是存有对某个方法的引用的一种引用类型变量。引用委托可在运行时被改变，特别是用于实现事件和回调方法。其来自于System.Delegat
  • c#委托和事件 真的没事鸭 C#c#
    目录委托1，什么是委托2，委托的定义3，使用委托4，委托的多播事件1，什么是事件2，事件的定义3，订阅和触发事件4，事件的访问控制5，事件的多播委托1，什么是委托委托是一个函数指针，可以存储方法的引用，并且能够在运行时调用这些方法。委托允许将方法作为参数传递，或将方法作为返回值返回2，委托的定义例：//定义一个委托publicdelegatevoidMyDelegate(stringmessage
  • C#委托和事件的区别 犯罪刚回来 VisualStudiounity3dc#开发语言
    一、概念1、委托：将方法以变量的形式传递，并且以方法的形式执行。他是类，是引用类型。2、事件：功能被限制的一个委托变量。它的类型是委托类型。3、委托的三种形式3.1、delegate：四步（声明，实例化，注册方法，调用）3.2、Action：添加的方法不能有返回值3.3、Func：添加的方法要有返回值3.4、lamda表达式：方法只使用一次，没有多次使用的话使用二、案例1、委托、匿名函数、lamd
  • 搭建vue项目 LYy0 vue.js前端javascript
    一、VueVue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。二、环境1.nodejs环境:下载地址三、创建Vue应用创建的项目将使用基于Vite的构建设置，并允许我们使用Vue的单文件组件(SFC)。$npmcreatevue@l
  • spring webflux 蓝天星空 编程spring
    SpringWebFlux是Spring框架中用于构建响应式（reactive）Web应用的模块。它基于反应式编程模型，旨在提供一种非阻塞、事件驱动的编程方式，以应对高并发和低延迟的需求。以下是SpringWebFlux的主要特点和组成部分：###主要特点1.**非阻塞和异步**：-SpringWebFlux使用非阻塞的I/O操作，能够在高并发情况下保持高性能。-支持异步编程模型，使得应用程序能够
  • 小程序数据绑定：从基础到实践 阿贾克斯的黎明 前端小程序
    目录小程序数据绑定：从基础到实践一、数据绑定的基本原理二、数据绑定的常见应用场景（一）文本内容绑定（二）属性绑定（三）事件绑定与数据更新三、数据绑定的注意事项（一）数据的单向流动与双向绑定（二）数据绑定的性能优化在小程序开发中，数据绑定是一个极为关键的概念，它能够实现数据与视图的高效交互，让我们的小程序更加动态和灵活。接下来，我们将深入探讨小程序数据绑定的各个方面。一、数据绑定的基本原理数据绑定的
  • JavaScript高级学习：ES6新特性07——数组在ES6中的使用 北凉冬 JavaScriptjavascriptes6
    提示：本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节第七章JavaScript高级学习：ES6新特性07——数组在ES6中的使用前言数组在ES6中的使用求数组的最大值ES5的方式求数组最大值ES6的方式使用数组扩展运算符求最大值ES6扩展运算符的使用扩展运算符传参扩展运算符操作伪数组复制数组传统复制数组ES6中使用扩展运算符复制数组ES5中复制数组合并数组ES6方
  • 观察者模式 - 观察者模式的应用场景 w(ﾟДﾟ)w吓洗宝宝了 C++从0到1观察者模式c++
    引言观察者模式（ObserverPattern）是设计模式中行为型模式的一种，它定义了对象之间的一对多依赖关系，使得当一个对象的状态发生改变时，所有依赖于它的对象都会自动收到通知并更新。观察者模式广泛应用于事件处理系统、GUI框架、消息队列等场景中。本文将详细介绍观察者模式的概念、实现方式以及在C++中的应用场景。观察者模式的概念定义观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某
  • vue 给iframe设置src_vue项目中，iframe的src动态赋值 weixin_39961636 vue给iframe设置src
    可以类似这样：/***动态创建iframe*@paramdom创建iframe的容器，即在dom中创建iframe。dom能够是div、span或者其它标签。*@paramsrciframe中打开的网页路径*@paramonloadiframe载入完后触发该事件。能够为空*@return返回创建的iframe对象*/createIframe(dom,src,onload){//在document中
  • Element-plus封装表格Validate 努力搬砖的宣 vue.js前端javascriptelementui
    Element-plus实现表格内的表单验证：useAttrValidateHook在Vue.js项目中，表单验证是一个常见的需求，尤其在处理复杂表格编辑场景时。本文将详细介绍一个基于Vue3的自定义Hook——useAttrValidate，它提供了一种便捷的方式来处理表格组件中的字段校验。效果如下：1.导入与初始化Javascriptimport{reactive,nextTick}from"
  • 掌握 JavaScript：从基础到高级，全面提升编程技能 跟着小郑学前端 javascript开发语言ecmascript
    JavaScript是一种广泛应用于网页开发的编程语言，它使网页具有动态交互的能力。作为Web开发的核心技术之一，掌握JavaScript基础是每位开发者的必备技能。本文将介绍JavaScript的基础知识，包括数据类型、运算符、控制结构、函数等内容，并通过代码示例帮助大家理解。1.JavaScript数据类型JavaScript主要有以下几种数据类型：数据类型描述示例String字符串类型，用于
  • EventLoop事件循环机制(浏览器和Node EventLoop)
    前端的同学们应该都听说过EventLoop的概念，网上各大平台关于它的文章也是成百上千质量参差不一，其实在笔者刚开始接触js的时候这对这方面一头雾水，也是看了高程、官方文档以及大量的文章后才对它有了深刻认识，在这儿就来和大家分享下我对它的的认识和理解，不过要讲明白EventLoop这个东东还是要从头说起。本篇内容循序渐进比较长，需要耐心看完。注：如遇到有一些链接无法访问可能需要科学上网文章首发本人
  • JavaScript系列（32）-- WebAssembly集成详解 陳沉辰陈 JavaScriptjavascriptwasmudp
    JavaScriptWebAssembly集成详解今天，让我们深入了解JavaScript与WebAssembly的集成，这是一项能够显著提升Web应用性能的关键技术。WebAssembly基础概念小知识：WebAssembly（简称Wasm）是一种低级的类汇编语言，它具有紧凑的二进制格式，能够以接近原生的速度运行。它被设计为可以和JavaScript一起协同工作，为Web应用提供高性能计算能力。
  • 微信小程序使用上拉加载onReachBottom。页面拖不动。一直无法触发上拉的事件。 肖肖肖丽珠 微信小程序小程序
    1，可能是原因是你使用了scroll-view的标签，用onReachBottom触发加载事件。这两个是有冲突的。没办法一起使用。如果页面的样式是滚动的是无法去触发页面的onReachBottom的函数的。因此，你使用overflow:auto.来使用页面的某些元素滚动，照样也无法触发onReachBottom。2，滚动区域有部分内容被遮挡怎么解决起初我以为我给滚动区域设置一个高度。height:
  • react数据异步更新 wlt_5079 react.jsjavascript
    1.react数据异步更新定义一个类组件模板：classMyComextendsReact.Component{}设置state状态数据：state={name:"张三"}render()渲染函数：render(){return{this.state.name}}过程：this打点调用自定义函数change绑定click事件，返回一个button按钮，通过this.state打点调用自定义属性na
  • TypeScript语言的字符串处理 轩辕烨瑾 包罗万象golang开发语言后端
    TypeScript语言的字符串处理在现代编程语言中，字符串处理是非常重要的一部分。对于TypeScript这样的语言，更是让开发者在处理字符串时得到了更为安全和强大的工具。本文将深入探讨TypeScript中的字符串处理技术，包括字符串的基本操作、模板字符串、字符串方法、正则表达式以及常用的字符串处理技巧等。一、TypeScript基础与字符串的基本操作TypeScript是JavaScript
  • WPF MVVM 模式如何监听IsVisibleChanged 事件 踏上青云路 wpf
    原本以为这是一个很简单的问题，但是我却走了不少的弯路。记录下来自省。我使用的是库System.Windows.Interactivity.dll，首先在xaml中使用了EventTrrigger但是发现是无效的。经过改变IvokeCommandAction的参数，等方式，发现都无法触发。最后决定使用behavior来进行接下来的写法如下1、首先定义一个Behavior,（注意：这里我也遇到了一个问
  • WPF4-代码后置 苏克贝塔 wpfwpf
    1.什么是代码后置2.为什么WPF需要代码后置？2.1.分离关注点（SeparationofConcerns）2.2.事件驱动编程2.3.数据绑定和动态内容2.4.与UI控件的交互2.5.可重用性和模块化2.6.易于调试和单元测试3.WPF中代码后置的实现原理4.代码后置的组成5.代码后置与MVVM模式6.总结1.什么是代码后置在WPF（WindowsPresentationFoundation）
  • K8s架构与组件 稚辉君.MCA_P8_Java kubernetes容器云原生网络
    一、K8s架构在Master通常上包括kube-apiserver、etcd存储、kube-controller-manager、cloud-controller-manager、kube-scheduler和用于K8s服务的DNS服务器（插件）。这些对集群做出全局决策(比如调度)，以及检测和响应集群事件的组件集合也称为控制平面。其实K8s官方并没有Master这一说，只是大多数安装工具（kube
  • arcgis js 怎么加载geoserver发布的wms服务 niuge No.1 1024程序员节
    arcgisjsapi加载wms服务，官方的参考样例：WMSLayer|SampleCode|ArcGISMapsSDKforJavaScript4.30|EsriDeveloper按照官方样例加载比较奇怪，我们平常习惯用url或者json的方式加载，稍微改一下就行，如下：constlayer=newWMSLayer({url:"http://127.0.0.1:8080/geoserver/ne
  • MongoDB详细讲解 + springboot集成 you0719 简单学点java数据库java
    MongoDB以JSON为数据模型的文档非关系型数据库垂直扩展在一个机器上进行性能扩展水平扩展多个机器的扩展定位特点定位为应用数据库,存储数据特点:量大/非敏感/一定的查询性能MongoDB的语法是JavaScript语法添加db.集合名.insert(js对象)编辑db.集合名.updateMany({key:value}{$set:{key:value}})删除db.集合名.deleteMan
  • uniapp APP端页面触发调用uniapp开发的webview里的方法 printf_824 uniapp分享uni-app
    原理：使用getCurrentInstance()获取当前组件的Vue实例，通过instance.proxy.$scope.$getAppWebview()获取Uniapp的原生WebView对象。使用WebView提供的evalJS方法，执行嵌入H5页面内的JavaScript代码functiongetData(){url.value="http://192.168.0.22:5174/#/pa
  • 计算机组成原理(计算机系统3)--实验八：处理器结构拓展实验 起床悠悠 计算机系统java数据库前端嵌入式硬件
    一、实验目标：了解MIPS的五级流水线，和在运行过程中的所产生的各种不同的流水线冒险；通过指令顺序调整，或旁路与预测技术来提高流水线效率；更加了解流水线细节和其指令的改善方法；更加深入了解动态分支预测和BTB更加熟悉MIPS指令的使用。二、实验内容处理器结构实验一的扩展：用perf记录x86中的数据相关于指令序列调整前后的事件统计（stall、CPUcycles等）处理器结构实验二的扩展：在x86
  • Blazor-ApexCharts 开源项目指南 凌桃莺Talia
    Blazor-ApexCharts开源项目指南项目地址:https://gitcode.com/gh_mirrors/bl/Blazor-ApexCharts一、项目介绍Blazor-ApexCharts是一个用于Blazor框架的图表组件库封装，它基于流行的前端图表库ApexCharts.js实现。这个项目旨在简化在Blazor应用中添加交互式图表的过程，无需直接处理复杂的JavaScript互
  • Vue教程｜搭建vue项目｜Vue-CLI新版脚手架 cnsxjean vue.jsjavascript前端框架npmui
    一、安装Node环境安装Node及Npm环境Node下载地址：Node.js—RunJavaScriptEverywhereNode.js®isaJavaScriptruntimebuiltonChrome'sV8JavaScriptengine.https://nodejs.org/en/安装完成后，检查安装是否成功，并检查版本，命令如下：node-vnpm-vmac@MacdeMacBook-
  • Python Twisted weixin_33946605 网络运维python
    Twsited异步网络框架Twisted是一个事件驱动的网络框架，其中包含了诸多功能，例如：网络协议、线程、数据库管理、网络操作、电子邮件等。事件驱动简而言之，事件驱动分为二个部分：第一，注册事件；第二，触发事件。例：程序一#!/usr/bin/envpython#-*-coding:utf-8-*-#event_drive.pyevent_list=[]defrun():  foreventin
  • 【趣学SQL】第二章：高级查询技巧 2.2 子查询的高级用法——SQL世界的“俄罗斯套娃“艺术 精通代码大仙 数据库sql数据库
    第二章：高级查询技巧2.2子查询的高级用法——SQL世界的"俄罗斯套娃"艺术如果说JOIN是数据库的"社交达人"，那么子查询就是"逻辑鬼才"——它能像俄罗斯套娃一样，在查询中嵌套查询，甚至让AI都怀疑人生！今天我们将通过一个虚拟的「餐厅订单暴走事件」，揭秘子查询的七重幻境。2.2.1标量子查询——单身狗顾客的倔强--找出比平均消费高的顾客（子查询返回单个值）SELECTcustomer_name,
  • xss的过滤和绕过（2） rzydal 学习笔记网络安全xss计算机网络
    xss的过滤和绕过分类过滤主要有两层，分别为WAF层和代码层，WAF（web应用防火墙）通常是在外部，在主机或者网络硬件上，对HTTP请求进行过滤拦截，而代码层是在编写web应用的过程中，直接实现或者音乐第三方库，对用户输入进行过滤，但是JavaScript语法非常灵活，所以对于普通的正则匹配，字符串比较，很难拦截xss。1.富文本过滤在发送邮件或者博客的情景下，用户有需求实现富文本的编辑，比如插
  • js高阶-响应式原理 silver687 javascript
    在JavaScript中，响应式原理通常是指一种编程模式，它允许开发者创建能够自动响应数据变化的系统或应用。这种模式在现代前端框架（如Vue.js、React等）中非常常见，尤其是在数据绑定和UI更新方面。以下是响应式原理的核心概念和实现方式的详细解释：----1.响应式原理的核心概念响应式编程的核心是数据驱动和自动更新。当数据发生变化时，相关的UI或逻辑会自动更新，而无需手动触发更新操作。这种模
  • PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 javaUIPHPandroidlinux
    ╔-----------------------------------╗┆                           
  • 各表中的列名必须唯一。在表 'dbo.XXX' 中多次指定了列名 'XXX'。 bozch .net.net mvc
    在.net mvc5中，在执行某一操作的时候，出现了如下错误：       各表中的列名必须唯一。在表 'dbo.XXX' 中多次指定了列名 'XXX'。 经查询当前的操作与错误内容无关，经过对错误信息的排查发现，事故出现在数据库迁移上。 回想过去： 在迁移之前已经对数据库进行了添加字段操作，再次进行迁移插入XXX字段的时候，就会提示如上错误。  &
  • Java 对象大小的计算 e200702084 java
                              Java对象的大小 如何计算一个对象的大小呢？    
  • Mybatis Spring 171815164 mybatis
    ApplicationContext ac = new ClassPathXmlApplicationContext("applicationContext.xml"); CustomerService userService = (CustomerService) ac.getBean("customerService"); Customer cust
  • JVM 不稳定参数 g21121 jvm
            -XX 参数被称为不稳定参数，之所以这么叫是因为此类参数的设置很容易引起JVM 性能上的差异，使JVM 存在极大的不稳定性。当然这是在非合理设置的前提下，如果此类参数设置合理讲大大提高JVM 的性能及稳定性。        可以说“不稳定参数”
  • 用户自动登录网站 永夜-极光 用户
    1.目标:实现用户登录后,再次登录就自动登录,无需用户名和密码 2.思路:将用户的信息保存为cookie            每次用户访问网站,通过filter拦截所有请求,在filter中读取所有的cookie,如果找到了保存登录信息的cookie,那么在cookie中读取登录信息,然后直接
  • centos7 安装后失去win7的引导记录 程序员是怎么炼成的 操作系统
    1.使用root身份(必须)打开 /boot/grub2/grub.cfg 2.找到 ### BEGIN /etc/grub.d/30_os-prober ###   在后面添加    menuentry "Windows 7 (loader) (on /dev/sda1)" { 
  • Oracle 10g 官方中文安装帮助文档以及Oracle官方中文教程文档下载 aijuans oracle
    Oracle 10g 官方中文安装帮助文档下载：http://download.csdn.net/tag/Oracle%E4%B8%AD%E6%96%87API%EF%BC%8COracle%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3%EF%BC%8Coracle%E5%AD%A6%E4%B9%A0%E6%96%87%E6%A1%A3 Oracle 10g 官方中文教程
  • JavaEE开源快速开发平台G4Studio_V3.2发布了 無為子 AOPoraclemysqljavaeeG4Studio
      我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V3.2版本已经正式发布。大家可以通过如下地址下载。   访问G4Studio网站 http://www.g4it.org   G4Studio_V3.2版本变更日志 功能新增 (1).新增了系统右下角滑出提示窗口功能。 (2).新增了文件资源的Zip压缩和解压缩
  • Oracle常用的单行函数应用技巧总结 百合不是茶 日期函数转换函数(核心)数字函数通用函数(核心)字符函数
    单行函数;   字符函数,数字函数,日期函数,转换函数(核心),通用函数(核心) 一:字符函数: .UPPER(字符串) 将字符串转为大写 .LOWER (字符串) 将字符串转为小写 .INITCAP(字符串) 将首字母大写 .LENGTH (字符串) 字符串的长度 .REPLACE(字符串,'A','_') 将字符串字符A转换成_
  • Mockito异常测试实例 bijian1013 java单元测试mockito
    Mockito异常测试实例： package com.bijian.study; import static org.mockito.Mockito.mock; import static org.mockito.Mockito.when; import org.junit.Assert; import org.junit.Test; import org.mockito.
  • GA与量子恒道统计 Bill_chen JavaScript浏览器百度Google防火墙
    前一阵子，统计**网址时，Google Analytics（GA） 和量子恒道统计（也称量子统计），数据有较大的偏差，仔细找相关资料研究了下，总结如下：   为何GA和量子网站统计（量子统计前身为雅虎统计）结果不同？ 首先：没有一种网站统计工具能保证百分之百的准确出现该问题可能有以下几个原因：（1）不同的统计分析系统的算法机制不同；（2）统计代码放置的位置和前后
  • 【Linux命令三】Top命令 bit1129 linux命令
    Linux的Top命令类似于Windows的任务管理器，可以查看当前系统的运行情况，包括CPU、内存的使用情况等。如下是一个Top命令的执行结果：     top - 21:22:04 up 1 day, 23:49, 1 user, load average: 1.10, 1.66, 1.99 Tasks: 202 total, 4 running, 198 sl
  • spring四种依赖注入方式 白糖_ spring
      平常的java开发中，程序员在某个类中需要依赖其它类的方法，则通常是new一个依赖类再调用类实例的方法，这种开发存在的问题是new的类实例不好统一管理，spring提出了依赖注入的思想，即依赖类不由程序员实例化，而是通过spring容器帮我们new指定实例并且将实例注入到需要该对象的类中。依赖注入的另一种说法是“控制反转”，通俗的理解是：平常我们new一个实例，这个实例的控制权是我
  • angular.injector boyitech AngularJSAngularJS API
    angular.injector   描述: 创建一个injector对象, 调用injector对象的方法可以获得angular的service, 或者用来做依赖注入.   使用方法: angular.injector(modules, [strictDi])   参数详解: Param Type Details mod
  • java-同步访问一个数组Integer[10]，生产者不断地往数组放入整数1000，数组满时等待；消费者不断地将数组里面的数置零，数组空时等待 bylijinnan Integer
    public class PC { /** * 题目：生产者-消费者。 * 同步访问一个数组Integer[10]，生产者不断地往数组放入整数1000，数组满时等待；消费者不断地将数组里面的数置零，数组空时等待。 */ private static final Integer[] val=new Integer[10]; private static
  • 使用Struts2.2.1配置 Chen.H apachespringWebxmlstruts
    Struts2.2.1 需要如下 jar包: commons-fileupload-1.2.1.jar commons-io-1.3.2.jar commons-logging-1.0.4.jar freemarker-2.3.16.jar javassist-3.7.ga.jar ognl-3.0.jar spring.jar struts2-core-2.2.1.jar struts2-sp
  • [职业与教育]青春之歌 comsci 教育
           每个人都有自己的青春之歌............但是我要说的却不是青春...        大家如果在自己的职业生涯没有给自己以后创业留一点点机会,仅仅凭学历和人脉关系,是难以在竞争激烈的市场中生存下去的....   &nbs
  • oracle连接(join)中使用using关键字 daizj JOINoraclesqlusing
    在oracle连接(join)中使用using关键字 34. View the Exhibit and examine the structure of the ORDERS and ORDER_ITEMS tables. Evaluate the following SQL statement: SELECT oi.order_id, product_id, order_date FRO
  • NIO示例 daysinsun nio
    NIO服务端代码： public class NIOServer { private Selector selector; public void startServer(int port) throws IOException { ServerSocketChannel serverChannel = ServerSocketChannel.open(
  • C语言学习homework1 dcj3sjt126com chomework
    0、 课堂练习做完 1、使用sizeof计算出你所知道的所有的类型占用的空间。 int x; sizeof(x);   sizeof(int);   # include <stdio.h> int main(void) { int x1; char x2; double x3; float x4; printf(&quo
  • select in order by , mysql排序 dcj3sjt126com mysql
    If i select like this: SELECT id FROM users WHERE id IN(3,4,8,1); This by default will select users in this order 1,3,4,8, I would like to select them in the same order that i put IN() values so:
  • 页面校验-新建项目 fanxiaolong 页面校验
    $(document).ready( function() { var flag = true; $('#changeform').submit(function() { var projectScValNull = true; var s =""; var parent_id = $("#parent_id").v
  • Ehcache（02）——ehcache.xml简介 234390216 ehcacheehcache.xml简介
    ehcache.xml简介          ehcache.xml文件是用来定义Ehcache的配置信息的，更准确的来说它是定义CacheManager的配置信息的。根据之前我们在《Ehcache简介》一文中对CacheManager的介绍我们知道一切Ehcache的应用都是从CacheManager开始的。在不指定配置信
  • junit 4.11中三个新功能 jackyrong java
    junit 4.11中两个新增的功能，首先是注解中可以参数化，比如 import static org.junit.Assert.assertEquals; import java.util.Arrays; import org.junit.Test; import org.junit.runner.RunWith; import org.junit.runn
  • 国外程序员爱用苹果Mac电脑的10大理由 php教程分享 windowsPHPunixMicrosoftperl
    Mac 在国外很受欢迎，尤其是在 设计/web开发/IT 人员圈子里。普通用户喜欢 Mac 可以理解，毕竟 Mac 设计美观，简单好用，没有病毒。那么为什么专业人士也对 Mac 情有独钟呢？从个人使用经验来看我想有下面几个原因： 1、Mac OS X 是基于 Unix 的 这一点太重要了，尤其是对开发人员，至少对于我来说很重要，这意味着Unix 下一堆好用的工具都可以随手捡到。如果你是个 wi
  • 位运算、异或的实际应用 wenjinglian 位运算
    一． 位操作基础，用一张表描述位操作符的应用规则并详细解释。       二． 常用位操作小技巧，有判断奇偶、交换两数、变换符号、求绝对值。       三． 位操作与空间压缩，针对筛素数进行空间压缩。    &n
  • weblogic部署项目出现的一些问题（持续补充中……） Everyday都不同 weblogic部署失败
    好吧，weblogic的问题确实……   问题一： org.springframework.beans.factory.BeanDefinitionStoreException: Failed to read candidate component class: URL [zip:E:/weblogic/user_projects/domains/base_domain/serve
  • tomcat7性能调优（01） toknowme tomcat7
        Tomcat优化： 1、最大连接数最大线程等设置 <Connector port="8082" protocol="HTTP/1.1"                useBodyEncodingForURI="t
  • PO VO DAO DTO BO TO概念与区别 xp9802 javaDAO设计模式bean领域模型
    O/R Mapping 是 Object Relational Mapping（对象关系映射）的缩写。通俗点讲，就是将对象与关系数据库绑定，用对象来表示关系数据。在O/R Mapping的世界里，有两个基本的也是重要的东东需要了解，即VO，PO。 它们的关系应该是相互独立的，一个VO可以只是PO的部分，也可以是多个PO构成，同样也可以等同于一个PO（指的是他们的属性）。这样，PO独立出来，数据持
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他