mousemove性能(mousemove的用法)

C# 如何把事件添加到 系统中简单的说就是 比如系统自带的MouseMove事件

mousemove这种事件是有东西去触发就会发生。它的逻辑有可能是当鼠标的坐标在某个区域内时，就触发事件：

if( mousemove )//鼠标划过

{

if( Mousemove != null )

{

Mousemove( ..);

}

}

其实就是一个简单的事件，比如自己在做业务逻辑处理时，需要在处理完毕通知使用这个业务逻辑的用户，就可以定义一个事件：

public event EventHandler ProcessCompleted;

当业务逻辑处理完毕时，触发这个事件：

//处理完毕，通知调用者

if( ProcessCompleted != null )

{

ProcessCompleted(...);

}

而在调用者那里，他可以注册这个事件以在处理完毕时得到通知

Biz.ProcessCompleted += MyMethod;

就是这么一个流程。但觉有点乱，希望你能看懂。。。

最初的UI控制权全在开发人员，也就是程序提醒用户输入，或者程序必须在条件满足时必须触发事件，后来这部分工作被移交给了UI框架，也就是你说的系统。在上面的例子中业务逻辑处理模块同样也就是你这个意义上的系统。WINFORM事件是如何触发的我不清楚，但在web程序里如点击事件并不是框架通过timer或新线程来一直轮训是不是触发了事件，而是通过回发页面，回发后系统会取得引起回发的控件的id，从而相应的执行为该控件定义的回发事件。不过我相信在winform里也不应该会通过timer或线程来判断事件是不是触发了。

放在你准备触发那个事件的地方

JavaScript 函数节流和函数防抖之间的区别

JavaScript 函数节流详解

浏览器一个网页的UI线程只有一个，他同时会处理界面的渲染和页面JavaScript代码的执行（简单扩展一下，浏览器或者JavaScript运行大环境并不是单线程，诸如ajax异步回调、hybrid框架内与native通信、事件队列、CSS运行线程等等都属于多线程环境，不过ES6引入了Promise类来减少了部分异步情况）。因此当JavaScript代码运行计算量很大的方法时，就有可能阻塞UI线程，小则导致用户响应卡顿，严重的情况下浏览器会提示页面无响应是否强制关闭。例如网页的页面滚动事件、移动设备的滑动、缩放事件等。即使没有出现严重的性能问题，我们也应该站在性能优化的角度将短时间内会多次触发的大规模处理时间进行分流计算。

如何有效避免UI线程运行过长的代码，是所有用户交互应用需要考虑的问题，同样的问题在客户端Android可以使用UI主线程开子线程来分散计算。与此对应的，js也可以通过引入webWorker来分散计算，但是在js中有一个更简单并且效果不错的方法：函数节流。使用函数节流的核心技巧就是使用定时器分段计算。具体的实现方式大致有两种思路。

·方法一

1.这种实现方式的思路很好理解：设置一个一间隔时间，比如50毫秒，以此时间为基准设置定时器，当第一次触发事件到第二次触发事件间隔小于50毫秒时，清除这个定时器，并设置一个新的定时器，以此类推，直到有一次事件触发后50毫秒内没有重复触发。代码如下：

function debounce(method){ clearTimeout(method.timer); method.timer=setTimeout(function(){ method(); },50); }

这种设计方式有一个问题：本来应该多次触发的事件，可能最终只会发生一次。具体来说，一个循序渐进的滚动事件，如果用户滚动太快速，或者程序设置的函数节流间隔时间太长，那么最终滚动事件会呈现为一个很突然的跳跃事件，中间过程都被节流截掉了。这个例子举的有点夸张了，不过使用这种方式进行节流最终是会明显感受到程序比不节流的时候“更突兀”，这对于用户体验是很差的。有一种弥补这种缺陷的设计思路。

·方法二

