网站被301跳转,网络的推广方式有哪些,现代简约室内设计说明200字,营销推广公司事件流
事件流是指事件完整执行过程中的流动路径
一个事件流需要经过两个阶段#xff1a;捕获阶段#xff0c;冒泡阶段
捕获阶段是在dom树里获取目标元素的过程#xff0c;从大到小
冒泡阶段是获取以后回到开始#xff0c;从小到大#xff0c;像冒泡一样 实际开发中大…事件流
事件流是指事件完整执行过程中的流动路径
一个事件流需要经过两个阶段捕获阶段冒泡阶段
捕获阶段是在dom树里获取目标元素的过程从大到小
冒泡阶段是获取以后回到开始从小到大像冒泡一样 实际开发中大部分只用到了冒泡阶段
事件捕获
从Dom的根元素开始去执行对应的事件从外到里 事件捕获需要写对应代码才能看到效果 dom.addEventListener(事件类型,function(){},true) true是捕获默认是false false是冒泡阶段如果你只使用 L0 事件监听那么事件监听器只会在冒泡阶段触发不会在捕获阶段触发因为ie等浏览器不支持捕获或者说没有冒泡和捕获这个概念 1、事件覆盖情况 L0传统on事件类型注册对于同一个对象如果后面注册了相同类型的事件它会覆盖前面注册的事件。例如如果一个元素上先后注册了两个onclick事件那么只有后面注册的那个事件会被触发。 L2事件监听注册addEventListener使用这种方法注册事件时后面注册的同类型事件不会覆盖前面注册的事件。这意味着可以在同一个元素上注册多个相同类型的事件并且它们都会被触发。 2、事件解绑方式 L0直接使用null赋值就可以实现事件的解绑例如对象.onclick null。 L2解绑事件需要使用removeEventListener方法并传入相应的事件类型、事件处理函数以及捕获或冒泡阶段如果绑定时指定了的话。需要注意的是如果使用匿名函数作为事件处理函数那么将无法解绑该事件因为无法再次引用到相同的匿名函数。 3、执行阶段 L0注册的事件都是在冒泡阶段执行的。 L2注册事件时可以通过第三个参数来指定事件是在捕获阶段还是冒泡阶段执行。如果不指定第三个参数或传入false则事件默认在冒泡阶段执行如果传入true则事件在捕获阶段执行。 事件冒泡 事件冒泡当一个元素的事件被触发时同意的事件将会在该元素的所有祖先元素依次触发 dom.addEventListener(事件类型,function(){}) L2事件监听的第三个参数是false 阻止冒泡
冒泡会把事件传递到父元素有时候我们需要将事件的影响限制到当前元素里就需要阻止事件冒泡
阻止事件冒泡首先要拿到事件对象 这个方法不光可以阻断冒泡可以阻断其他时间流动传播就是说也可以阻断捕获阶段的事件传播 在哪里截断就在哪里加这句方法记住此方法要调用事件对象e
阻止默认行为
有些网页元素有默认行为比如右键弹出菜单栏这种如果想阻止默认事件就需要加上
解绑事件
之前我们只学了监听事件有时候监听结束后不需要监听了就需要解绑事件
在L0旧语法里是这么解绑的 L2里使用addEventListener()添加监听就要使用removeEventListener()来解绑
removeEventListener(事件类型事件处理函数[获取捕获或冒泡阶段])
因为要添加事件处理函数作为参数匿名函数没有名字所以不能被解绑
加了中括号的参数表示可写可不写 fn不能加小括号函数回调不用加小括号
鼠标经过事件的区别 在只有一级没有父子级的时候二者没什么区别
mouseover和mouseout在父子级都存在的时候会有冒泡效果自己的效果会冒泡到父级上
mouseenter和mouseleae则没有这个问题推荐使用这种用法
事件委托
事件相对于快递给很多元素绑定事件的时候在以前我们是才能for循环的方式给每个元素绑定事件就相当于每个快递1对1的送给每个人但是有了驿站就可以把快递托给驿站就不需要一个一个的注册事件这叫事件委托此时的驿站和个人是一种父子级的关系
事件委托是一种事件注册的小技巧
原理当我们想要给很多个子元素注册一样的事件的时候例如点击小圆点切换图片轮播图就需要单独给每个小圆点添加监听但是给父元素添加监听的时候我们触发子元素的时候会冒泡到父元素然后触发父元素绑定的事件。
所以事件委托的原理就是事件冒泡
这样可以提高性能减少注册次数
写一个看看
父元素里的子元素在监听到事件以后会执行父元素绑定的函数 const box document.querySelector(div)box.addEventListener(click, function (e) {//alert(点上了)console.log(e.target);})
点击不同的spane.target的属性值也不一样
根据事件对象的特性改变span的背景颜色 scriptconst box document.querySelector(div)box.addEventListener(click, function (e) {//alert(点上了)console.log(e.target);e.target.style.backgroundColorpurple})/script 但是这样有一个问题父级绑定了以后所有的子级触发事件后都会执行父元素绑定的函数有时候并不是所有的子级都需要触发类名不同或者标签不同的元素不需要这个事件怎么做到分离父级和 一部分子级
事实证明人类对事件对象的开发程度不足1% 展开这个箭头 可以发现这些目标是有nodeName的我们可以靠nodeName来区分只对span添加委托 const box document.querySelector(div)box.addEventListener(click, function (e) {//alert(点上了)//console.log(e);if(e.target.nodeNameSPAN)e.target.style.backgroundColorpurple}) 使用事件委托来重做一下之前的小圆点切换图片功能
一个需要注意的点之前我们是用i来访问选择的li现在没有i了怎么知道选中的是哪个li
使用自定义属性 定义 div data-id0/div 获取 const divdocument.querySelector(div)console.log(div.dataset.id) 像这样来访问li 但是孩子们注意一个问题此时你获得的data-id是字符串不能之间当数字使取过来会当字符串使用
js: //事件委托写法const ul document.querySelector(ul)ul.addEventListener(click, function (e) {//console.log(e.target.dataset.id);// 隐式转换转换为数字型const id e.target.dataset.idtoggle(id)clearInterval(timeId)i idtimeId setInterval(function () {next.click()}, 1000)})
html ul classslider-indicatorli classactive data-id0/lili data-id1/lili data-id2/lili data-id3/li/ul
其它事件
除了之前学的鼠标事件、键盘事件、焦点事件、文本事件等还有其他事件
页面加载事件
在打开一个网页的时候会有许多外部资源被加载比如图片、外联CSS、JavaScript等我们需要等这些元素加载完在打开网页或者在body前面写的js没办法加载dom树所以我们需要等待load
事件名load
window.addEventListener(load,function(){})
load事件的意思是等加载完毕再去执行回调函数
但是现在没什么人这么写因为如果要等待dom树加载完为什么要写body前面呢直接写在body后面就不用操心这个问题了
有时候网络出了问题或者网页加载比较慢的时候网页里会先加载出来html元素css和js等还没有渲染出来。这种只加载出html骨架就触发的事件叫DOMContentLoaded
相比load事件DOMContentLoaded事件触发会比load快因为不用等样式表、图片等外部资源加载好用户体验更好
document.addEventListener(DOMContentLoaded,function(){})
元素滚动事件
页面内有些元素是根据滚动在不同地方的时候出现的这个关于网页滚动的事件就叫scroll(滚动事件)
首先要确定的是谁在滚动window window.addEventListener(scroll, function () {console.log(页面滚动了);})
每滚动1像素就会检测到 介绍页面的新属性 srcollLeft左侧被卷去的距离 srcollTop顶部被卷去的距离 出现的数字有两个特点不带单位、可读写简称可访问可赋值
可以通过页面滚动的距离来设置元素的显示 const elevator document.querySelector(.xianshi)window.addEventListener(scroll, function () {//console.log(页面滚动了);//console.log(document.documentElement.scrollTop)let top document.documentElement.scrollTopif (top 300) {elevator.style.opacity 1}})
说明数据可读可写
页面尺寸事件
随着页面的放大和缩小触发事件 通过clientWidth和clientHeight来获取盒子的宽度 但是clientWidth和clientHeight是不包含padding和border的 而offsetWidth和offsetHeight则可以包含padding和border可以获取宽高 获取尺寸的数据为数值可以方便计算 前提是盒子为可视化盒子如果盒子被隐藏起来了获取的数值为0 offsetLeft和offsetTop可以获取元素距离定位父级元素如果最近一级的父级元素不带定位就往上找一级直到找到带定位的父级元素测量和该元素的距离为offsetLeft的值的左、上距离是只读属性做不了计算
demo
解决问题初次没有active类的报错问题
解决办法先获取类分情况讨论有active这个类/没有这个类
如果当前对象没有这个类就为他添加此类/如果有这个类就去除 html{scroll-behavior: smooth;/* 滑动流畅 */
}
在点击事件之后电梯字体的颜色也要改变来告诉用户当前处于哪个模块
所以只要一滚动就要移除当前的active在滚动之后再加上 本来我觉得单独获取与for循环获取还是后者更方便但是品客老师说这样不方便后期的修改降低的代码的可用性
//电梯函数模块(function () {const elevator document.querySelector(.xtx-elevator)window.addEventListener(scroll, function () {const n document.documentElement.scrollTop// if (n 300) {// elevator.style.opacity 1// } else {// elevator.style.opacity 0// }elevator.style.opacity n 300 ? 1 : 0})const backTop document.querySelector(#backTop)backTop.addEventListener(click, function () {document.documentElement.scrollTop 0//window.scrollTo(0, 0)将页面滚动到指定坐标})})();(function () {//模块变色和点击跳转效果const list document.querySelector(.xtx-elevator-list)list.addEventListener(click, function (e) {if (e.target.tagName A e.target.dataset.name) {const old document.querySelector(.xtx-elevator-list .active)// if (old) old.classList.remove(active)// e.target.classList.add(active)//console.log(document.querySelector(.xtx_goods_${e.target.dataset.name}).offsetTop)const top document.querySelector(.xtx_goods_${e.target.dataset.name}).offsetTopdocument.documentElement.scrollTop top}})window.addEventListener(scroll, function () {const old document.querySelector(.xtx-elevator-list .active)if (old) old.classList.remove(active)// 获取所有 li 元素const news document.querySelector(.xtx_goods_new)const popular document.querySelector(.xtx_goods_popular)const brand document.querySelector(.xtx_goods_brand)const topic document.querySelector(.xtx_goods_topic)const ndocument.documentElement.scrollTopif(nnews.offsetTopnpopular.offsetTop){document.querySelector([data-namenew]).classList.add(active)}else if(npopular.offsetTopnbrand.offsetTop){document.querySelector([data-namepopular]).classList.add(active)}else if(nbrand.offsetTopntopic.offsetTop){document.querySelector([data-namebrand]).classList.add(active)}else if(ntopic.offsetTop){document.querySelector([data-nametopic]).classList.add(active)}})})();
就在此时此刻我的外卖被偷了
我永远痛恨偷外卖的4全家
