背景：在项目开发过程中，使用CDN的方式来运用Vue，列表页面需要下拉分页
思路：向 Window 对象添加事件
window.addEventListener("scroll", this.scrollBottom, true);
第一个参数是时间的类型（如：‘click’，‘mousedown’）
第二个参数是时间触发后需要调用的函数
第三个参数是布尔值，用于描述事件是冒泡还是捕获，该参数是可选的。
new Vue({
el: '#app',
mounted: function () {
window.addEventListener("scroll", this.scrollBottom, true);
},
methods: {
scrollBottom: function(e) {
// 滚动到页面底部时
const el = document.getElementById("app");
const windowHeight = window.screen.height;
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const contentHeight = el.clientHeight;
const toBottom = contentHeight - windowHeight - scrollTop;
if (toBottom < 10 && !this.finished && !this.loading) {
this.loading = true;
// 请求的数据未加载完成时
this.getList();
}
},
}
})
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
