javascript事件流捕获与冒泡

事件通常与函数配合使用&＃xff0c;这样就可以通过发生的事件来驱动函数执行&＃xff0c;事件是可以被 Javascript 侦测到的行为

首先我们要先绑定事件 绑定事件有三种

1&＃xff09;在DOM元素中直接绑定&＃xff0c;我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等只可以执行一次 多次使用会跟随文档流所覆盖

2&＃xff09;在Javascript代码中绑定&＃xff0c;在Javascript代码中&＃xff08;即 script 标签内&＃xff09;绑定事件可以使Javascript代码与HTML标签分离&＃xff0c;文档结构清晰&＃xff0c;便于管理和开发

3&＃xff09;使用事件监听绑定事件
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数

冒泡 捕获

DOM标准规定事件流包括三个阶段&＃xff1a;事件捕获阶段、处于目标阶段和事件冒泡阶段。
捕获型事件流&＃xff1a;事件的传播是从最不特定的事件目标到最特定的事件目标。即从外部到内部。
冒泡型事件流&＃xff1a;事件的传播是从最特定的事件目标到最不特定的事件目标。即从内部到外部

我们有以下代码 点击box3的时候 跟随图片描述 捕获 冒泡


在处于目标阶段的时候 就是在本文中点击box3的时候 如果把冒泡写在捕获前面 会跟随文档流所执行 导致先冒泡 再捕获 这一点一定要注意 如以下

如同图中所示 输出时顺序和你写入时顺序有关

什么是事件委托&＃xff1a;
事件委托——给父元素绑定事件&＃xff0c;用来监听子元素的冒泡事件&＃xff0c;并找到是哪个子元素的事件
事件委托三部曲&＃xff1a;
第一步&＃xff1a;给父元素绑定事件
给元素ul添加绑定事件&＃xff0c;通过addEventListener为点击事件click添加绑定
第二步&＃xff1a;监听子元素的冒泡事件
这里默认是冒泡&＃xff0c;点击子元素li会向上冒泡
第三步&＃xff1a;找到是哪个子元素的事件
通过匿名回调函数来接收事件对象&＃xff0c;通过alert验证

如图所示

• 阻止冒泡

我们在上文写了冒泡事件 既然它能冒泡 如果我们不想用这个效果了 那么我们有办法阻止它吗&＃xff1f;答案是肯定的。我们直接看代码&＃xff0c;能够更加明了

第一次点击

当我们第二次点击的时候 只会弹出一个box1 &＃xff0c;阻止了box2的第二次冒泡

• 阻止默认事件

在我们网页中 如果我们点击右键是不是会弹出一个框&＃xff0c;这里我不会截图 就不给大家展示了&＃xff0c;里面会有刷新、粘贴、复制、剪切等等按钮 这个就是浏览器的右键默认事件&＃xff0c;我们来尝试下看能不能把它给阻止了。

有兴趣的话我们还可以把它变成自己的

在页面中点击右键就变成了下面这个效果

鼠标事件

DOM3级事件中定义了9个鼠标事件。
click&＃xff1a;点击触发 鼠标左键或者回车键
mousedown:鼠标按钮被按下时触发。不能通过键盘触发。
mouseup:鼠标按钮弹起时触发&＃xff0c;同样不能被键盘触发
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入目标范围中。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发&＃xff0c;该事件不冒泡&＃xff0c;即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发&＃xff0c;该事件不冒泡&＃xff0c;即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。

下面给大家列举几个

mouseup:鼠标按钮弹起时触发&＃xff0c;同样不能被键盘触发

mouseover:鼠标移入目标范围中。鼠标移到其后代元素上时会触发
//当鼠标进入box区域弹出显示框

box.onmouseover&＃61;function(){alert("我进来了")}

mousemove:鼠标在元素内部移到时不断触发。

box.onmousemove&＃61;function(){console.log("自由的行走")}会不断的被触发&＃xff0c;移动一次触发一次![图片描述][9]

键盘事件

1. keydown():

   按键按下时&＃xff0c;会触发该事件&＃xff1b;


2. keyup();按键松开时&＃xff0c;会触发该事件&＃xff1b;


3. keypress();敲击按键时触发&＃xff0c;和keyup()大致相同 我找了很多资料 却还是没有明确的区别 希望有大佬指点下

HTML事件

1.onload 文档加载完成后执行函数

2.select 被选中的时候使用 我的理解是在input中 选中的时候

3.onchange 当内容失去焦点的时候或者改变的时候触发

1. focus 得到光标的时候使用

5.resize 窗口变化时

以上就是我对js事件的理解&＃xff0c;首先谢谢您的观看&＃xff0c;文中如果有些不周到的地方还请指点一下&＃xff0c;码字不易&＃xff0c;请各位多多支持。