zoukankan      html  css  js  c++  java
  • 原生js:事件绑定(call,修改this指向)

    js中的事件,一般有两种写法:

    1、常规:o.onclcik=fn(){}     

    常规方法比较好理解(一般事件前选用“on...” ie你懂得,其他的也可以兼容)

    不过对一个对象进行相同事件处理的时候,容易引发方法覆盖

    var div=document.getElementById("div1");
    div.onclick=function(){ alert(1) }
    div.onclick=function(){ alert(2) }
    div.onclick=function(){ alert(3) }

    只弹出3

    2、事件绑定:

    可以避免常规的方法覆盖,有利多人协作

    在封装一些方法,需要后期修改“事件”的时候优势很明显

    好现在聊聊浏览器兼容吧,额!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ie:   o.attachEvent(ev,fn);(他命的是this指向,默认都是指向window的得call() “靠!”一下)

    w3c:  o.addEventListener(ev,fn,false);  

    像我这样倾向于用原生js的同学们,封装是务必要做的工作,废话少说下面直接给方法:

    function on(o,ev,fn){
    	if(o.addEventListener){//ff,webkit
    		o.addEventListener(ev,fn,false);
    	}else if(o.attachEvent){//ie 8-
    		o.attachEvent('on'+ev,function(){//默认指向window
    			fn.call(o,arguments); //改变this指向
    		});
    	}
    }
    

    现在再试试:

    on(div,"click",function(){alert(1)})
    on(div,"click",function(){alert(2)})
    on(div,"click",function(){alert(3)})

    w3c:1,2,3

    ie:3,2,1

    说不上 完美!!! 但是最起码都有啦

    关于事件绑定和ie的this指向,个人感觉这篇文章也是不错的attachEvent 中this指向 有兴趣可以看看

  • 相关阅读:
    让8个数码管全部显示数字
    程序存储空间与内存
    点亮数码管,显示具体的数字
    为什么点亮小灯时,有时是输入数字0,有时是数字1
    循环点亮LED灯
    keil 编程时,总是中英文切换时,格式混乱。
    点亮LED灯
    学生管理系统(C 大一期末作业)
    ivew ui
    git常见操作
  • 原文地址:https://www.cnblogs.com/SongYiJian/p/4992026.html
Copyright © 2011-2022 走看看