当前位置: 澳门新濠3559 > 服务器运维 > 正文

javascript如何实现自定义事件,1.js所支持的浏览器

时间:2019-12-08 19:30来源:服务器运维
相信大家对于这个思路已经很清楚了,我直接附上代码 调用方法 学习javascript面向对象 掌握创建对象的9种方式,javascript9种 本文为大家分享了javascript创建对象的9种方式,供大家参考,

相信大家对于这个思路已经很清楚了,我直接附上代码

调用方法

学习javascript面向对象 掌握创建对象的9种方式,javascript9种

本文为大家分享了javascript创建对象的9种方式,供大家参考,具体内容如下

【1】使用Object构造函数
[缺点]使用同一个接口创建很多对象,会产生大量重复代码

var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
    alert(this.name);
  }

【2】使用对象字面量
[缺点]使用同一个接口创建很多对象,会产生大量重复代码

var person = {
  name: "Nicholas",
  age : 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};

【3】工厂模式:抽象了创建具体对象的过程,考虑到ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节
  [缺点]解决了创建多个相似对象的问题,但没有解决对象识别的问题

function createPerson(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayname = function(){
    alert(this.name);
  }
  return o;
}
var person1 = createPerson('Nicholas',29,'software Engineer');
var person2 = createPerson('greg',27,'doctor');

【4】构造函数模式:没有显式地创建对象,直接将属性和方法赋给了this对象,没有return语句
  [缺点]每个方法都要在每个实例上重新创建一遍

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.jog = job;
  this.sayName = function(){
    alert(this.name);
  };
  //与声明函数在逻辑上是等价的
  //this.sayName = new Function('alert(this.name)');

}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"doctor");

【4.1】构造函数拓展模式:把函数定义转移到构造函数外部
[缺点1]在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实
[缺点2]澳门新濠3559,若对象需要定义很多方法,就要定义很多全局函数,这个自定义引用类型就没有封装性可言

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}
function sayName(){
  alert(this.name);
}
var person = new Person('小火柴','20','student')
person.sayName();
console.log(Person);

【5】原型模式:我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,prototype就是通过调用构造函数而创建的对象实例的原型对象

function Person(){
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  }
}
var person1 = new Person();
person1.sayName();//"Nicholas"
var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName == person2.sayName);//true

【5.1】更简单的原型模式:为了减少不必要的输入,也为了从视觉上更好地封装原型的功能,用一个包含所有属性和方法的对象字面量来重写整个原型对象。
[缺点]以这种方式重设constructor属性会导致它的[[Enumerable]]特性被设置为true,默认情况下原生的constructor属性是不可枚举的

function Person(){};
Person.prototype = {
  constructor : Person,
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};

【5.2】解决enumerable问题的原型模式

function Person(){};
Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};
Object.defineProperty(Person.prototype,"constructor",{
  enumerable : false,
  value : Person
});

[原型模式缺点1]重写原型对象切断了现有原型与已存在对象实例之间的联系,它们引用的仍是最初的原型。

function Person(){}
var friend = new Person();
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};
friend.sayName();//error

[原型模式缺点2]引用类型属性的共享性问题突出

function Person(){}
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  friend : ["shelby","Court"],
  sayName: function(){
    alert(this.name);
  }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true

