js事件的传播机制(实例讲解)
事件的默认传播机制:
捕获阶段:从外向里依次查找元素
目标阶段:从当前事件源本身的操作
冒泡阶段:从内到外依次触发相关的行为(我们最常用的就是冒泡阶段)
具体见下图:
!DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title文档/title style # outer { margin :20 px auto;padding:20px宽度宽度:300像素高度:300 px背景技术: # 008000;} #内部{ padding:20px宽度宽度:200像素高度:200 px背景:蓝色;} # center { padding:20px宽度宽度:100像素高度:100 px背景:黄色;}/样式/头体div id='外部' div id='内部' div id='中心'/div/div/div脚本var outer=文档。getelementbyid(' outer '),inner=document。getelementbyid(' inner '),center=document。getelementbyid(' center ');//使用DOM0级事件绑定给元素的某一个行为绑定的方法,都是在行为触发后的冒泡阶段把方法执行的文件。尸体。onclick=function(){ console。log(' body ')}外部。onclick=function(){ console。日志('外部')}内部。onclick=function(){ console。log(' inner ')居中。onclick=function(){ console。日志('中心')}//addEventListener第一个参数是行为的类型第二个参数是给当前的行为定义的方法第三个参数是控制在哪个阶段发生:真在捕获阶段发生错误的在冒泡阶段发生文件。尸体。addeventslistener(' click ',function(){ console。log(' body ')},false)outer。addeventslistener(' click ',function(){ console。log(' outer ')},true)内部。addeventslistener(' click ',function(){ console。log(' inner ')},false) //输出外部内部正文/脚本/正文/html以上这篇射流研究…事件的传播机制(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
版权声明:js事件的传播机制(实例讲解)是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。