河南视频网站建设公司,wap网站生成小程序,深圳市住房和城乡建设局网站首页,c2c网址事件流#xff1a; 描述的页面接收事件的顺序。先进行事件捕获 到达目标元素 在进行事件冒泡
分为事件捕获和事件冒泡 事件冒泡#xff1a;从具体元素从内向外依次触发事件 从下面这个小案例可以清楚了解什么是事件冒泡
!DOCTYPE html
html langen…事件流 描述的页面接收事件的顺序。先进行事件捕获 到达目标元素 在进行事件冒泡
分为事件捕获和事件冒泡 事件冒泡从具体元素从内向外依次触发事件 从下面这个小案例可以清楚了解什么是事件冒泡
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.outer{width: 300px;height: 300px;background-color: red;margin: 0 auto;padding: 50px;box-sizing: border-box;}.center{width: 200px;height: 200px;background-color: pink;padding: 50px;box-sizing: border-box;}.inner{width: 100px;height: 100px;/* 渐变色 线性渐变 */background-image: linear-gradient(red,orange,cyan);}/style
/head
bodydiv classouterdiv classcenterdiv classinner/div/div/divscriptvar outer document.querySelector(.outer)var center document.querySelector(.center)var inner document.querySelector(.inner)// 给outer绑定事件outer.onclick function(){alert(outer);console.log(event,事件对象);console.log(event.target,事件目标源);console.log(event.currentTarget,当前正在执行事件的元素);}// 给center绑定事件center.onclick function(){alert(center);console.log(event.target,事件目标源);console.log(event.currentTarget,当前正在执行事件的元素);}// 给inner绑定事件inner.onclick function(){alert(inner);console.log(event.target,事件目标源);console.log(event.currentTarget,当前正在执行事件的元素);}/script
/body
/html 浏览器运行结果如下 从浏览器运行结果可以看出它是从内向外一层一层向上冒泡。 那么如果我们不想让事件进行冒泡也就是说当我们点击最里面的小方块时只弹框inner那么就可以调用event.stopPropagation();这个方法来阻止事件冒泡。 事件捕获从最不具体的元素从外向内依次触发事件 从下面这个小案例可以清楚了解什么是事件冒泡
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.outer{width: 300px;height: 300px;background-color: red;margin: 0 auto;padding: 50px;box-sizing: border-box;}.center{width: 200px;height: 200px;background-color: pink;padding: 50px;box-sizing: border-box;}.inner{width: 100px;height: 100px;/* 渐变色 线性渐变 */background-image: linear-gradient(red,orange,cyan);}/style
/head
bodydiv classouterdiv classcenterdiv classinner/div/div/divscriptvar outer document.querySelector(.outer)var center document.querySelector(.center)var inner document.querySelector(.inner)function handler1(){alert(我是outer);}function handler2(){alert(我是center);}function handler3(){alert(我是inner);}outer.addEventListener(click,handler1,true)center.addEventListener(click,handler2,true)inner.addEventListener(click,handler3,true)/script
/body
/html
浏览器运行结果如下 从浏览器运行结果可以看出它是从外向内一层一层进行捕获的。
DOM0级事件和DOM2级事件 DOM0级 绑定事件------不可以追加同一类型事件 元素.on事件类型 function(){} 解绑事件 元素.on事件类型 null; DOM2级: 绑定事件 可以追加同一类型事件 元素.addEventListener(事件类型,事件处理程序,true/false)true 表示事件在捕获阶段执行false表示事件在冒泡阶段执行默认为false。 解绑事件 元素.removeEventListener(事件类型,具名处理程序)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton点击我/buttonscript// dom0级绑定 元素.on事件类别 事件处理程序// dom0级同一类型事件不可以追加 后面事件的会覆盖前面的var btn document.querySelector(button);btn.onclick function(){alert(我被点击了)}// btn.onclick function(){// alert(我第二次被点击了)// }// dom0级事件解绑btn.onclick null;/*** DOM2级事件* dom2级事件绑定 addEventListener(事件类型事件处理程序true/flase 表示的是事件在捕获或者冒泡阶段执行)* 默认为flase 表示事件在冒泡阶段执行 true表示进行事件捕获*/function handler(){alert(第一次触发)}function handler1(){alert(第二次触发)}btn.addEventListener(click,handler,false)btn.addEventListener(click,handler1,false)// dom2级事件解绑 removeEventListener(事件类型具名处理程序)btn.removeEventListener(click,handler)/script
/body
/html
阻止事件默认行为 event.perventDefault(); 正常情况下当我们点击a标签或者提交按钮时会进行页面跳转但是如果我们给a标签绑定单击事件并阻止它的默认行为那它就无法跳转。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actiontext.phpinput typesubmit value提交/forma hrefhttps://asdasdasda页面跳转/ascriptvar input document.querySelector(input)var a document.querySelector(a)input.onclick function(){// 阻止元素的默认行为event.preventDefault();}a.onclick function(){// 阻止元素的默认行为event.preventDefault();}/script
/body
/html