2.第二种实现方式的思路与第一种稍有差别：设置一个间隔时间，比如50毫秒，以此时间为基准稳定分隔事件触发情况，也就是说100毫秒内连续触发多次事件，也只会按照50毫秒一次稳定分隔执行。代码如下：

var oldTime=new Date().getTime(); var delay=50; function throttle1(method){ var curTime=new Date().getTime(); if(curTime-oldTime=delay){ oldTime=curTime; method(); } }

相比于第一种方法，第二种方法也许会比第一种方法执行更多次（有时候意味着更多次请求后台，即更多的流量），但是却很好的解决了第一种方法清除中间过程的缺陷。因此在具体场景应根据情况择优决定使用哪种方法。

对于方法二，我们再提供另一种同样功能的写法：

var timer=undefined,delay=50; function throttle2(method){ if(timer){ return ; } method(); timer=setTimeout(function(){ timer=undefined; },delay); }

最后说点个外话，说明一下函数节流的名称问题，大家往往会看到throttle和debounce两个方法名，throttle可以译为“节制，卡住”，debounce可以译为“防反跳”。在《JavaScript高级程序设计》中作者介绍了方法一，并且作者使用了“throttle”这个函数名。而在《第三方JavaScript编程》书中同时出现了方法一和方法二，作者将方法一命名为“debounce”，将方法二命名为“throttle”。国内在同时介绍两个方法的时候有些文章错误的将方法一命名为“throttle”，而将方法二命名为“debounce”，从英语的角度来说是很不负责任的。因此在这里拨乱反正：方法一适合理解为“防反跳”，应命名

React 实现组件拖拽功能

? HTML5原生支持拖拽功能，没有看过相关文档，恰好自己想实现一下React组件的拖拽，在网上看了一些文章之后再结合自己的思考实现了一个简陋的圆形，感觉性能不是很好。

/**

* Created by w on 2018/3/16.

*/

import Reactfrom 'react';

import ReactDOMfrom 'react-dom';

import './dragImg.css';

class DragImgextends React.Component {

constructor(props) {

super(props);

this.state = {

cursor:'pointer',

relativeX:0,

relatveY:0,

isDragging:false

? ? ? ? };

this.handleMouseEnter =this.handleMouseEnter.bind(this);

this.handleMouseLeave =this.handleMouseLeave.bind(this);

this.handleMouseDown =this.handleMouseDown.bind(this);

this.handleMouseUp =this.handleMouseUp.bind(this);

this.handleMouseMove =this.handleMouseMove.bind(this);

}

componentDidMount() {

let node =this.refs.dragPanel;

node.style.left ='50px';

node.style.top ='50px';

}

handleMouseEnter(e) {

this.setState({

cursor:'cursor'

? ? ? ? })

}

handleMouseLeave(e) {

this.setState({

isDragging:false

? ? ? ? })

}

handleMouseDown(e) {

this.setState({

isDragging:true

? ? ? ? })

}

handleMouseUp(e) {

console.log(this.state.isDragging);

this.setState({

relativeX:0,

relativeY:0,

isDragging:false

? ? ? ? })

}

handleMouseMove(e) {

let node =this.refs.dragPanel;

this.setState({

cursor:'move',

relativeX: e.clientX -node.offsetLeft,

relativeY: e.clientY -node.offsetTop,

});

if (this.state.isDragging) {

node.style.left = e.pageX -this.state.relativeX +'px';

node.style.top = e.pageY -this.state.relativeY +'px';

}

}

render() {

return

? ? ? ? ? ? ? ? ? ? onMouseEnter={this.handleMouseEnter}? ? ? ? ? ? ? ? ? ? onMouseLeave={this.handleMouseLeave}? ? ? ? ? ? ? ? ? ? onMouseDown={this.handleMouseDown}? ? ? ? ? ? ? ? ? ? onMouseUp={this.handleMouseUp}? ? ? ? ? ? ? ? ? ? onMouseMove={this.handleMouseMove}? ? ? ? ? ? ? ? ? ? ref="dragPanel" style={{'cursor':this.state.cursor}}

}

}

