走进javascript——DOM事件

DOM事件模型

在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作。

在2级DOM事件模型中,就比较复杂一些,它将不再是单纯的调用一下自身绑定的事件就完事了,它还拥有机会去处理它的祖先节点,在DOM2级事件模型中,它有一个事件传播过程,分为3个阶段,从“事件捕获”Document开始来到“目标节点”再从“目标节点”冒泡回Document对象,举段代码

  <div id="div">
    <a href="javascript:;">DOM事件模型</a>
  </div>
  <script>
    var div = document.getElementById("div");
    var a = div.children[0];
    document.onclick = function(){
      console.log("document");
    };
    a.onclick = function(){
      console.log("a");
    };
    div.onclick = function(){
      console.log("div");
    };
  </script>

可以看到我只是点击了a元素,但是div和document绑定的事件也被触发了,这就是DOM2级和1级的区别,同时你也看到,它是先输出的a,而不是div和document,虽然说它有3个阶段,但浏览器默认是在冒泡阶段才执行的,如果不这样的话,我们点击a元素就会执行多次啦。

如果你想让浏览器在捕获阶段执行,那么就不能直接使用onclick添加事件了,而是要使用addEventListener添加事件,它的第三个参数就是用来设置在哪个阶段执行,具体可以看 http://www.runoob.com/jsref/met-element-addeventlistener.html

currentTarget

event.currentTarget获取到的是当前绑定事件的那个对象,也因为此原因,他获取到的常常和this一样,下面是一个示例:

  <a href="javascript:;" id="a">evnet.currentTarget</a>
  <script>
    var a = document.getElementById("a");
    a.onclick = function(event){
      console.log("this:",this);
      console.log("currentTarget:",event.currentTarget);
    };
  </script>

当我点击a标签时,this和currentTarget打印出来的都是a标签本身,如下图

既然如此这个currentTarget有啥用呢,这是一开始的想法,但随后发现不对,想到这个currentTarget始终获取到的是那个绑定事件的对象,但this却有很大的不同,因为this并不关心是谁绑定的它,它只关心是谁执行的它,因此如果再将上面那段代码改造改造,我们就会发现,它们真的是不一样的,代码如下:

var a = document.getElementById("a");
    a.onclick = function(event){
      (function(){
        console.log("this:",this);
        console.log("currentTarget:",event.currentTarget);
      }());
    };

效果如图

这也就是说,某些时候如果不能通过this来获取绑定事件的对象时,就可以使用event.currentTarget。

有些人认为event.currentTarget就是this,其实不然,容易把event.currentTarget当成this,主要原因就是,在事件处理器中,我们常常使用的是this,而不是event.currentTarget,至于为什么,反正我是因为从接触js开始,所看过的教程上都是那么用的,时间长了,竟然忘了一件事,event.currentTarget才是真的属于事件处理器的,而this不过是个冒牌货。

target

event.target获取到的是触发事件的那个元素。

网上常说的事件委派,就是通过event.target来实现的,所谓的事件委派,就是我并不给某个具体的东西添加事件,而通过给它的父辈添加事件,当我点击那个具体的元素时,父辈的事件会触发(因为有事件冒泡),而这时就需要用到evnet.target了,因为在父辈的事件中this并不指向当前点击的那个元素,但是event.target可以获取到是谁触发的当前事件。以下是一个示例

  <ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>
  <script>
    var ul = document.getElementById("ul");
    ul.onclick = function(event){
      console.log(event.target);
    };
  </script>

当我点击第二个li时,输出如下值

当然我们也可以直接给这三个li添加事件,但是那样的话就绑定了3次事件,如果有1万个元素,就绑定了1万次,而通过事件委派则只需要绑定一次。

