关于DOM0级事件和this指向的理解

2018-02-05T21:52:27

当时被一个问题困扰了为什么鼠标点击有效果、移动没有效果,以下是代码片段

window.onload = function () {
  var kk = document.getElementsByTagName("input")[0];
  kk.onclick = function () {
    this.style.color = "red";
  }
  kk.onmouseout = ck(this, "green");
  function ck(btn, cc) {
    btn.style.color = cc;
  }
}

1.首先我这边犯了一个错误DOM0级事件调用函数,直接调用函数名即可。

kk.onmouseout = ck;

如果通过事件调用的是带括号的函数,在浏览器刷新完就会立马执行函数,而不是在点击之后或者移入移出之后才调用;也就是说你无论是鼠标点击还是鼠标移入移出,这个函数的执行与他们无关,他都会自动运行;相当于:

window.onload = function () {
  var kk = document.getElementsByTagName("input")[0];
  kk.onclick = function () {
    this.style.color = "red";
  }
  // 直接调用
  ck(this, "green");
  function ck(btn, cc) {
    btn.style.color = cc;
  }
}

2、封装的ck函数直接被调用了,而传递进这个函数的参数又是this;问题就来了,这个this指向的是谁?这个this指向的是window对象;window对象是没有style这个属性的,所以你最后的结果是浏览器报错:cannot set property 'color' of undefined;

3、下面是修改后的代码:

window.onload = function () {
  var btn = document.getElementsByTagName('input')[0];
  function clicked(e) {
    var e = this;
    e.style.color = 'red';
  }
  function mouseOut(e) {
    var e = this;
    e.style.color = '#ccc';
  }
  // 通过事件调用函数
  btn.onclick = clicked;
  btn.onmouseout = mouseOut;
}

 

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。