构思:
1、在应用中,由于用了iframe,为了方便各个页面不用window.parent.parent这样的调用考虑利用事件模型对此问题进行解决。
2、应用
$.bindge("eventname",function(event,...){
...
});
$.triggerge("eventname",params);
3、实现
/**
* 客户端统一事件管理器
*/
(function($, undefined)
{
/**
* 定义全局事件管理器
*/
var _globalEventManagerWin_ = window;
var _$globalEventManager = null;
while (!_$globalEventManager)
{
try
{
if (!_globalEventManagerWin_.closed
&& _globalEventManagerWin_._$globalEventManager)
{
_$globalEventManager = _globalEventManagerWin_._$globalEventManager;
break;
}
}
catch (e)
{
// do nothing
}
if (!_globalEventManagerWin_.closed
&& _globalEventManagerWin_.parent != null
&& _globalEventManagerWin_.parent != _globalEventManagerWin_)
{
_globalEventManagerWin_ = _globalEventManagerWin_.parent;
}
else if (!_globalEventManagerWin_.closed
&& _globalEventManagerWin_.opener != null
&& _globalEventManagerWin_.opener != _globalEventManagerWin_)
{
_globalEventManagerWin_ = _globalEventManagerWin_.opener;
}
else
{
//全局事件管理器
var GlobalEventManager = function(config){
};
//全局事件管理器属性:
GlobalEventManager.prototype.$globalEventHandle = $("<_global_event_handle/>");
//
GlobalEventManager.prototype.eventTypeCallbackMapping = {};
//全局事件管理器方法:
//添加事件监听器
GlobalEventManager.prototype.bind = function(eventType, data, callbackFn){
var _self = this;
if(!callbackFn && $.isFunction(data)){
callbackFn = data;
data = [];
}
//压入堆栈
if(!_self.eventTypeCallbackMapping[eventType]){
_self.eventTypeCallbackMapping[eventType] = $.Callbacks("unique");
_self.$globalEventHandle.bind(eventType, data, function(event){
console.log(Array.prototype.slice.call(arguments));
_self.eventTypeCallbackMapping[eventType].fireWith(callbackFn,Array.prototype.slice.call(arguments));
});
}
var _whenExceptionRemoveAbleFunction = function(){
try{
callbackFn.apply(callbackFn,arguments);
}catch(e){
//console.log('fire bind global event exception: ' + e);
_self.eventTypeCallbackMapping[eventType].remove(_whenExceptionRemoveAbleFunction);
}
};
_self.eventTypeCallbackMapping[eventType].add(_whenExceptionRemoveAbleFunction);
};
GlobalEventManager.prototype.trigger = function(eventType, params){
this.$globalEventHandle.trigger(eventType, params)
};
/**
* 事件管理器全局对象
*/
_$globalEventManager = new GlobalEventManager();
_globalEventManagerWin_._$globalEventManager = _$globalEventManager;
//循环调度,用以清理全局事件管理器中,已经被回收的对象
//setInterval(function(){
//
//},60 * 1000 );
}
}
//释放引用
_globalEventManagerWin_ = null;
var _globalEventCallbacks = {};
$.extend(
{
triggerGlobalEvent : function(eventType, params)
{
_$globalEventManager.trigger(eventType, params);
},
bindGlobalEvent : function(eventType, data, callbackFn)
{
_$globalEventManager.bind(eventType, data, callbackFn);
}
});
$.triggerGE = $.triggerge = $.triggerGlobalEvent;
$.bindGE = $.bindge = $.bindGlobalEvent;
})(jQuery);
分享到:
相关推荐
开发者应当注意在控制器或指令中使用$scope.$watch,而不是$rootScope.$watch,除非确实需要在全局范围内监听某些变化。同时,合理利用AngularJS提供的机制来手动清理不再需要的监听器和事件绑定,可以避免内存泄漏...
- `$apply`: 当在AngularJS外部(比如JavaScript事件处理函数)修改了作用域中的数据时,需要调用`$apply`来触发`$digest`循环。例如,`$scope.$apply(function() { $scope.myVariable = newValue; })`。 **作用域...
### 基于MVC的JavaScript+Web富应用开发 #### 一、MVC与类的概念 MVC架构模式在前端开发领域中的热度持续上升,它不仅为开发者提供了一种组织代码的有效方式,还帮助他们更好地管理应用程序的状态。在《JavaScript...
在事件中,this 指向触发这个事件的对象,特殊的是,IE 中的 attachEvent 中的 this 总是指向全局对象 Window。 事件模型 事件模型有三种:冒泡型事件、捕获型事件和 DOM 事件流。冒泡型事件:子级元素先触发,父级...
- 事件监听和触发:在事件驱动的编程模型中,事件可以作为数据传递的一种手段,通过监听和触发事件来传递信息。 - 导入/导出(模块系统):在ES6引入模块系统后,可以使用`import`和`export`关键字在模块间传递数据...
在编写特效时,遵循模块化、可维护性的原则,使用立即执行函数(IIFE)避免污染全局作用域,注释代码以提高可读性,利用版本控制系统(如Git)管理代码。 以上就是JavaScript特效的一些核心知识点,通过学习和实践...
在现代Web开发中,变量监听是一项重要的技术,它允许开发者实时捕捉变量的变化,并在这些变化发生时触发相应的事件处理逻辑。这项技术对于构建动态、响应式的用户界面至关重要。本文将深入探讨如何在JavaScript中...
我们可以通过在全局作用域注册事件监听器来捕获这个事件: ```javascript window.addEventListener('beforeunload', function(event) { // 在这里添加你的代码,例如弹出模态窗口 }); ``` 在事件监听器内部,我们...
本文将深入探讨腾讯网首页首屏上基于JavaScript实现的可重播的巨幅广告代码的相关知识点,帮助开发者理解其背后的原理和实现方式。 首先,JavaScript(简称JS)是网页动态效果和交互的核心语言,它允许我们在用户与...
2. **作用域**:JavaScript有全局作用域和局部作用域,变量在函数内部定义的为局部作用域,在函数外部定义的为全局作用域。理解作用域规则对于避免变量冲突至关重要。 3. **函数**:函数是JavaScript中可重用的代码...
回调函数简单但可能导致回调地狱,事件监听和发布/订阅能实现解耦,Promise则为异步操作提供了一致的接口,便于管理链式操作。 6. **事件流**:事件流包括事件捕获和事件冒泡。事件冒泡是指事件从最具体的元素开始...
- 事件对象提供了关于事件的详细信息,如`event.target`指向触发事件的元素。 6. **异步编程** - 回调函数:传统的异步处理方式,但可能导致回调地狱问题。 - Promise:提供了一种处理异步操作的方法,可以链式...
- 由于 AS3 中的可视元素不再自动触发事件,因此需要更加关注事件的绑定和解绑操作。 #### 四、事件的转换 **1. 监听事件的方式(Handling the events)** AS3 采用了基于事件流的新模型,这意味着事件的触发和...
书中讲解了事件监听、事件触发、事件冒泡和事件捕获,以及Promise和async/await的使用,帮助理解异步编程的核心原理。 6. **DOM操作**:DOM是HTML和XML文档的对象模型,JavaScript可以通过DOM API来操作网页元素。...
事件是用户与网页交互时触发的特定情况,JavaScript通过事件监听器来响应这些事件,如点击、鼠标移动、键盘输入等。事件处理模型分为传统事件处理和现代事件处理(事件委托)。 6. **AJAX** AJAX(Asynchronous ...
闭包则允许函数访问并操作其词法作用域内的变量,即使在其外部。 事件驱动是JavaScript的重要特性,网页上的用户交互如点击按钮、滚动页面等都会触发特定的事件。JavaScript通过事件监听器来响应这些事件,实现与...