最主要倒也不是说不能给li添加事件,而是如果这些li并不是事先添加的,而是通过后端返回的数据,再渲染的,那么要是我们再放回数据之前就给li添加事件,那么就会有问题,因为根本就不存在li元素,也就是说后添加的元素无法事先去添加事件,比如下面这段代码就有些问题。

  <ul id="ul">
    <li>1111</li>
  </ul>
  <script>
    var ul = document.getElementById("ul");
    var lis = ul.children;
    for(var i=0;i<lis.length;i++){
      lis[i].onclick = function(){
        console.log(this);
      };
    }
    
    var li = document.createElement("li");
    li.innerText = "2222";
    ul.appendChild(li);
  </script>

当我点击第二个li时,什么都没有输出,如下图

因为第二个li是在for循环以后添加的,所有并没有给第二个li添加上事件。而如果是给ui添加事件,那就不一样了,代码如下

  <ul id="ul">
    <li>1111</li>
  </ul>
  <script>
    var ul = document.getElementById("ul");
    ul.onclick = function(event){
      console.log(event.target);
    };

    var li = document.createElement("li");
    li.innerText = "2222";
    ul.appendChild(li);
  </script>

不管我点击第几个li都可以正常的输出,如下图

不过因为event.target获取到的是最终触发这个事件的元素,所以在写代码的时候,我们经常需要加上判断,因为通过event.target获取到的不一定是我们想要的元素,比如下面这个例子

  <ul id="ul">
    <li>
      <em>111</em>
    </li>
  </ul>
  <script>
    var ul = document.getElementById("ul");
    ul.onclick = function(event){
      console.log(event.target);
    };
  </script>

当我点击111的时候,获取到的是em标签,如下图

但我想要的是li,因此我们就得加上判断,我经常使用的一招就是,通过判断元素的标签名,代码如下

  <ul id="ul">
    <li>
      <em>111</em>
    </li>
  </ul>
  <script>
    var ul = document.getElementById("ul");
    ul.onclick = function(event){
      var target = event.target;
      if(!(target.tagName.toLowerCase()==="li")){
        target = target.parentNode;
      }
      if(target.tagName.toLowerCase()==="li"){
        console.log(target);
      }
    };
  </script>

tagName可以获取到元素名,但是每个浏览器获取到的都有可能不同,有些浏览器获取到的是大写的标签名,有些浏览器获取到的是小写的标签名,因此在上面那段代码中,将标签名都转换成小写的,通过判断标签名来确定是不是我要的元素。

虽然这种判断可行,但仔细想想也能想到,这个方法,也是有缺陷的,如果DOM比较复杂,则容易判断错误,目前还没有想到更好的方法。

记住正是因为有了事件捕获和事件冒泡才有了event.target的用武之处。

relatedTarget

在event中有一个relatedTarget属性,它可以获取到和它相关的元素(通过谁来到这个元素上的,要到哪个元素上去),举个例子

  <div id="box">
    <p>新的起点,新的梦想。</p>
  </div>
  <script>
    var box = document.getElementById("box");

    box.onmouseout = function(event){
      console.log(event.relatedTarget);
    };
  </script>

在onmouseout中relatedTarget可以获取到它要到哪个元素上去,相反在onmouseover中relatedTarget获取到的是从哪个元素来的,代码如下

  <div id="box">
    <p>新的起点,新的梦想。</p>
  </div>
  <script>
    var box = document.getElementById("box");

    box.onmouseover = function(event){
      console.log(event.relatedTarget);
    };
  </script>

可以看到当我从html移入到div上时,relatedTarget获取到的是html,也就是它从html来到div的。

想起一句话:我从哪里来,又要到哪里去。

当第一次看到这个属性的时候,给我的感觉是,它肯定是很有用的,事实上也确实有些用处,如果细心的朋友,看上面的那个动画图,会发现一件事,onmouseover和onmouseout存在一个问题,离开或进入它的子元素事件也会被触发。大多数情况我们是不希望这样的,因此如果使用onmouseover或onmouseout时,最好判断一下,是否真的移出了盒子。

