这篇文章给大家介绍的内容是关于浅析javascript中事件流的内容，有着一定的参考价值，有需要的朋友可以参考一下。
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行，事件是可以被 JavaScript 侦测到的行为
绑定事件
首先我们要先绑定事件 绑定事件有三种
1）在DOM元素中直接绑定，我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等
只可以执行一次 多次使用会跟随文档流所覆盖
只弹出一个 瞅你咋地 你瞅啥被覆盖2）在JavaScript代码中绑定，在JavaScript代码中（即 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发
3）使用事件监听绑定事件
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数
立即学习“Java免费学习笔记（深入）”；
两个都可以正常弹出 跟随文档流执行事件流过程
冒泡 捕获
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从外部到内部。
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从内部到外部
我们有以下代码 点击box3的时候 跟随图片描述 捕获 冒泡
box1
box2
box3
在处于目标阶段的时候 就是在本文中点击box3的时候 如果把冒泡写在捕获前面 会跟随文档流所执行 导致先冒泡 再捕获 这一点一定要注意 如以下
如同图中所示 输出时顺序和你写入时顺序有关
事件委托
什么是事件委托：
事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件
事件委托三部曲：
第一步：给父元素绑定事件
给元素ul添加绑定事件，通过addEventListener为点击事件click添加绑定
第二步：监听子元素的冒泡事件
这里默认是冒泡，点击子元素li会向上冒泡
第三步：找到是哪个子元素的事件
通过匿名回调函数来接收事件对象，通过alert验证
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如图所示
阻止事件
阻止冒泡
我们在上文写了冒泡事件 既然它能冒泡 如果我们不想用这个效果了 那么我们有办法阻止它吗？答案是肯定的。我们直接看代码，能够更加明了
第一次点击
当我们第二次点击的时候 只会弹出一个box1 ，阻止了box2的第二次冒泡
阻止默认事件
在我们网页中 如果我们点击右键是不是会弹出一个框，这里我不会截图 就不给大家展示了，里面会有刷新、粘贴、复制、剪切等等按钮 这个就是浏览器的右键默认事件，我们来尝试下看能不能把它给阻止了。
JTopCMS基于JavaEE自主研发，是用于管理站群内容的国产开源软件(CMS)，能高效便捷地进行内容采编，审核，模板制作，用户交互以及文件等资源的维护。安全，稳定，易扩展，支持国产中间件及数据库，适合建设政府，教育以及企事业单位的站群系统。 系统特色 1. 基于 JAVA 标准自主研发，支持主流国产信创环境，国产数据库以及国产中间件。安全，稳定，经过多次政务与企事业单位项目长期检验，顺利通过
有兴趣的话我们还可以把它变成自己的
{
margin: 0;
padding: 0;
}
.box {
width: 100px;
display: none;
position: relative;
}
ul {
list-style: none;
border: 1px solid rgb(85, 74, 74);
}
ul li {
line-height: 30px;
}
.box ul li:hover {
background: rgb(224, 208, 208);
}
- 重新加载
- 返回上一页
- 另存为
- 翻成中文
- 投射页面
在页面中点击右键就变成了下面这个效果
鼠标事件
DOM3级事件中定义了9个鼠标事件。
click：点击触发 鼠标左键或者回车键
mousedown:鼠标按钮被按下时触发。不能通过键盘触发。
mouseup:鼠标按钮弹起时触发，同样不能被键盘触发
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入目标范围中。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。
下面给大家列举几个
mouseup:鼠标按钮弹起时触发，同样不能被键盘触发
mouseover:鼠标移入目标范围中。鼠标移到其后代元素上时会触发
//当鼠标进入box区域弹出显示框
box.onmouseover=function(){
alert("我进来了")
}mousemove:鼠标在元素内部移到时不断触发。
box.onmousemove=function(){
console.log("自由的行走")
}
会不断的被触发，移动一次触发一次![图片描述][9]键盘事件
-
keydown():
按键按下时，会触发该事件；
2. keyup();
按键松开时，会触发该事件；3. keypress();
敲击按键时触发，和keyup()大致相同 我找了很多资料 却还是没有明确的区别 希望有大佬指点下HTML事件
1.onload 文档加载完成后执行函数
2.select 被选中的时候使用 我的理解是在input中 选中的时候
3.onchange 当内容失去焦点的时候或者改变的时候触发
focus 得到光标的时候使用
5.resize 窗口变化时
以上就是我对js事件的理解，首先谢谢您的观看，文中如果有些不周到的地方还请指点一下，码字不易，请各位多多支持。
相关推荐：