【6】组合模式:组合使用构造函数模式和原型模式是创建自定义类型的最常见方式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。这种混成模式还支持向构造函数传递参数,是用来定义引用类型的一种默认模式

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["shelby","Court"];
}
Person.prototype = {
  constructor: Person,
  sayName : function(){
    alert(this.name);
  }  
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person1.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true

【7】动态原型模式:把所有信息都封装在构造函数中,通过在构造函数中初始化原型(仅在必要情况下),又保持了同时使用构造函数和原型的优点。换句话说,可以通过检查某个存在的方法是否有效,来决定是否要初始化原型。
  [注意]使用动态原型模式时,不能使用对象字面量重写原型。如果在已经创建了实例的情况下重写原型,那么就会切断现有实例与新实例之间的联系

function Person(name,age,job){
  //属性
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if(typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      alert(this.name);
    };
  }
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();

【8】寄生构造函数模式:创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象

function Person(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

【寄生构造函数模式应用】创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数,因此可以使用这个模式

function SpecialArray(){
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values,arguments);
  //添加方法
  values.toPipedString = function(){
    return this.join('|');
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());//"red|blue|green"  

【9】稳妥构造函数模式:所谓稳妥对象指没有公共属性,而且其方法也不引用this的对象。稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new)或者在防止数据被其他应用程序改动时使用。

function Person(name,age,job){
  //创建要返回的对象
  var o = new Object();
  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function(){
    alert(name);
  };
  //返回对象
  return o;
}
//在稳妥模式创建的对象中,除了使用sayName()方法之外,没有其他方法访问name的值
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

以上就是javascript创建对象的九种方式,希望对大家的学习有所帮助。

eventTarget.fireEvent({ type: "eat", food: "banana"}); function b{ console.log; //banana}

这是一种调用运行的方法

您可能感兴趣的文章:

  • js使用对象直接量创建对象的代码
  • JS 创建对象(常见的几种方法)
  • JavaScript 创建对象
  • JavaScript 三种创建对象的方法
  • js创建对象的几种常用方式小结(推荐)
  • javascript的函数、创建对象、封装、属性和方法、继承
  • 从面试题学习Javascript 面向对象(创建对象)
  • JavaScript创建对象的写法
  • js中创建对象的几种方式示例介绍

掌握创建对象的9种方式,javascript9种 本文为大家分享了javascript创建对象的9种方式,供大家参考,具体内容如下 【...

总结:字面量这种方法,有点儿缺点,就是万一一不小心,把某个属性在handler函数里面,赋值null,这样会造成我们的的eventTarget 方法崩盘。看来原型应该是个好方法,更安全一点。

又或者

//直接量处理js自定义事件var eventTarget = { //保存事件类型,处理函数数组映射 handlers:{}, //注册给定类型的事件处理程序, //type -> 自定义事件类型, handler -> 自定义事件回调函数 addEvent: function{ //判断事件处理数组是否有该类型事件 if(eventTarget.handlers[type] == undefined){ eventTarget.handlers[type] = []; } //将处理事件push到事件处理数组里面 eventTarget.handlers[type].push; }, //触发一个事件 //event -> 为一个js对象,属性中至少包含type属性, //因为类型是必须的,其次可以传一些处理函数需要的其他变量参数。 fireEvent: function{ //判断是否存在该事件类型 if(eventTarget.handlers[event.type] instanceof Array){ var _handler = eventTarget.handlers[event.type]; //在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件 for(var i = 0; i < _handler.length; i++){ //执行触发 _handler[i]; } } }, //注销事件 //type -> 自定义事件类型, handler -> 自定义事件回调函数 removeEvent: function{ if(eventTarget.handlers[type] instanceof Array){ var _handler = eventTarget.handlers[type]; //在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件 for(var i = 0; i < _handler.length; i++){ //找出本次需要处理的事件下标 if(_handler[i] == handler){ break; } } //删除处理事件 _handler.splice; } }};

根据上面的封装,我们可以这样构思

2.对象直接量封装js自定义事件

eventTarget.fireEvent({
  type: "eat",
  food: "banana"
}); 
function b(data){
   console.log(data.food); //banana
}

3.对象原型封装js自定义事件

这样每一个类型可以有多个处理函数,以便于我们以后扩充 
接下来就是代码方面的实战的,编写具体的处理代码了…

var eventTarget = { addEvent: function(){ //添加事件 }, fireEvent: function(){ //触发事件 }, removeEvent: function(){ //移除事件 }};

我们平时在操作dom时候经常会用到onclick,onmouseover等一系列浏览器特定行为的事件, 
那么自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,在合适的时候需要哪个事件类型,就去调用哪个处理程序

function b;}eventTarget.addEvent;eventTarget.fireEvent; //123eventTarget.removeEvent;eventTarget.fireEvent; //空
var eventTarget = {
  //保存映射
  handlers:{},
  addEvent: function(){
    //处理代码
  },
  fireEvent: function(){
    //触发代码
  },
  removeEvent: function(){
    //移出代码
  }
};

这样每一个类型可以有多个处理函数,以便于我们以后扩充 接下来就是代码方面的实战的,编写具体的处理代码了…

总结:字面量这种方法,有点儿缺点,就是万一一不小心,把某个属性在handler函数里面,赋值null,这样会造成我们的的eventTarget 方法崩盘。看来原型应该是个好方法,更安全一点。

eventTarget.addEvent{ console.log;eventTarget.fireEvent;
function b(){
   console.log(123);
}
eventTarget.addEvent("eat",b);
eventTarget.fireEvent({
  type: "eat"
});                   //123
eventTarget.removeEvent("eat",b);
eventTarget.fireEvent({type: "eat"});  //空
//跨浏览器的事件处理程序 //调用时候直接用domEvent.addEvent;直接调用 //使用时候,先用addEvent添加事件,然后在handleFun里面直接写其他函数方法,如getEvent; //addEventListener和attachEvent---都是dom2级事件处理程序 var domEvent = { //element:dom对象,event:待处理的事件,handleFun:处理函数 //事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等 addEvent:function(element,event,handleFun){ //addEventListener----应用于mozilla if(element.addEventListener){ element.addEventListener(event,handleFun,false); }//attachEvent----应用于IE else if{ element.attachEvent; }//其他的选择dom0级事件处理程序 else{ //element.onclick===element["on"+event]; element["on"+event] = handleFun; } }, //事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等 removeEvent:function(element,event,handleFun){ //removeEventListener----应用于mozilla if (element.removeEventListener) { element.removeEventListener(event,handleFun,false); }//detachEvent----应用于IE else if  { element.detachEvent; }//其他的选择dom0级事件处理程序 else { element["on"+event] = null; } }, //阻止事件冒泡 stopPropagation:function{ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true;//IE阻止事件冒泡,true代表阻止 } }, //阻止事件默认行为 preventDefault:function{ if{ event.preventDefault(); }else{ event.returnValue = false;//IE阻止事件冒泡,false代表阻止 } }, //获得事件元素 //event.target--非IE //event.srcElement--IE getElement:function{ return event.target || event.srcElement; }, //获得事件 getEvent:function{ return event? event : window.event; }, //获得事件类型 getType:function{ return event.type; } }; 

相信大家对于这个思路已经很清楚了,我直接附上代码

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助。

所有我就不做过多的研究,毕竟我们来讨论js自定义事件,这里给出一个我之前封装过的处理js默认事件的代码:

eventTarget.addEvent("eat",function(){
  console.log(123);  //123
});
eventTarget.fireEvent({type: "eat"});
var eventTarget = { //保存映射 handlers:{}, addEvent: function(){ //处理代码 }, fireEvent: function(){ //触发代码 }, removeEvent: function(){ //移出代码 }};

这种方法有一个缺点,不能删除该处理事件,因为我们是用映射表做的,而且也不提倡,直接给映射表里面存这么多数据,有点多。

我是这样构建这个映射关系的

function b(){
  console.log(123);
}

var target = new EventTarget();
target.addEvent("eat", b);

target.fireEvent({
  type: "eat"
});                 //123

另一种方法,将处理事件提取出来

//DOM0级事件处理程序
var oDiv = document.getElementById('oDiv');
oDiv.onclick = function(){
  alert("你点击了我");
}

原型这种方法,与直接量方法功能是一样的…

接下类我们不如正题,js自定义事件

这是一种调用运行的方法

1.js所支持的浏览器默认事件

浏览器特定行为的事件,或者叫系统事件,js默认事件等等都行,大家知道我指的什么就行,下文我叫他js默认事件。 js默认事件的事件绑定,事件移出等一系列操作,相信大家都有用到过,如:

也可以这样,传递更多的参数

也可以这样,传递更多的参数

浏览器特定行为的事件,或者叫系统事件,js默认事件等等都行,大家知道我指的什么就行,下文我叫他js默认事件。 
js默认事件的事件绑定,事件移出等一系列操作,相信大家都有用到过,如:

handlers = { "type1":[ "fun1", "fun2", // "..." ], "type2":[ "fun1", "fun2" // "..." ] //"..."}

这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下

//DOM0级事件处理程序var oDiv = document.getElementById;oDiv.onclick = function;}

//DOM2级事件处理程序var oDiv = document.getElementById;//非ieoDiv.addEventListener{ alert; //ieoDiv.attachEvent{ alert;

我是这样构建这个映射关系的

1.js所支持的浏览器默认事件

由于前面思路基本都讲清楚了,这里我直接附上代码,大家可以研究下其中的利弊,或许你可以找到更好的方法解决Ta…

相信这样大家还是比较好理解的,然后又有一个问题大家可以想到,那就是,js默认事件,js可以一一对应,知道那个是那个,那么我们的自定义事件呢,这个一一对应的映射表只能我们自己去建立,然后我这样

//直接量处理js自定义事件
var eventTarget = {
  //保存事件类型,处理函数数组映射
  handlers:{},
  //注册给定类型的事件处理程序,
  //type -> 自定义事件类型, handler -> 自定义事件回调函数
  addEvent: function(type, handler){
    //判断事件处理数组是否有该类型事件
    if(eventTarget.handlers[type] == undefined){
      eventTarget.handlers[type] = [];
    }
    //将处理事件push到事件处理数组里面
    eventTarget.handlers[type].push(handler);
  },
  //触发一个事件
  //event -> 为一个js对象,属性中至少包含type属性,
  //因为类型是必须的,其次可以传一些处理函数需要的其他变量参数。(这也是为什么要传js对象的原因)
  fireEvent: function(event){
    //判断是否存在该事件类型
    if(eventTarget.handlers[event.type] instanceof Array){
      var _handler = eventTarget.handlers[event.type];
      //在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
      for(var i = 0; i < _handler.length; i++){
        //执行触发
        _handler[i](event);
      }
    }
  },
  //注销事件
  //type -> 自定义事件类型, handler -> 自定义事件回调函数
  removeEvent: function(type, handler){
    if(eventTarget.handlers[type] instanceof Array){
      var _handler = eventTarget.handlers[type];
      //在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
      for(var i = 0; i < _handler.length; i++){
        //找出本次需要处理的事件下标
        if(_handler[i] == handler){
          break;
        }
      }
      //删除处理事件
      _handler.splice(i, 1);
    }
  }
};

这种方法有一个缺点,不能删除该处理事件,因为我们是用映射表做的,而且也不提倡,直接给映射表里面存这么多数据,有点多。

相信这样大家还是比较好理解的,然后又有一个问题大家可以想到,那就是,js默认事件,js可以一一对应,知道那个是那个,那么我们的自定义事件呢,这个一一对应的映射表只能我们自己去建立,然后我这样

接下类我们不如正题,js自定义事件

var eventTarget = {
  addEvent: function(){
    //添加事件
  },
  fireEvent: function(){
    //触发事件
  },
  removeEvent: function(){
    //移除事件
  }
};

我们平时在操作dom时候经常会用到onclick,onmouseover等一系列浏览器特定行为的事件, 那么自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,在合适的时候需要哪个事件类型,就去调用哪个处理程序

原型这种方法,与直接量方法功能是一样的…

根据上面的封装,我们可以这样构思

handlers = {
  "type1":[
    "fun1",
    "fun2",
    // "..."
  ],
  "type2":[
    "fun1",
    "fun2"
    // "..."
  ]
  //"..."
}

由于前面思路基本都讲清楚了,这里我直接附上代码,大家可以研究下其中的利弊,或许你可以找到更好的方法解决Ta…

所有我就不做过多的研究,毕竟我们来讨论js自定义事件,这里给出一个我之前封装过的处理js默认事件的代码:

//自定义事件构造函数function EventTarget(){ //事件处理程序数组集合 this.handlers = {};}//自定义事件的原型对象EventTarget.prototype = { //设置原型构造函数链 constructor: EventTarget, //注册给定类型的事件处理程序, //type -> 自定义事件类型, handler -> 自定义事件回调函数 addEvent: function{ //判断事件处理数组是否有该类型事件 if(typeof this.handlers[type] == 'undefined'){ this.handlers[type] = []; } //将处理事件push到事件处理数组里面 this.handlers[type].push; }, //触发一个事件 //event -> 为一个js对象,属性中至少包含type属性, //因为类型是必须的,其次可以传一些处理函数需要的其他变量参数。 fireEvent: function{ //模拟真实事件的event if{ event.target = this; } //判断是否存在该事件类型 if(this.handlers[event.type] instanceof Array){ var handlers = this.handlers[event.type]; //在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件 for(var i = 0; i < handlers.length; i++){ //执行触发 handlers[i]; } } }, //注销事件 //type -> 自定义事件类型, handler -> 自定义事件回调函数 removeEvent: function{ //判断是否存在该事件类型 if(this.handlers[type] instanceof Array){ var handlers = this.handlers[type]; //在同一个事件类型下的可能存在多种处理事件 for(var i = 0; i < handlers.length; i++){ //找出本次需要处理的事件下标 if(handlers[i] == handler){ break; } } //从事件处理数组里面删除 handlers.splice; } }};

function b;}var target = new EventTarget();target.addEvent;target.fireEvent; //123

2.对象直接量封装js自定义事件

3.对象原型封装js自定义事件

//自定义事件构造函数
function EventTarget(){
  //事件处理程序数组集合
  this.handlers = {};
}
//自定义事件的原型对象
EventTarget.prototype = {
  //设置原型构造函数链
  constructor: EventTarget,
  //注册给定类型的事件处理程序,
  //type -> 自定义事件类型, handler -> 自定义事件回调函数
  addEvent: function(type, handler){
    //判断事件处理数组是否有该类型事件
    if(typeof this.handlers[type] == 'undefined'){
      this.handlers[type] = [];
    }
    //将处理事件push到事件处理数组里面
    this.handlers[type].push(handler);
  },
  //触发一个事件
  //event -> 为一个js对象,属性中至少包含type属性,
  //因为类型是必须的,其次可以传一些处理函数需要的其他变量参数。(这也是为什么要传js对象的原因)
  fireEvent: function(event){
    //模拟真实事件的event
    if(!event.target){
      event.target = this;
    }
    //判断是否存在该事件类型
    if(this.handlers[event.type] instanceof Array){
      var handlers = this.handlers[event.type];
      //在同一个事件类型下的可能存在多种处理事件,找出本次需要处理的事件
      for(var i = 0; i < handlers.length; i++){
        //执行触发
        handlers[i](event);
      }
    }
  },
  //注销事件
  //type -> 自定义事件类型, handler -> 自定义事件回调函数
  removeEvent: function(type, handler){
    //判断是否存在该事件类型
    if(this.handlers[type] instanceof Array){
      var handlers = this.handlers[type];
      //在同一个事件类型下的可能存在多种处理事件
      for(var i = 0; i < handlers.length; i++){
        //找出本次需要处理的事件下标
        if(handlers[i] == handler){
          break;
        }
      }
      //从事件处理数组里面删除
      handlers.splice(i, 1);
    }
  }
};
//跨浏览器的事件处理程序 
//调用时候直接用domEvent.addEvent( , , );直接调用 
//使用时候,先用addEvent添加事件,然后在handleFun里面直接写其他函数方法,如getEvent; 
//addEventListener和attachEvent---都是dom2级事件处理程序 
var domEvent = { 
  //element:dom对象,event:待处理的事件,handleFun:处理函数 
  //事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等 
  addEvent:function(element,event,handleFun){ 
    //addEventListener----应用于mozilla 
    if(element.addEventListener){ 
      element.addEventListener(event,handleFun,false); 
    }//attachEvent----应用于IE 
    else if(element.attachEvent){ 
      element.attachEvent("on"+event,handleFun); 
    }//其他的选择dom0级事件处理程序 
    else{ 
      //element.onclick===element["on"+event]; 
      element["on"+event] = handleFun; 
    } 
  }, 
  //事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等 
  removeEvent:function(element,event,handleFun){ 
    //removeEventListener----应用于mozilla 
    if (element.removeEventListener) { 
      element.removeEventListener(event,handleFun,false); 
    }//detachEvent----应用于IE 
    else if (element.detachEvent) { 
      element.detachEvent("on"+event,handleFun); 
    }//其他的选择dom0级事件处理程序 
    else { 
      element["on"+event] = null; 
    } 
  }, 
  //阻止事件冒泡 
  stopPropagation:function(event){ 
    if(event.stopPropagation){ 
      event.stopPropagation(); 
    }else{ 
      event.cancelBubble = true;//IE阻止事件冒泡,true代表阻止 
    } 
  }, 
  //阻止事件默认行为 
  preventDefault:function(event){ 
    if(event.preventDefault){ 
      event.preventDefault(); 
    }else{ 
      event.returnValue = false;//IE阻止事件冒泡,false代表阻止 
    } 
  }, 
  //获得事件元素 
  //event.target--非IE 
  //event.srcElement--IE 
  getElement:function(event){ 
    return event.target || event.srcElement; 
  }, 
  //获得事件 
  getEvent:function(event){ 
    return event? event : window.event; 
  }, 
  //获得事件类型 
  getType:function(event){ 
    return event.type; 
  } 
}; 
//DOM2级事件处理程序
var oDiv = document.getElementById('oDiv');

//非ie
oDiv.addEventListener("click",function(){
  alert("你点击了我");
},false); 

//ie
oDiv.attachEvent("onclick", function(){
  alert("你点击了我");
});

另一种方法,将处理事件提取出来(推荐)

编辑:服务器运维 本文来源:javascript如何实现自定义事件,1.js所支持的浏览器

关键词: