anu - event
import { document } from "./browser";
import { isFn, noop, options } from "./util";
var globalEvents = {};
export var eventPropHooks = {}; //用于在事件回调里对事件对象进行
export var eventHooks = {}; //用于在元素上绑定特定的事件
//根据onXXX得到其全小写的事件名, onClick --> click, onClickCapture --> click,
// onMouseMove --> mousemove
export var eventLowerCache = {
onClick: "click",
onChange: "change",
onWheel: "wheel"
};
/**
* 判定否为与事件相关
*
* @param {any} name
* @returns
*/
export function isEventName(name) {
return /^on[A-Z]/.test(name);
}
export var isTouch = "ontouchstart" in document;
export function dispatchEvent(e, type, end) {
//__type__ 在injectTapEventPlugin里用到
e = new SyntheticEvent(e);
if (type) {
e.type = type;
}
var bubble = e.type;
var hook = eventPropHooks[bubble];
if (hook && false === hook(e)) {
return;
}
var paths = collectPaths(e.target, end || document);
var captured = bubble + "capture";
options.async = true;
triggerEventFlow(paths, captured, e);
if (!e._stopPropagation) {
triggerEventFlow(paths.reverse(), bubble, e);
}
options.async = false;
options.flushBatchedUpdates();
}
function collectPaths(from, end) {
var paths = [];
do {
if (from === end) {
break;
}
var events = from.__events;
if (events) {
paths.push({ dom: from, events: events });
}
} while ((from = from.parentNode) && from.nodeType === 1);
// target --> parentNode --> body --> html
return paths;
}
function triggerEventFlow(paths, prop, e) {
for (var i = paths.length; i--;) {
var path = paths[i];
var fn = path.events[prop];
if (isFn(fn)) {
e.currentTarget = path.dom;
fn.call(path.dom, e);
if (e._stopPropagation) {
break;
}
}
}
}
export function addGlobalEvent(name) {
if (!globalEvents[name]) {
globalEvents[name] = true;
addEvent(document, name, dispatchEvent);
}
}
export function addEvent(el, type, fn, bool) {
if (el.addEventListener) {
// Unable to preventDefault inside passive event listener due to target being
// treated as passive
el.addEventListener(
type,
fn,
bool || false
);
} else if (el.attachEvent) {
el.attachEvent("on" + type, fn);
}
}
var rcapture = /Capture$/;
export function getBrowserName(onStr) {
var lower = eventLowerCache[onStr];
if (lower) {
return lower;
}
var camel = onStr.slice(2).replace(rcapture, "");
lower = camel.toLowerCase();
eventLowerCache[onStr] = lower;
return lower;
}
eventPropHooks.click = function (e) {
return !e.target.disabled;
};
/* IE6-11 chrome mousewheel wheelDetla 下 -120 上 120
firefox DOMMouseScroll detail 下3 上-3
firefox wheel detlaY 下3 上-3
IE9-11 wheel deltaY 下40 上-40
chrome wheel deltaY 下100 上-100 */
/* istanbul ignore next */
const fixWheelType =
"onmousewheel" in document
? "mousewheel"
: document.onwheel !== void 666 ? "wheel" : "DOMMouseScroll";
const fixWheelDelta =
fixWheelType === "mousewheel"
? "wheelDetla"
: fixWheelType === "wheel" ? "deltaY" : "detail";
eventHooks.wheel = function (dom) {
addEvent(dom, fixWheelType, function (e) {
var delta = e[fixWheelDelta] > 0 ? -120 : 120;
var deltaY = ~~dom.__wheel + delta;
dom.__wheel = deltaY;
e = new SyntheticEvent(e);
e.type = "wheel";
e.deltaY = deltaY;
dispatchEvent(e);
});
};
var fixFocus = {};
"blur,focus".replace(/\w+/g, function (type) {
eventHooks[type] = function () {
if (!fixFocus[type]) {
fixFocus[type] = true;
addEvent(
document,
type,
dispatchEvent,
true
);
}
};
});
/**
*
DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值;
对于其他事件,这个属性的值是null。IE不支持realtedTarget属性,但提供了保存着同样信息的不同属性。
在mouseover事件触发时,IE的fromElement属性中保存了相关元素;
在mouseout事件出发时,IE的toElement属性中保存着相关元素。
但fromElement与toElement可能同时都有值
*/
function getRelatedTarget(e) {
if (!e.timeStamp) {
e.relatedTarget = e.type === "mouseover" ? e.fromElement : e.toElement;
}
return e.relatedTarget;
}
function contains(a, b) {
if (b) {
while ((b = b.parentNode)) {
if (b === a) {
return true;
}
}
}
return false;
}
String("mouseenter,mouseleave").replace(/\w+/g, function (type) {
eventHooks[type] = function (dom, name) {
var mark = "__" + name;
if (!dom[mark]) {
dom[mark] = true;
var mask = name === "mouseenter" ? "mouseover" : "mouseout";
addEvent(dom, mask, function (e) {
let t = getRelatedTarget(e);
if (!t || (t !== dom && !contains(dom, t))) {
var common = getLowestCommonAncestor(dom, t);
//由于不冒泡,因此paths长度为1
dispatchEvent(e, name, common);
}
});
}
};
});
function getLowestCommonAncestor(instA, instB) {
var depthA = 0;
for (var tempA = instA; tempA; tempA = tempA.parentNode) {
depthA++;
}
var depthB = 0;
for (var tempB = instB; tempB; tempB = tempB.parentNode) {
depthB++;
}
// If A is deeper, crawl up.
while (depthA - depthB > 0) {
instA = instA.parentNode;
depthA--;
}
// If B is deeper, crawl up.
while (depthB - depthA > 0) {
instB = instB.parentNode;
depthB--;
}
// Walk in lockstep until we find a match.
var depth = depthA;
while (depth--) {
if (instA === instB) {
return instA;
}
instA = instA.parentNode;
instB = instB.parentNode;
}
return null;
}
if (isTouch) {
eventHooks.click = noop;
eventHooks.clickcapture = noop;
}
export function createHandle(name, fn) {
return function (e) {
if (fn && fn(e) === false) {
return;
}
dispatchEvent(e, name);
};
}
var changeHandle = createHandle("change");
var doubleClickHandle = createHandle("doubleclick");
//react将text,textarea,password元素中的onChange事件当成onInput事件
eventHooks.changecapture = eventHooks.change = function (dom) {
var mask = /text|password/.test(dom.type) ? "input" : "change";
addEvent(document, mask, changeHandle);
};
eventHooks.doubleclick = eventHooks.doubleclickcapture = function () {
addEvent(document, "dblclick", doubleClickHandle);
};
export function SyntheticEvent(event) {
if (event.nativeEvent) {
return event;
}
for (var i in event) {
if (!eventProto[i]) {
this[i] = event[i];
}
}
if (!this.target) {
this.target = event.srcElement;
}
this.fixEvent();
this.timeStamp = new Date() - 0;
this.nativeEvent = event;
}
var eventProto = (SyntheticEvent.prototype = {
fixEvent: function () { }, //留给以后扩展用
preventDefault: function () {
var e = this.nativeEvent || {};
e.returnValue = this.returnValue = false;
if (e.preventDefault) {
e.preventDefault();
}
},
fixHooks: function () { },
stopPropagation: function () {
var e = this.nativeEvent || {};
e.cancelBubble = this._stopPropagation = true;
if (e.stopPropagation) {
e.stopPropagation();
}
},
persist: noop,
stopImmediatePropagation: function () {
this.stopPropagation();
this.stopImmediate = true;
},
toString: function () {
return "[object Event]";
}
});
/* istanbul ignore next */
//freeze_start
Object.freeze ||
(Object.freeze = function (a) {
return a;
});
//freeze_end
anu - event的更多相关文章
- 如何利用ETW(Event Tracing for Windows)记录日志
ETW是Event Tracing for Windows的简称,它是Windows提供的原生的事件跟踪日志系统.由于采用内核(Kernel)层面的缓冲和日志记录机制,所以ETW提供了一种非常高效的事 ...
- [.NET] C# 知识回顾 - Event 事件
C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...
- Atitit 解决Unhandled event loop exception错误的办法
Atitit 解决Unhandled event loop exception错误的办法 查看workspace/.metadata/.log org.eclipse.swt.SWTError: No ...
- Java模拟Windows的Event
场景 开发中遇到一个场景,业务操作会不定时的产生工作任务,这些工作任务需要放入到一个队列中,而另外会有一个线程一直检测这个队列,队列中有任务就从队列中取出并进行运算. 问题 业务场景倒是简单,只不过这 ...
- 事件EVENT与waitforsingleobject的使用
事件event与waitforsingleobject的配合使用,能够解决很多同步问题,也可以在数据达到某个状态时启动另一个线程的执行,如报警. event的几个函数: 1.CreateEvent和O ...
- 火狐浏览器中event不起作用解决办法--记录(一)
今天遇到了这个问题.IE,谷歌下都没问题,但在FF下却不起作用,很郁闷查了半天,看别人博文写了老长,结果试了要么起作用,但太麻烦,要么不起作用,说了那么多跟没说一样. 其实只要这一句代码就行:e=ar ...
- Event事件
妙味课堂-Event事件 1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) ...
- Event Sourcing Pattern 事件源模式
Use an append-only store to record the full series of events that describe actions taken on data in ...
- 严重: Exception sending context initialized event to listener instance of class
问题描述:Exception sending context initialized event to listener instance of class org.springframework.w ...
随机推荐
- CMD与AMD区别
- Elasticsearch工作原理
一.关于搜索引擎 各位知道,搜索程序一般由索引链及搜索组件组成. 索引链功能的实现需要按照几个独立的步骤依次完成:检索原始内容.根据原始内容来创建对应的文档.对创建的文档进行索引. 搜索组件用于接收用 ...
- http协议与url简介(转)
一 知识简介 HTTP:(Hypertext transfer protocol)超文本传输协议,是用于从万维网(WWW:World Wide Web)服务器传输超文本到本地浏览器的传送协议. URL ...
- pandas demo 示例
#构造 import pandas as pd import pickle import numpy as np dates=pd.date_range() df = pd.DataFrame(np. ...
- 解决“centos 下bash: g++: 未找到命令...”
简单测试一个C++的“Hello World”,发现报错:“bash: g++: 未找到命令...”,因为没有安装编译器G++:然后就百度,出现一大堆的解决办法,什么“sudo apt-get ins ...
- 《剑指offer》第十七题(打印1到最大的n位数)
// 面试题17:打印1到最大的n位数 // 题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则 // 打印出1.2.3一直到最大的3位数即999. #include <ios ...
- js插件---Bootstrap 树控件
js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...
- 雷林鹏分享:C# 委托(Delegate)
C# 委托(Delegate) C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托(Delegate) 是存有对某个方法的引用的一种引用类型变量.引用可在运行时被改变. 委托 ...
- [INS-20802] Oracle Net Configuration Assistant failed,Caught UnknownHostException
在64位Centos上安装64的oracle 11g R2,出现错误: [INS-20802] Oracle Net Configuration Assistant failed 根据提示查看日志文件 ...
- android--------自定义Dialog之信息提示
对话框对于应用也是必不可少的一个组件,在Android中也不例外,对话框对于一些提示重要信息,或者一些需要用户额外交互的一些内容很有帮助. 自定义Dialog步骤: 1.主要创建Java类,并继承Di ...