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代码中有这么一层嵌套 <body> <button id="btn">test btn</button> </body>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））。
网友评论