//处理事件：
Namespace.register("U.UF.EV");
/**
* 统一绑定系统处理函数
* @param fun {function} 执行函数
* 绑定的所有函数可通过 U.UF.EV.systemEventBind,Array 查看
*/
U.UF.EV.systemEventBind = function (fun) {
U.selectEl('body').bind(fun);
U.UF.EV.systemEventBind, Array.push(fun);
}
/*
*var a = document.body.aaaa ;
*document.body.aaaa = "aaa"
* U.UF.EV.boundProperties(HTMLElement.prototype,"aaaa",
* function(){
* return this.innerHTML;
* },
* function(value){
* this.innerHTML = value;
* })
*
** 作用：属性添加处理 这里处理例如chrome取消innerText等。
当修改html元素的属性时,可以让他触发一个函数.可以用于双向绑定。当某个变量的值变了，触发回调函数，修改其中的样式。
** @param {object} obj 需要添加属性的对象
** @param {string} str 类型的名字
** @param {function} fun1 get函数处理
** @param {function} fun2 set函数处理
*/
U.UF.EV.boundProperties = function (obj, str, fun1, fun2) {
//判断obj是否已经定义了新的属性
if (obj.__defineGetter__) {//兼容处理
obj.__defineGetter__ = (obj, fun1); //__definGetter__用于Getter方法追加定义，函数第一个是getter的名称，第二个参数为getter的函数
obj.__defineSetter__ = (obj, fun2); //__definSetter__用于Setter方法追加定义，函数第一个是setter的名称，第二个参数为setter的函数
} else if (Object.defineProperty) {//ie8以上的兼容处理
//obj.defineProperty是直接在某一个对象上定义一个属性，这个属性可以用来添加或修改现有的属性，obj修改对象，key属性名，
//{//descriptor}对象用来声明新属性的特性
//configurable：默认false，表示此属性是否可用delete删除。
//enumerable: 默认为false，表示此属性是否可被for...in、Object.keys遍历到
//value：默认undefined，此属性的值，可以是任何JavaScript类型
//writable：默认为false，此属性是否可被改写
//get：默认undefined，指定一个函数，当属性被调用时，此函数也被调用，默认为返回属性值
//set：默认undefined，指定一个函数，当属性被赋值时，此函数也被调用，仅接受一个参数，参数为属性被赋的值
Object.defineProperty(obj, str, { configurable: true, get: fun1, set: fun2 });
} else {//ie6-1e7
obj[str] = fun1; //如果自动获取了属性的对象和类型的名字，则自动调用get函数处理
obj[str].toString = fun1; //获取的属性对象的类型名进行字符串转换
//attachEvent事件监听处理，第一个参数是事件类型，第二个参数是处理函数
obj.attachEvent("onpropertychange", function () {
if (event.propertyName == obj) {//判断事件对象的属性名是否为需要添加的属性的对象
//argument用于提供调用当前正在执行的函数，caller返回调用这个函数体的函数，则返回U.UF.EV.boundProperties()
//再添加一个caller，则返回调用了U.UF.EV.boundProperties()这个函数体的函数
var _str = arguments.caller.caller;
obj.detachEvent("onpropertychange", _str); //detachEvent事件监听处理,删除事件，与attachEvent相配对。第一个参数是事件参数，第二个是处理函数
fun2(obj[str]); //调用set方法去设置新的属性
obj[str] = fun1; //如果自动获取了属性的对象和类型的名字，则自动调用get函数处理
obj[str].toString = fun2; //获取的属性对象的类型名进行字符串的转换，并且调用set函数处理
obj.attachEvent("onpropertychange", _str); //重新建立事件监听处理，重新设置新的属性
}
});
}
}
/*
** 作用：对象添加原型方法,添加新的数据类型，或者在已有数据类型上扩充功能，例如：String,Number,Array,Object,Guid等
** @param {object} obj 数据类型 例如string、number等
** @param {string、object} str 当这个参数为string的时候下述函数有效
** @param {function} fun 原型对应的函数
*/
U.UF.EV.addPrototype = function (obj, str, fun) {
//判断传值的参数类型是否是string
if (typeof str == "string") {//如果传值的数据类型是string，则执行以下函数
obj.prototype[str] = fun; //prototype是添加属性和方法，向obj对象中添加一个属性
} else {
var i; //用于循环
for (i in str) {//循环所有包含了str的个数
obj.prototype[i] = str[i]; //单个添加包含了str这个类型的属性
}
}
}
/**
*当页面滚动到底端的时候执行
*
* @param {function} fun 滚动到底端需要加载的函数
* @param {objcet} obj 需要滚动的元素
*/
U.UF.EV.scrollLoad = function (obj, fun) {
obj.onscroll = function () {//滚动滚轮触发
clearTimeout(U.UF.EV.scrollLoad.time);
if (U.UF.EV.scrollLoad.scrollTop(obj) + U.UF.EV.scrollLoad.windowHeight(obj) >= (U.UF.EV.scrollLoad.documentHeight(obj))) {
U.UF.EV.scrollLoad.time = setTimeout(fun, 100);
}
}
}
/**
* 获取页面顶部被卷起来的高度
*/
U.UF.EV.scrollLoad.scrollTop = function (obj) {
return Math.max(//取最大值
//chrome
U.selectEl(obj)[0].scrollTop,
//firefox/IE
document.documentElement.scrollTop
);
}
/**
* 获取页面文档的总高度
*/
U.UF.EV.scrollLoad.documentHeight = function (obj) {
//现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
return Math.max($(obj)[0].scrollHeight, document.documentElement.scrollHeight); //取最大值
}
/**
* 获取页面浏览器视口的高度
*/
U.UF.EV.scrollLoad.windowHeight = function (obj) {
return U.selectEl(obj)[0].clientHeight;
}
/**
* 页面活动监视,当用户离开页面休息时，停止页面活动（计时器）
*
* @param {function} 页面聚焦回调函数
* @param {function} 页面离开的回调
* @return {string} 获取key对应的值
*/
U.UF.EV.IsActivity = function (fun1, fun2) {
var _timer;
//页面聚焦的处理
if (fun1) {
//判断鼠标是否在body页面上
U.selectEl(document.body).mouseenter(function () {
//由于函数会多次触发，所以做一个计时器进行处理，让函数只触发一次
if (_timer) {
window.clearTimeout(_timer);
}
_timer = window.setTimeout(fun1);
});
//页面聚焦同时为活动页面
U.UF.EV.addElementEvent("focusin", document, function () {
//由于函数会多次触发，所以做一个计时器进行处理，让函数只触发一次
if (_timer) {
window.clearTimeout(_timer);
}
_timer = window.setTimeout(fun1);
});
}
//页面失焦的处理
if (fun2) {
//页面不活动的时候处理
U.UF.EV.addElementEvent("focusout", document, function () {
var _clientx = event.clientX; //页面x坐标
var _clienty = event.clientY; //获取event对象的y坐标
//判断用户的鼠标是否在制定的范围内，如果在说明活动了当前页面
if ((!(U.UF.CI.getBrowser().browser == "msie") ||
(_clientx < 0 || _clientx > US.width || _clienty < 0 || _clienty > US.height))) { //判断鼠标不在页面中
fun2();
}
});
}
}
/**
* 滚动条滚动到制定的位置
*
* @param {string} 指定scrollTop的数值
* @param {function} 需要调整滚动条位置的对象
* @param {function} 加载成功回调
* @return {element} 图片元素
*/
U.UF.EV.scrollToPosition = function (str, fun1, fun2) {
var _isnumber = U.UF.C.isNumber(str); //判断str是否是数字true 或者 false
//动画移动具体的位置
if (_isnumber && fun2) {
U.selectEl(fun1).animate({ "scrollTop": str }, fun2);
}
else {
//设置fun1的内容垂直滚动的像素数
if (typeof str == "number") {
fun1.scrollTop = str;
}
else {
str.scrollIntoView(); //sty.scrollIntoView 让当前的元素滚动到浏览器窗口的可视区域内
}
} //直接移动过
}
/**
* 自动触发HTMLElement事件 Mouse事件,模拟鼠标点击事件
*
* @param {element} 触发的元素
* @param {string} 事件类型
* @return {object} resize对象
*/
U.UF.EV.simulateMouseClicks = function (el, str) {
//ie直接执行事件的处理
if (el.fireEvent) {
return el.fireEvent("on" + str, window.event);
}
//ie以外的浏览器处理事件执行
else if (document.createEvent) {
var _mousevent = document.createEvent("MouseEvents"), //创建事件事件
_event = window.event; //事件处理
//初始化事件
if (_event) { //原本已经具有事件event来源的情况下处理
//执行mouse事件处理
_mousevent.initMouseEvent(
str,
true,
true,
window,
_event.detail,
_event.screenX,
_event.screenY,
_event.clientX,
_event.clientY,
_event.ctrlKey,
_event.altKey,
_event.shiftKey,
_event.metaKey,
_event.button,
_event.relatedTarget
);
}
else {
//没有事件来源event的处理
_mousevent.initMouseEvent(
str,
true,
true,
document.defaultView,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
el
)
}
//分发事件
return el.dispatchEvent(_mousevent);
}
}
/**
* 自动触发HTMLElement Touch事件
*
* @param {element} 触发的元素
* @param {string} 事件类型
* @param {object} resize对象
*/
U.UF.EV.simulatePhoneTouch = function (el, str, obj) {
if (el.fireEvent) { //ie事件触发处理
el.fireEvent("on" + TF);
}
else if (document.createEvent) { //h5事件处理
var i,
_arr,
_event = obj || window.event;
//创建一个touch时间的处理
if (TouchEvent) { //有TouchEvent的创建方式
var _touchevent = new TouchEvent(str, _event);
}
//其他的创建方式
else {
var _touchevent = document.createEvent("TouchEvent");
}
//执行事件的方法
if (_touchevent.initTouchEvent) { //有initTouchEvent执行方法的处理
var _str = "initTouchEvent";
}
else { //initEvent执行方法的处理
var _str = "initEvent";
}
//chrome
_arr = [
//chrome
[
event.touches, //当前屏幕上所有触摸点的列表
event.targetTouches, //当前对象上所有触摸点的列表
event.changedTouches, //涉及当前(引发)事件的触摸点的列表
str,
event.view,
event.screenX,
event.screenY,
event.clientX,
event.clientY,
event.ctrlKey,
event.alrKey,
event.shiftKey,
event.metaKey
],
//safari
[
str,
true,
event.cancelable,
event.view,
event.detail,
event.screenX,
event.screenY,
event.clientX,
event.clientY,
event.ctrlKey,
event.altKey,
event.shiftKey,
event.metaKey,
event.touches,
event.targetTouches,
event.changedTouches,
event.scale,
event.rotation
],
//firefox
[
str,
true,
event.cancelable,
event.view,
event.detail,
event.ctrlKey,
event.altKey,
event.shiftKey,
event.metaKey,
event.touches,
event.targetTouches,
event.changedTouches
],
];
//由于浏览器对直接执行事件的兼容有三种方案，这里是对三种方案的循环添加
for (i = 0; i < _arr.length; i++) {
//直接执行
try {
_touchevent[_str].apply(_touchevent, _arr[i]);
}
catch (e) {
}
if (_touchevent.type == str) {
break;
}
}
}
return el.dispatchEvent(_touchevent); //分发事件
}
/**
* 注册函数事件 Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄
*
* @param {string} 事件名称
* @param {element} 添加事件的元素
* @param {function} 事件触发后调用的函数
* @param {string} 指定事件是否在捕获或冒泡阶段执行
*/
U.UF.EV.addElementEvent = function (str, el, fun, isbubble) {
if (el.addEventListener) { //非IE使用
el.addEventListener(str, fun, isbubble || false);
}
else if (el.attachEvent) { //IE
el.attachEvent("on" + str, fun);
}
else {//html5处理
el["on" + str] = function () {
el["on" + str]();
fun();
}
}
}
/**
* 取消函数事件
*
* @param {string} 事件名称
* @param {element} 添加事件的元素
* @param {function} 事件触发后调用的函数
* @param {string} 指定事件是否在捕获或冒泡阶段执行
*/
U.UF.EV.delElementEvent = function (str, el, fun, isbubble) {
if (el.removeEventListener) { //非IE使用
el.removeEventListener(str, fun, isbubble || false);
}
else if (el.detachEvent) {//IE使用
el.detachEvent("on" + str, fun);
}
else { el["on" + str] = null; } //非元素
}
/**
* 获取事件源 跨iframe搜索,由于我们在点击iframe的时候，不知道事件是从哪个iframe或者来的，所以这里循环iframe找事件的来源
*
*/
U.UF.EV.getEventSource = function () {
var i, //循环初始化
_data, //用于储存数据
_frames = window.frames; //获取window.frames
var _event = window.event; //获取window.event
if (!_event) {
for (i = 0; i < _frames.length; i++) { //循环所有的iframe 获取事件源
_data = _frames[i]; //得到iframe处理
//由于非自己站点的iframe会存在跨域处理
try {
_event = _data.event; //获取事件
//如果找到了事件那么就直接break
if (_event) {
break;
}
}
catch (e) { continue; };
}
}
//返回事件源
return _event;
}
/**
* 阻止冒泡
*/
U.UF.EV.stopBubble = function () {
var _event = U.UF.EV.getEventSource(); //获取Event
//调用的时候判断是否有时间的来源
if (_event) {
//非ie系列浏览器支持处理事件冒泡的方案
if (_event.stopPropagation) {
_event.stopPropagation();
}
//ie系列浏览器支持去小事件冒泡处理
else {
_event.cancelBubble = true;
}
}
}
/**
* 执行mouseout mouseover不冒泡情况，以前是多次触发，现在做到移动进去触发一次，移动出来触发一次
* mouseout||mouseover 冒泡解决
*
* @param {element} 需要执行的元素
* @return {function} 回调函数
*/
U.UF.EV.stopBubbleMouseOutOrOver = function (el, cb) {
if (event && "mouseover,mouseout".indexOf(event.type) > -1) { //判断事件源
var _target = (event.type == "mouseover" ? event.fromElement : event.toElement) || event.relatedTarget, //事件对象
_bool = U.UF.EL.isChild(el, _target); //判断_target是否是el的子孙节点
if (!_bool && U.UF.C.isFunction(cb)) { //判断是否在该元素下
cb();
}
return _bool;
}
}
/**
* 阻止浏览器的默认行为，例如右键菜单，左键选择
*
*/
U.UF.EV.stopDefault = function (e) {
var _event = e || window.event; //获取window.event对象
if (_event) {
//IE中阻止函数器默认动作的方式
if (document.all) {
_event.returnValue = false;
}
//阻止默认浏览器动作(W3C)
else {
_event.preventDefault();
}
return false;
}
}
/**
事件委托，本地程序调用客户端程序时会用到。
* 随机产生一个函数 调用后销毁 类似委托
解决跨域问题，以及ajax多个请求，多份实例的问题。
*
* @param {function} 回调函数
* @param {array} 回调参数 params1
* @param {boolean} 执行成功后是否移除委托
* @param {string} id
* @return {object} 委托对象
*/
U.UF.EV.eventDelegation = function (cb, params, isremove, id) {
if (isremove == null) {
isremove = true;
}
var _id = id || "a" + Guid.newGuid(); //唯一识别id
window[_id] = function () {
try {
//判断是否有回调函数
if (U.UF.C.isFunction(cb)) {
cb.apply(null, arguments);
}
//是否移除事件委托对象
if (this.isremove) {
window[_id] = null; //设置对象移除
delete window[_id]; //清理对象
}
}
catch (e) { }
}
return _id;
}
/**
* 页面消息传递,解决跨域问题。
* @param {function} 跨域iframe传参的回调函数
* @param {boolean} 是否是发送者，在iframe里面的是接收者，iframe外的是发送者
* @param {string} 与iframe通讯的唯一识别id，如果是接收多个不同回调的消息，那么需要传参
* @param {string} 需要跨域的iframe的id
*
*/
U.UF.EV.message = function (fun, issender, id, iframeid) {
this.fun = fun; //监视消息的函数
this.id = id || Guid.guidNoDash(); //消息通讯的唯一id
this.sender = issender; //是否是发送者
this.iframeid = iframeid; //消息发送到哪个iframe里 接受者没有
this.iframe = null; //发送给那个iframe的元素
this.url = ""; //iframe的链接
U.UF.EV.message.callbacks[this.id] = this; //所有消息记录
//设置onmessage事件获取浏览器之间的传参
if ("onmessage" in window) {
U.UF.EV.addElementEvent("message", window, U.UF.EV.message.getDataAndCallBack);
}
//如果是iframe内的发送的处理方式
if (this.sender) {
this.iframe = U.selectEl("#" + this.iframeid)[0]; //获取iframe
this.url = $$("a", { "src": this.iframe.src }).host; //iframe的链接，用于ie跨域传参的时候使用
}
//如果是接收者也就是iframe里面的对象的处理方法
else if (!("onmessage" in window)) {
U.UF.EV.message.getDataAndCallBack();
}
}
//这里包含了所有的需要回调的回调函数
U.UF.EV.message.callbacks = [];
/**
* 得到数据的方法
* @message {object} 发送者发送的信息
*/
U.UF.EV.message.getDataAndCallBack = function (message) {
var _data;
//高版本的浏览器是通过onmessage获取的
if ("onmessage" in window) {
_data = message.data; //获取数据
}
//低版本的浏览器获取值得处理
else {
_data = window.name; //获取数据
}
_data = _data.parseJSON(); //传入的数据转化成json处理
var _fun = U.UF.EV.message.callbacks[_data[1]]; //得到回调函数的类
//如果类存在，那么调用类的message数据回调方法
if (_fun) {
_fun.message(_data[0], _data[1], _data[2]);
}
}
//message类的原型方法
U.UF.EV.message.prototype = {
/**
* 接收消息
* @data {object} 接收的信息
* @cookie {object} 接受者 cookie
*/
message: function (data, id, cookie) {
//如果页面监视的是回调函数的处理
if (U.UF.C.isFunction(this.fun)) {
this.fun(data, id, cookie);
}
//如果是接收者，同时又是在低版本的浏览器下使用的iframe，那么清空iframe的使用
if (this.sender && !("onmessage" in window)) {
var _doc = this.obj.contentWindow.document; //重新创建一个document
_doc.open(); //打开
_doc.write(""); //整个页面写入空
_doc.close(); //关闭
}
},
/**
* 提交消息
* @data {object} 发送者发送的信息
* @id {object} 发送者的id
* @cookie {object} 发送者 cookie
*/
post: function (data, id, cookie) {
var _win,
_message = U.UF.C.jsonToStr([data, id || this.id, cookie]); //拼接传参的参数，由于发送者和接受者都公用这个 所以当接受者给发送者发回消息的时候第二个参数是发送者的id。
//高版本的iframe发送消息
if ("onmessage" in window) {
if (this.sender) {
//得到iframe传参的域
try {
_win = this.iframe.contentWindow || this.iframe; //如果是发送者，那么获取contentWindow
}
catch (e) {
_win = this.iframe; //如果是接收者发送回给发送者，那么iframe是parent就不需要获取contentWindow了
}
}
else {
_win = parent;
}
_win.postMessage(_message, "*"); //发送消息
}
//低版本的浏览器发送iframe消息
else {
//如果是发送者发消息的处理
if (this.sender) {
//等待iframe重新加载后处理跨域
U.UF.DL.iframeLoad(this.iframe, U.UF.C.apply(this, function () {
this.iframe.contentWindow.name = _message; //设置window.name传参值
this.iframe.contentWindow.location.href = this.url; //刷新到跨域的页面
//重新设置onlaod事件处理等待页面响应
U.UF.DL.iframeLoad(this.iframe, U.UF.C.apply(this, function () {
U.UF.EV.message.getDataAndCallBack(); //调用iframe返回数据后重新load "about:blank"链接后的回调
}));
}));
this.iframe.src = "about:blank"; //重新加载iframe
}
//接受者的处理
else {
window.name = _message; //设置window.name传参值
window.src = "about:blank"; //
}
}
}
}
/**
* 打印处理函数
*
*/
U.UF.EV.print = function (el) {
// var AllContent = window.document.body.innerHTML; //首先获得元素的html内容,保存当前页面的HTML
// var newstr = el.innerHTML; //得到需要打印的元素HTML
// document.body.innerHTML = newstr; //把当前页面替换为打印内容HTML
// window.print(); //执行打印操作
// document.body.innerHTML = AllContent; //还原当前页面
var iframe = document.createElement('iframe');
var doc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.body.removeChild(iframe);
}
}