//处理事件: 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('
' + el.innerHTML + '
'); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); if (navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe); } }