easyui中的那些事件

js中本来就存在很多的事件，像鼠标点击，键盘按下弹出，文档图片加载完毕等。但一直有一个问题就是easyui中的像 onOpen，onClose,onloadSuccess等是怎么实现的？

两个猜想： 1.通过延迟对象（回调函数）的方式。

2.自定义事件

回调函数的方式自然是不用说的：

如：

function MyDialog(){
   this.open = function(callback){
      console.log("打开弹出框");
      callback();
   }
   this.onOpen=function(){
      console.log("打开弹出框后执行");
   };
}
var temp = new MyDialog();
temp.open(temp.onOpen);

结果：

 

由此可见，在MyDialog类中，onOpen函数定义在Open函数的后面也是没有问题的。

function open(){
   console.log("打开弹出框");
   onOpen();
}
function onOpen(){
   console.log("打开弹出框后执行");
};
open();

但原本以为这样写会报错的，没想到也是可以的。那么我们是不是可以这样想，在js执行前，它自己已经是心中有数，都有那些函数，都是什么，哪个有错。

这样做是可以的，但是我想easyui的作者肯定不可能写的这么简单，至少是用jquery中的延迟对象吧。

 

那么重点来了，用自定义事件是怎么搞的呢？关于自定义事件人家是这样说的：

 

事件并不是只能被绑定到DOM元素上，我们可以将其绑定到自定义的对象上，从而开发出类似于Java的事件驱动框架，又称为发布/订阅模式。

发布者向某个信道发布一条消息，订阅者绑定这个信道，当有消息发布至信道时就会接收到一个通知。发布者和订阅者是完全解耦的，甚至彼此可以并不知晓对方的存在。

jquery的自定义事件：因为原生的js自定义事件牵扯到检测浏览器等比较麻烦。

$(function(){
   $("p").bind("myOnOpen", function (event,msg) {   //bind已经被去掉了，请用On代替
      console.log(msg);
   });
});

function Myopen(){
   console.log("打开弹出框");
   $("p").trigger("myOnOpen",["打开弹出框后执行"]);
};
<button οnclick="Myopen()">触发</button> 点解按钮时得到结果

以下几种写法是有问题的：

$("p").on("myOnOpen", function (event,msg) {  //此时页面没有加载完毕，它都没找到p元素
   console.log(msg);
})
function Myopen(){
   console.log("打开弹出框");
   $("p").trigger("myOnOpen",["打开弹出框后执行"]);
};
Myopen();   //把他们整体写在$(function(){});的里面就可以了。

*执行就是执行，定义就是定义，跟写在那个位置是没有关系的。

$(function(){
   function Myopen(){
      console.log("打开弹出框");
      $("p").trigger("myOnOpen",["打开弹出框后执行"]);
   };
   Myopen();
   $("p").on("myOnOpen", function (event,msg) {
      console.log(msg);
   });
})    //不行

当然，自定义事件也可以绑定到普通对象上面：

function myDlg(){
   var that = this;
   (function(){
      $(that).on("MyOnOpen",onOpen);
   })();
   function onOpen(e,msg){
      console.log("打开弹出框后执行"+msg);
   };
   this.open = function(){
      console.log("打开自定义弹出框");
      $(that).trigger("MyOnOpen",["test"]);
   }
};
var MyDialog = new myDlg();
MyDialog.open();

转载于:https://my.oschina.net/u/3163071/blog/824853