webapi抽取数据方法（webAPI第三天事件流）

事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度，下面我们就来聊聊关于webapi抽取数据方法?接下来我们就一起去了解一下吧!

webapi抽取数据方法

事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。

捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。

// 第三个形参加true就是事件捕获 document.querySelector('.box1').addEventListener('click',function(){ console.log(2); },true) // 第三个形参加flase就是事件冒泡. document.querySelector('.box1').addEventListener('click',function(){ console.log(2); },flase) // 事件冒泡可以不用加flase,因为默认值就是flase.事件捕获需要加true

1- 阻止事件冒泡 e.stopPropagation(),仅在自身实现.

2- 阻止网页跳转 e.preventDefault(), a标签和表单有默认跳转和提交,可以用这个阻止跳转和提交.

// 阻止事件冒泡 document.querySelector('.box1').addEventListener('click',function(e){ console.log(2); e.stopPropagation() },false) // 阻止a标签进行网页跳转 document.querySelector('a').addEventListener('click',function(e){ e.preventDefault() alert('跳转失败了') })

// L0级别写法 box1.onclick = function(){ console.log('注册了事件'); } box2.onclick = function(){ // 将box1身上的点击事件解绑,dom元素.on事件类名 = null box1.onclick = null }

1- 事件委托的原理: 利用事件冒泡的机制(从里往外)将事件注册委托给父元素.

2- 事件委托的优点: 减少代码量,提高浏览器解析速度.

// 获取ul DOM对象 const ul = document.querySelector('ul') // 给ul 注册点击事件 ul.addEventListener('click',function(e){ // e.target 指的是事件触发的元素,事件源.tagName 指的是元素名字. // e.target.tagName === 'LI' 是用排除法将UL/P,给排除了,只有点击LI时,才会触发事件,打印出'hello' if(e.target.tagName === 'LI'){ console.log('hello'); } })

// 2. 给页面注册滚动事件(重点) // 2.1页面 window对象或者document对象注册scroll事件 window.addEventListener('scroll',function(e){ // 2.2 监测页面卷去的距离,要设置变量获取这个值 const jin = document.documentElement.scrollTop // 2.3 当卷起的值大于等于300时,box2这个盒子显示出来,否则就隐藏起来. if(jin >= 300){ box2.style.display = 'block' }else{ box2.style.display = 'none' } })

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

事件名：load

window.addEventListener('load', function() { // xxxxx })

会在窗口尺寸改变的时候触发事件

window.addEventListener('resize', function() { // xxxxx })