js事件监听：addEventListener() 与 移除事件：removeEventListener()
说事件绑定得先说事件流
事件流
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。
来个例子看一下吧！
-
<!DOCTYPE html>
-
<html>
-
<head lang="en">
-
<meta charset="UTF-8">
-
<title>
</title>
-
</head>
-
<body>
-
<div id="myDiv">Click me!
</div>
-
</body>
-
</html>
当点击了div时事件流走向，
在冒泡型事件流中click事件传播顺序为：<div> =》<body> =》<html> =》document
在捕获型事件流中click事件传播顺序为：document =》<html> =》<body> =》<div>
这里之所以说冒泡，并不是视图上的冒泡，而是结构上的冒泡。这里要弄清楚了，就算在视图上div是独立的，但他的在html结构
结构上依旧是被body所包裹。而冒泡是由内而外向上冒泡。
懂了冒泡之后，捕获就好理解了，就是反向的事件流。由外而内。
事件处理
以上明白了事件流，现在说说怎样处理事件。
HTML事件处理：
直接在标签内绑定事件，例如：<button οnclick="something（）"></button>
这里直接将js内something函数绑定到button上。
缺点：
1.一个方法需要多次引用，而且不符合 行为、结构、样式 相分离的原则。
2.当js的函数名更改，html标签内的方法也需要更改。
DOM 0级事件处理：
在<script>中获取dom元素绑定事件，例如：btn.onclick = function () {}
0级事件处理的较HTML事件处理的有点很明显，他完全写在<script>内，符合 行为、结构、样式 相分离的原则。还可以选出DOM元素集合通过for循环统一操作。
缺点：每个DOM元素只能绑定一个同类事件。例如绑定onclick，当你想在绑定onclick会发现他被覆盖了。
DOM 2级事件处理（事件监听）
addEventListener("事件名" , "事件处理函数" , "布尔值");
false 事件冒泡 true 事件捕获
优点相比前两个就多了。可以选择是事件流。可绑定多个同类事件。事件名可以组成字符串。
到今天的主题了~~
addEventListener() 和 removeEventListener()
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>addEventListener
</title>
-
<script type="text/javascript" src="js/jquery-3.0.0.js">
</script>
-
<style type="text/css">
-
#content{
-
width:
100px;
-
height:
100px;
-
background:
#f9f;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="content">
</div>
-
<script type="text/javascript">
-
//addEventListener 用于向指定元素添加事件句柄
-
//可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件
-
-
var content =
document.getElementById(
"content");
-
content.addEventListener(
"click",
function(){
-
-
console.log(
"11");
-
},
false)
-
content.addEventListener(
"click",
function(){
-
-
console.log(
"22");
-
},
false)
-
content.addEventListener(
"mouseenter",add,
false);
-
function add(){
-
console.log(
"成哥没我帅");
-
}
-
//由于成哥并不这么认为，一再用自身的权势让我更改这个事实，所以下面我需要再移出这个事件
-
content.removeEventListener(
"mouseenter",add,
false);
-
</script>
-
</body>
-
</html>
注意：removeEventListener() 不能移除匿名函数，像上面add()这种是可以的。removeEventListener需要知道你需要移出的是哪个事件处理函数。匿名函数丢弃了自身函数名，所以移出不了。
下面再讲一些补充吧。
阻止默认事件preventDefault()
-
-
document.body.addEventListener(
'touchmove',
function (event) {
-
event.preventDefault();
-
},
false)；
阻止事件冒泡stopPropagation()
解释：只点击了button，但是包含button的div也执行了，这属于事件冒泡，事件逐级向上传递，传给了div，有时并不需要事件冒泡，可以通过stopPropagation()
-
<div id="div">
-
<button id="btn">按钮
</button>
-
</div>
-
<script>
-
document.getElementById(
"btn").addEventListener(
"click",showType);
-
document.getElementById(
"div").addEventListener(
"click",showDiv);
-
function showType(event){
-
alert(event.type);
-
event.stopPropagation();
-
}
-
-
function showDiv(){
-
alert(
"div");
-
}
-
</script>
事件代理
这里归类可能没归好，也看看吧
传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。
事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理
传统事件处理，为每个元素添加事件处理器，代码如下：
-
<!DOCTYPE html>
-
<html lang="zh">
-
<head>
-
<meta charset="UTF-8" />
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
-
<title>Document
</title>
-
</head>
-
<body>
-
<ul id="color-list">
-
<li>red
</li>
-
<li>orange
</li>
-
<li>yellow
</li>
-
<li>green
</li>
-
<li>blue
</li>
-
<li>indigo
</li>
-
<li>purple
</li>
-
</ul>
-
<script>
-
(
function(){
-
var colorList=
document.getElementById(
"color-list");
-
var colors=colorList.getElementsByTagName(
"li");
-
for(
var i=
0;i<colors.length;i++)
-
{
-
colors[i].addEventListener(
'click',showColor,
false);
-
};
-
function showColor(e)
-
{
-
e=e||
window.event;
-
var targetElement=e.target||e.srcElement;
-
alert(targetElement.innerHTML);
-
}
-
})();
-
</script>
-
-
</body>
-
</html>
事件代理的处理方式，代码如下：
-
<!DOCTYPE html>
-
<html lang="zh">
-
<head>
-
<meta charset="UTF-8" />
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
-
<title>Document
</title>
-
</head>
-
<body>
-
<ul id="color-list">
-
<li>red
</li>
-
<li>orange
</li>
-
<li>yellow
</li>
-
<li>green
</li>
-
<li>blue
</li>
-
<li>indigo
</li>
-
<li>purple
</li>
-
</ul>
-
<script>
-
(
function(){
-
var colorList=
document.getElementById(
"color-list");
-
colorList.addEventListener(
'click',showColor,
false);
-
function showColor (e) {
-
e=e||
window.event;
-
var targetElement=e.target||e.srcElement;
-
if(targetElement.nodeName.toLowerCase()===
"li"){
-
alert(targetElement.innerHTML);
-
}
-
}
-
})();
-
</script>
-
-
</body>
-
</html>
事件代理的好处
总结一下事件代理的好处：
- 将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
- DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。
而代理事件需要注意的是事件冒泡， 例如：Li里有span，这时我只想操作Li那我就要用到阻止冒泡了。
好了，就到这里吧。本次分享到这里就结束了，作者自身的技术不是很好，如果有哪里误导了大家，请留言提醒我一下。
最后我的同学有想知道事件名 点击这里【JavaScript 事件参考手册】
并不是很全，不过够用了，里面没有提及触屏事件等等。
# 欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
- 全新的界面设计 ，将会带来全新的写作体验；
- 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
- 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
- 全新的 KaTeX数学公式 语法；
- 增加了支持甘特图的mermaid语法1 功能；
- 增加了 多屏幕编辑 Markdown文章功能；
- 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
- 增加了 检查列表 功能。
功能快捷键
撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G
合理的创建标题，有助于目录的生成
直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片: 
带尺寸的图片:
居中的图片: 
居中并且带尺寸的图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的：
| 项目 | Value |
|---|---|
| 电脑 | $1600 |
| 手机 | $12 |
| 导管 | $1 |
设定内容居中、居左、居右
使用:---------:居中
使用:----------居左
使用----------:居右
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：
| TYPE | ASCII | HTML |
|---|---|---|
| Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
| Quotes | "Isn't this fun?" | “Isn’t this fun?” |
| Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
创建一个自定义列表
-
Markdown
- Text-to- HTML conversion tool Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。2
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能，丰富你的文章
- 关于 甘特图 语法，参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：
这将产生一个流程图。:
- 关于 Mermaid 语法，参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
注脚的解释 ↩︎
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
