<body> <div></div> <script> (function(){ var elem = document.getElementById('testDiv'); document.body.addEventListener('click',function(){ console.log(elem.getBoundingClientRect()) },false) })() </script> </body>
效果如图：
从效果图上不难看出，当我移动视图后再点击body，打印的对象都能够正确返回元素的大小及其相对于视口的位置
这个方法也可以用于实现当某元素滚动到底/顶部时触发对应事件，相当方便。
Event
1.event.target 和 event.currentTarget
target：指向触发事件的元素
currentTarget：指向被绑定事件句柄的元素
只有当绑定的事件处理程序与触发该事件处理程序都为同一个对象的时候，两者相同
例子代码：
html：
<div> 123 <div>456</div> </div>
js：
document.getElementById('aDiv').addEventListener('click',function(e){ if(e.target === e.currentTarget) { console.log('target === currentTarget') }else{ console.log('target !== currentTarget') } console.log('target',e.target) console.log('currentTarget',e.currentTarget) },false)
效果图：
从效果图中，我们可以看到，当点击456时，target指向的是456所在的bDiv，currentTarget则指向aDiv，因为事件是绑定在aDiv上，但触发是在bDiv上，而且bDiv又在aDiv内，当点击123时，则target与currentTarget一致，绑定和触发都在aDiv上。
2.event.preventDefault() & event.stopPropagation()
preventDefault：如果事件可取消，则取消该事件，而不停止事件的进一步传播
stopPropagation：阻止捕获和冒泡阶段中当前事件的进一步传播
3.event.stopPropagation() & event.stopImmediatePropagation()
stopPropagation：阻止捕获和冒泡阶段中当前事件的进一步传播
stopImmediatePropagation：阻止元素上调用相同事件的其他事件监听并阻止冒泡
两者区别的例子:
html:
<div> 123 <div>456</div> </div>
js:
document.getElementById('aDiv').addEventListener('click',function(){ console.log('click aDiv') },false) document.getElementById('bDiv').addEventListener('click',function(e){ e.stopImmediatePropagation(); console.log('click bDiv') },false) document.getElementById('bDiv').addEventListener('click',function(){ console.log('click me too') },false)
上面代码执行结果为：
click bDiv
注释掉 e.stopImmediatePropagation(); 的结果为：
click bDiv
click me too
click aDIV
虽然都是些简单的知识点，在平常开发中也是很实用的，希望能从细节出发，没事多复习复习 -。-~
后来一时兴起将放大镜写的更傻瓜式配置的插件了... 点我看代码(github地址)