• 学习浅谈事件监听


    看过不少关于事件绑定(事件监听)的文章,曾经也白痴过。现在稍微懂点,仅给初学者了解。

    初期看到这个事件很陌生,因为作为美工的我负责的是拔特效,写一些下拉菜单。

    直到有一天,当写一个模拟select菜单的时候遇见一个问题,当时和我另外一个同事写的东西通用了一个id的特效,但是我的代码被覆盖了。

    知道网上搜索才了解到解决方法。

    事件:addEventListener//FF,Chorme..

            attachEvent//ie

    例子:

    window.onload = function(){

      var oDiv=document.getElementById('div1');

      oDiv.onclick=function(){

        alert('a');

      }

      oDiv.onclick=function(){

        alert('b');

      }

    }

    //弹出的内容会是b.    a不会出现

    利用事件监听

    window.onload = function(){

      var oDiv=document.getElementById('div1');

      if(oDiv.addEventListener){//兼容ff  chorme

        oDiv.addEventListener('click',fn,false);

        oDiv.addEventListener('click',function(){

          alert(2);

        },false);

      }

      else{

        oDiv.attachEvent('onclick',fn);

        oDiv.attachEvent('onclick',    

          function(){

            alert(2);

          }

        ); 

      }

    }

    function fn(){

      alert(1);

    }

    //这样我们添加几个事件他都会执行  唯一的区别就是ie6,7,8和其他浏览器弹出的顺序不一样。ff和chorme弹出是1,2  而6,7,8弹出的是2,1。

    下面让我们来写一个完整的通用的事件监听

    //通用部分

    function getAddEvent(obj,ev,fn){

      if(obj.addEventListener){

        obj.addEventListener(ev,fn,false);//特有形式加false具体怎么理解,我也不知道

      }

      else{

        obj.attachEvent('on'+ev,fn);

      }

      }

    window.onload=function(){
      var oDiv = document.getElementById('div1')
      getAddEvent(oDiv,'click',function(){
        alert(1);
      })
      getAddEvent(oDiv,'click',function(){
        alert(2);
      })
    }

    综合了以前所学的写了一个基本方法专门调用事件

    style

    #div1{ 200px; height:100px; background:#F00;}

    html

    <div id="div1"></div>

    js

    var eventUtil={
      addEvent:function(obj,ev,fn){//添加事件绑定
        if(obj.addEventListener){
          obj.addEventListener(ev,fn,false);
        }
        else{
          obj.attachEvent('on'+ev,fn);
        }
      },
    reomveEvent:function(obj,ev,fn){//移除事件绑定
          if(obj.addEventListener){
            obj.removeEventListener(ev,fn,false);
            return true;
          }
          else{
            obj.detachEvent('on'+ev,fn);
            return true;
            }
          },
    getStyle:function(obj,name){//获取css样式
          if(obj.currentStyle){
            return obj.currentStyle[name];
          }
          else{
            return getComputedStyle(obj,null)[name];
          }
         }
    }
    window.onload=function(){
      var oDiv= document.getElementById('div1');
      console.log(eventUtil.getStyle(oDiv,'width'));
      eventUtil.addEvent(oDiv,'click',function(){alert(1)});
    }

  • 相关阅读:
    [LintCode] 1563. Shortest path to the destination
    [LintCode] 1835. Number of Ways to Stay in the Same Place After Some Steps I
    [Algo] 140. Maximum Path Sum Binary Tree III
    [Algo] 141. Binary Tree Path Sum To Target III
    [LintCode] 597. Subtree with Maximum Average
    [LintCode] 596. Minimum Subtree
    [LC] 16. 3Sum Closest
    [Algo] 182. 2 Sum All Pair II
    [Algo] 181. 2 Sum All Pair I
    创建ORACLE 查询用户
  • 原文地址:https://www.cnblogs.com/dm511418503/p/2959241.html
Copyright © 2020-2023  润新知