js高级程序设计(第13章小结)

1.元素大小

之前对于元素的偏移量和其扩展的属性与方法了解的不是太清楚，这里对下面的几个属性和方法做一下简单的汇总和区别。

• offsetWidth: 它是包含元素的宽度和边框的宽度

• offsetHeight: 它是包含元素的高度和边框的高度

• clientWidth: 它是包含元素的宽度和内边距

• clientHeight: 它是包含元素的高度和内边距

• offsetLeft: 它是元素的左外边框和左内边框之间的距离

• offsetTop: 它是元素的上外边框和上内边框之间的距离

  /** 内宽和内高**/

• innerHeight: 它是元素的高度+内边距（不包含边框）

• innerWidth: 它是元素的宽度+内边距（不包含边框）

• outerHeight: 没有参数时，它是元素的高度+内边距+边框，参数为true时，则为元素的高度+内边距+边框+外边距

• outerWidth: 没有参数时，它是元素的宽度+内边距+边框，参数为true时，则为元素的宽度+内边距+边框+外边距

  参考链接：http://www.cnblogs.com/jiji262/archive/2013/04/26/3045345.html

2.addEventListener和removeEventListener

在js中，这两个方法是用于处理指定和删除事件处理程序的操作，他们都接受3个参数，分别是触发的事件名，事件处理函数，是否进行捕获的布尔值(use capture)。默认是false，即冒泡。

但是这里面的第二个参数可能出现意外的情况，因为它们可能不是同一个函数。

const btn = document.querySelector("#btn");
// 我们知道DOM0级对一个元素绑定事件后再移除相应的事件，可以像下面这样。(一)
btn.onclick = () => {
  console.log(this.id); // "btn"，这里的this就是当前触发的元素，通过this可以访问该元素的任何属                               性和方法
}
// 移除该事件
btn.onclick = null;

// 在DOM2级上对一个元素绑定处理事件，则是像下面这样，尤其是移除事件的时候。(二)
btn.addEventLIstener("click", function() {
  console.log(this.value); // 获取到按钮的value值
}, false);
  ......
// 移除事件
btn.removeEventListener("click", function() {
  //移除事件处理程序
}, false);

结果发现上面（二）写法在移除事件的时候，并未生效，这是因为第二个参数已经不一样了，即匿名函数不同，这是因为其作用域不同导致的。

我们可以通过将这个函数定义为局部变量，再去移除就可以了。

// 定义一个变量式的函数
const handleEvent = function() {
  console.log(this.id);
}
// 添加事件监听
btn.addEventLIstener("click", handleEvent, false);
// 移除事件监听
btn.removeEventListener("click", handleEvent, false); // 生效

注意：最近在使用react，这里的事件名不是像react一样的驼峰命名，而是全部小写，并且进行监听的时候，第一个参数不再是onclick，而是click。在IE中，支持的attach�Event和detachEvent，参数有两个，分别为事件名（onClick，而不是click），第二个参数是事件处理程序，移除事件和addEventListener的方式相同，并且在为同一元素添加attach�Event事件时，在执行的时候是按相反的顺序执行的。**

3.事件中的this、target、currentTarget

在js中这三者的区别就在于事件绑定的时，事件发生真正的目标。this和event.currentTarget永远指向的都是绑定事件的元素或者当前处理事件的元素，而event.target则是事件发生的目标元素。

// 加入在html代码中有这么一层嵌套

  test btn

const btn = document.query.selector("#btn");
// 给body元素添加绑定事件处理程序
document.body.onclick = function(e) {
  alert(this === document.body);  // true
  alert(e.currentTarget === document.body); // true
  alert(e.target === btn);  // true，找到了事件发生的目标元素
}

这里的目标元素之所以是按钮元素，是因为事件先捕获，而按钮元素上没有注册事件处理程序，所以又冒泡到了body元素上。事件流的过程（捕获（type:1）->处于目标（type: 2）->冒泡（type: 3））。