ReactDOM.render(,document.getElementById('root'));

+ e.clientX,e.clientY和e.pageX,e.PageY的区别是算不算上滚动条

事件代理和事件委托

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件,事件委托又叫事件代理。

举一个通俗的例子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案

前台收到快递后，会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工，前台也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，性能就会更好。

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，divullia;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序aliuldiv，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

介绍了浏览器的事件冒泡机制，这里再详细介绍一下浏览器处理DOM事件的过程。对于事件的捕获和处理，不同的浏览器厂商有不同的处理机制，这里我们主要介绍W3C对DOM2.0定义的标准事件。DOM2.0模型将事件处理流程分为三个阶段：一、事件捕获阶段，二、事件目标阶段，三、事件起泡阶段。如图：

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来阻止事件的冒泡传播。

1、在介绍事件委托的方法之前，我们先来看一段一般方法的例子：子节点实现相同的功能，实现功能是点击li，弹出123：

我们看到有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；那么我们用事件委托的方式做又会怎么样呢？

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发：

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们称为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！

2、上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？

用事件代理如何优化？？

现在是移入li，li变红，移出li，li变白，这么一个效果，然后点击按钮，可以向ul中添加一个li子节点

这是一般的做法，但是你会发现，新增的li是没有事件的，说明添加子节点的时候，事件没有一起添加进去，这不是我们想要的结果，那怎么做呢？一般的解决方案会是这样，将for循环用一个函数包起来，命名为mHover，如下：

虽然功能实现了，看着还挺好，但实际上无疑是又增加了一个dom操作，在优化性能方面是不可取的，那么有事件委托的方式，能做到优化吗？

看上面是用事件委托的方式，新添加的子元素是带有事件效果的，我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。

那什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，再比如说focus，blur，load，unload之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

MouseMove事件，多长时间触发一次

每次鼠标移动都会触发一次

具体一秒内最多触发数量随移动速度和计算机性能改变

React 事件机制

如上图所示：

在JavaScript中，事件的触发实质上是要经过三个阶段:事件捕获、目标对象本身的事件处理和事件冒泡。

事件委托的实质就是将子元素事件的处理委托给父级元素处理。把事件监听器添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到它是哪个子元素的事件。

举个栗子：如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件

事件委托优点 ：

不适用的情况： 比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托； mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托。

在 React事件介绍 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。

合成事件对象很有意思，一开始听名字会觉得很奇怪，看到英文名更奇怪 SyntheticEvent ， 实际上合成事件的意思就是使用原生事件合成一个 React 事件， 例如使用原生 click 事件合成了 onClick 事件，使用原生 mouseout 事件合成了 onMouseLeave 事件，原生事件和合成事件类型大部分都是一一对应，只有涉及到兼容性问题时我们才需要使用不对应的事件合成。

合成事件是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() 。

当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定事件处理器. React内部自定义了一套事件系统，在这个系统上统一进行事件订阅和分发。

具体来讲，React利用事件委托机制在Document上统一监听DOM事件，再根据触发的target将事件分发到具体的组件实例。另外上面e是一个合成事件对象(SyntheticEvent), 而不是原始的DOM事件对象。

React事件系统实现可以分为两个阶段：事件注册、事件触发

ReactBrowserEventEmitter作为事件注册入口，担负着事件注册和事件触发。注册事件的回调函数由EventPluginHub来统一管理，根据事件的类型(type)和组件标识(_rootNodeID)为key唯一标识事件并进行存储。

其大致流程如下：

简单点的解释为：

React不会将事件处理函数直接绑定到真实的节点上，而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器。这个监听器维持了一个映射，保存所有组件内部的事件监听和处理函数。当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。

需要注意的是

关于合成事件

合成事件官方文档：

合成事件作用

React事件和原生事件主要区别有:

合成事件优点：

站在巨人的肩膀上(参考资料)

dom事件

React事件机制和未来 这个文章写得好！