JS003. 事件监听和监听滚动条的三种参数（ addEventListener( ) ）

全局

1 window.addEventListener('scroll', () => {
2   console.log('------')
3   console.log(document.documentElement.scrollTop, document.body.scrollTop, window.pageYOffset)
4   console.log('------')
5   this.someThing()
6 }, true)

DOM

对单个DOM监听：

document.getElementById("myDiv").addEventListener("click", myFunction)

VUE项目可以通过 ref 代替

this.$refs.someDom.$el.scrollTop
/* 代替 */
document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset

DOM的可视窗口相关属性

• 屏幕可视窗口大小  A    B 

JS： window.innerHeight  标准浏览器及IE9+  ||  document.documentElement.clientHeight  标准浏览器及低版本IE标准模式  ||  document.body.clientHeight  低版本混杂模式

JQ： $(window).height() 

• 浏览器窗口顶部与文档顶部之间的距离（滚动条滚动的距离）  C    D 

JS： window.pageYoffset  IE9+及标准浏览器  ||  document.documentElement.scrollTop  兼容ie低版本的标准模式  ||  document.body.scrollTop  兼容混杂模式

JQ： $(document).scrollTop()

• 元素的尺寸（左JQuery右JS原生）  E    F 

$(o).width() => o.style.width

$(o).innerWidth() => o.style.width+o.style.padding

$(o).outerWidth() => o.offsetWidth = o.style.width+o.style.padding+o.style.border

$(o).outerWidth(true) => o.style.width+o.style.padding+o.style.border+o.style.margin

* 要使用原生的style.xxx方法获取属性，这个元素必须已经有内嵌的样式，如<div style="...."></div>；

* 如果原先是通过外部或内部样式表定义css样式，必须使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]来获取样式值

• 元素的位置信息  G    H 

1)  返回元素相对于文档document顶部的距离

JS： getoffsetTop()

JQ： $(o).offset().top

2)  返回元素相对于文档document左部的距离

JQ： $(o).offset().left

3)  返回元素相对于第一个以定位的父元素的偏移距离

JQ：position()返回一个对象

　　$(o).position().top = style.top

　　$(o).position().left = style.left

 通过上述方法和图示

不在可视区：同时判断元素的两端是否同时不在可视区，两个条件用  &&  衔接

    在可视区：判断是否有一端存在可视区，两个条件用  ||  衔接

addEventListener( ) 方法

语法：

element.addEventListener(event, function, useCapture)

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

* 注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick" 。

 

引用外部函数

element.addEventListener("click", function(){ alert("Hello World!") })

element.addEventListener("click", myFunction)

function myFunction() {
    alert ("Hello World!")
}

事件冒泡 / 事件捕获

事件传递有两种方式：冒泡与捕获。

<div>
    Father
    <p>children</p>
</div>

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture)

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true)

removeEventListener( ) 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄：

element.removeEventListener("mousemove", myFunction)

浏览器兼容处理

var x = document.getElementById("myBtn")
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction)
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction)
}

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄：

element.attachEvent(event, function)
element.detachEvent(event, function)

- END -