在元素中有一个contains方法,可以用来判断某个元素是否是它的子元素,如果是返回true,否则返回false,而以上问题我们就可以通过这个方法来写,代码如下

  <div id="box">
    <p>1111111
      <em>新的起点,新的梦想。</em>
    </p>
  </div>
  <script>
    var box = document.getElementById("box");

    box.onmouseout = function(event){
      if(!this.contains(event.relatedTarget)){
        console.log(this);
      }
    };
  </script>

如果你只是想解决以上这个问题,那么大可不必这样写,因为在浏览器中,分别有两个和它们相同的事件,但它们并没有这个问题,分别是onmouseenter鼠标移入事件和onmouseleave鼠标移出事件。

需要注意的是relatedTarget属性只对onmouseout和onmouseover事件有用,虽然对onmouseenter和onmouseleave事件也有用,不过很少有人会那么去用,因为我发现relatedTarget属性除了用在解决上面那个问题以外,还真没发现有什么其他的用处。

注意点

需要注意一点,在普通函数中是不存在event对象的,只有在事件中才有,比如这么这段代码,如果使用event就会输出undefined。

(function(event){
  console.log(event); //undefined
})();

自定义事件

官方提供了一些如onclick、onmouseover、onscroll等事件给我们使用,但难免也会有自己建立事件的需求,比如监听某个变量的变化,虽然听起来好像不太可能,但方法总是有的,我们不让使用者直接操作某个变量,而是提供一个方法给他操作,下面是一段实现思路。

  <script>
    var Foo = (function(){
      var a = 10;
      return {
        get:function(){
          return a;
        },
        set:function(value){
          if(a!==value){
            a = value;
            this.change();
          }
        },
        change:function(){
          console.log("a的值有变化");
        }
      };
    })();
    
    Foo.set(9);
    Foo.set(52);
  </script>

以上我将变量a封死在函数作用域里面,让外部无法直接操作变量a,要操作就只能通过调用我事先设置的set方法,之所以要这样弄是因为我们是无法知道变量是什么时候改变了的,而如果让使用者操作我们提供事先提供的方法,那么我们就可以对其进行处理了。

以上并不是一个自定义事件,如果想要实现自定义方法,我们可以通过javascript提供的3个方法来弄,分别是document.createEvent()、event.initEvent()、element.dispatchEvent()。

  • createEvent用来创建一个新的事件
  • initEvent用来初始化事件
  • dispatchEvent用来触发事件

具体可以看 http://www.w3school.com.cn/xmldom/met_event_initevent.asp

实现如下

  <script>
    var ev = document.createEvent("HTMLEvents");
    ev.initEvent("changeA",false,false);

    var Foo = (function(){
      var a = 10;
      return {
        get:function(){
          return a;
        },
        set:function(value){
          if(a!==value){
            a = value;
            document.dispatchEvent(ev);
          }
        }
      };
    })();
    
    document.addEventListener("changeA",function(){
      console.log("a有变化",Foo.get());
    });

    Foo.set(555);
    Foo.set(520);

  </script>

以上也就是将set中的change方法改成dispatchEvent,用来触发changeA事件,如果你想要解绑这个事件,和你给onclick事件解绑是一样的。

IE attachEvent之坑

当我们通过attachEvent添加事件时,需要注意一件事,我们为它添加的事件函数,IE并没有将这个函数作为元素的方法调用,而是作为全局函数来调用,因此,它里面的this并不指向当前绑定的事件对象,而是window,并且event也不指向当前事件对象,看下面这段代码

  <a href="javascript:;" id="a">addEventListener</a>
  <script>
    var a = document.getElementById("a");
    a.attachEvent("onclick",function(){
      console.log("this:",this);
      console.log("currentTarget:",event.currentTarget);
    });
  </script>

当我点击a标签时,输出如下:




posted @ 2017-02-17 18:17 追梦子 阅读(...) 评论(...) 编辑 收藏