学习指js绑定事件

由于ie中绑定事件的bug,所以产生了用原生的实践操作来模拟事件绑定的方法,跟着李炎恢学的一招。

function addEvent(obj, type, fn){

  if(obj.addEventListener){

    obj.addEventListener(type, fn, false);

  }else{

  if(!obj.events) obj.events = {};

    if(!obj.events[type]) {

      obj.events[type] = [];

      if(obj[‘on‘+ type]) obj.events[type][0] = fn;    //这一步的时候  其实我看到的视频和文档上李炎恢大神并没有说清楚为什么要加个判断,仅仅说了一句可以减少一次绑定,没说为什么。多看几遍之后发现,是因为如果不加判断,会在页面加载之后,还不需要出发事件呢,他就绑定了第一个函数。所以需要确认,只有在我们需要绑定函数的时候,才能将函数赋值到数组的第一位上。

    }else{

      if(addEvent.equal(obj.events[type], fn)) return false;  //对所有已经绑定的同类型事件进行循环,如果当前需要绑定的事件,已经绑定过一次,则跳出事件绑定。

    }

    obj.events[type][addEvent.ID++] = fn;  //非初次绑定事件的累加

    obj[‘on‘ + type] = addEvent.exec;  //执行所有已经绑定的事件

}

}

addEvent.ID = 1;

addEvent.equal = function(es, fn){      //遍历保存的事件,如果有与新增的绑定事件相同的事件,则新增的事件不予绑定

  for(var i in es){

    if(es[i] == fn) return true;

  }

  return false;

}

addEvent.exec = function(e){

  var e = e || addEvent.fixEvent(window.event);

  var es = this.events[e.type];      //这里有个小坑,由于上面主体函数参数名也有一个type,所以很容易误解为两个type是一样的,其实并不是。参数type仅仅是一个参数名称,没有具体的意义,可以改成任何参数名称,但是这里的type是事件对象e的一个属性,可以获取当前出发的究竟是什么事件类型。

  for (var i in es){

    es[i].call(this, e);          //使用call,主要目的是为了传递参数this和e  

  }

}

addEvent.fixEvent = function(ev){

  ev.preventDefault = function(){

    this.returnValue = false;

  }

  ev.stopPropagation = function(){

    this.cancelBubble = true;

  }

  ev.target = window.event.srcElement;

  return ev;

}

巩固复习一遍。

时间: 2024-11-06 17:34:01

学习指js绑定事件的相关文章

JS绑定事件和移除事件的处理方法

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值.最有这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /

jquery绑定事件以及js绑定事件

jquery绑定事件: <div id="click1">bind事件</div><!--如果有动态元素,不能触发--> <div id="click2">one</div><!--只能点击一次--> <div id="click3">live</div><!--已经弃用--> <div id="click4"&g

Arc gis api for js 学习随笔之绑定事件鼠标动作

1 var map; 2 require(["esri/map", "dojo/domReady!"], function(Map) { 3 map = new Map("GHL", { 4 5 zoom: 3, 6 basemap: "topo", 7 logo:false, 8 9 10 }); 11 dojo.connect(map,"onMouseMove",function(e){ 12 var

js绑定事件和解绑事件

在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEventListener方法   兼容火狐谷歌,不兼容IE8及以下 addEventListener方法 div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春

js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法

js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真(存在),假设为真则用attachEvent()方法.否则的话就用addEventListener(). 另外,为了避免每次绑定事件时都要做推断.能够封装一个函数myAddEvent(obj,ev,fn){}. 代码例如以下: <!DOCTYPE html> <html> <hea

js 绑定事件

创建一个js的绑定事件,而这个需要一个addEventListener事件.在js里不要将事件写在标签里 <!DOCTYPE html> <html> <head> <style media="screen"> #canvas{ /*background-image: url(orangebgimage.jpg);*/ border: 1px solid #001100; } </style> </head> &l

[jquery]高级篇--js绑定事件

参考:  http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法.$(selector).on(event,childSelector,data,function,map)由此扩展开来的几个以前常见的方法有.bind() 1 $("p").bind("click",function(){ 2 alert("The paragraph was clicked.&

关于JS绑定事件,基础

两种绑定方式 第一种为(DOM0):obj.onclick = fn; 第二种为(DOM2): ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ie6到10) 2.事件名称有on 3.事件函数执行的顺序:标准ie->正序 非标准ie->倒序 4.this指向window 标准:obj.addEventListener(事件名称,事件函数,是否捕获); 1.有捕获 2.事件名称没有on 3.事件执行的顺序是正序 4.this触发该事件的

vue.js绑定事件

<div class="close-wrapper" @click="hideDetail"> <i class="icon-close"></i> </div> <div class="detail" v-show="detailShow" > 一些内容 </div> @click 其实是v-on指令的缩写 <script ty