JS事件
-
关键词：事件
通过 “事件” 实现JavaScript和HTML的交互
1. DOM0事件和DOM2级在事件监听使用方式上有何区别？
事件处理程序（事件监听器）有以下几种：
(1)HTML事件处理程序；(2)DOM0级事件处理程序；
(3)DOM2级事件处理程序；(4)IE事件处理程序；
-
（1）HTML事件处理程序
-
元素支持的每种事件，都可以使用一个HTML属性来指定：该属性与相应事件处理程序同名；该属性的值应该是，可执行的 JavaScript 代码
-
本质：直接将事件添加至HTML结构里的HTML元素上
-
在HTML事件处理程序中，可包含要执行的具体动作，也可调用在页面其它地方定义的脚本（封装的函数）
-
缺点
(1)HTML代码和JS代码紧密耦合，不便于维护，所以不推荐使用
(2)当事件处理程序未完成加载，此时用户触发事件，就会报错 -
（2）DOM0级事件处理程序
-
通过JS指定事件处理程序，这是一种传统方式：将一个函数，赋值给一个事件处理程序的属性。这种方式具有跨浏览器的优势。
-
每个元素都有自己的事件处理程序属性，这些属性通常全部小写，将这种属性的值设置为一个函数，就可以指定事件处理程序
-
一般步骤：这种添加事件的方法叫做DOM0级事件处理程序
1.在JS中取得元素对象
2.给元素对象添加事件属性
3.给元素对象删除事件属性 -
缺点
可同时绑定几个不同的事件，但不能同时绑定多个相同的事件：围绕同一事件只能添加一个事件处理程序，否则会发生覆盖，最终结果只执行最后一个事件处理程序 -
（3）DOM2级事件处理程序
-
定义两个方法专门用于添加事件处理程序（
addEventListener()）和删除事件处理程序（removeEventListener()） -
所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1.事件类型, 2.事件处理程序的函数, 3.布尔值（用于设置事件触发阶段：冒泡或捕获） -
注意：此种方法存在兼容问题，IE8及以下不支持
-
好处：围绕同一事件可添加多个事件处理程序，并按照事件被添加的顺序触发
-
（4）IE事件处理程序
-
IE实现了与DOM2级类似的两个方法：添加事件处理程序（
attachEvent()）和删除事件处理程序（detachEvent()） -
这两个方法接受两个参数
1.事件处理程序的名称, 2.事件处理程序的函数
注：IE8及以下仅支持事件冒泡，所以不存在布尔值这个参数 -
与上述三种事件处理程序不同，IE事件处理程序的
this指向window，而非被绑定事件的元素
2. addEventListener()与attachEvent()的区别？
- 1 接受参数数量不同
- addEventListener()接受三个参数：1事件类型, 2事件处理方法, 3布尔参数
- attachEvent()接受两个参数：1事件处理程序名称, 2事件处理程序方法
- 2 第一个参数意义不同
- addEventListener()：第一个参数为 “事件类型” ，例如 click
- attachEvent()：第一个参数为 “事件处理程序名称” ，例如 onclick
- 3 事件处理程序的作用域不同
- addEventListener()：作用域是元素本身，this是指的触发元素
- attachEvent()：作用域处于全局作用域下，this是window
- 4 为一个事件添加多个事件处理程序时，执行顺序不同
- addEventListener()：按照添加顺序执行
- attachEvent()：执行顺序无规律
3. 解释IE事件冒泡和DOM2事件传播机制？
- 事件：是文档或浏览器窗口中发生的，特定的交互瞬间（HTML 和 JS 都是通过事件进行交互）
- 事件流：描述的是从页面中接受事件的顺序——
事件发生时，会在元素节点（触发源）与整个文档节点之间按照特定的顺序传播，
事件所经过的路径上的所有节点都会感知到该事件，这个传播过程即 DOM 事件流。
- 事件流传播顺序
- IE事件冒泡：事件最开始，由最具体的元素接收（文档中嵌套层次最深的那个节点），然后逐级向上传播至最不具体的那个节点（document 文档）
- Netscape事件捕获：事件最开始，不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件
- DOM2事件流：由事件捕获和事件冒泡共同组成
首先，按照事件捕获阶段顺序传播（不太具体节点 → 最具体节点）
其次，事件到达目标元素阶段（经过第一次传播，到达具体节点）
最后，按照事件冒泡阶段顺序传播（最具体节点 → 不太具体节点）
图示：三种事件流
4. 如何阻止事件冒泡？ 如何阻止默认事件？
- 阻止冒泡
- 阻止冒泡，相当于拦截事件：在某个节点终止事件传播，致使传播路径上该节点的后续元素无法感知到该事件
- DOM中：可以调用方法
stopPropagation() - IE中：可以进行赋值：
cancelBubble（默认为false，设置为true后可以取消事件冒泡） - 阻止默认事件
- 与转义符号的功能有些相似，即：使目标自身的特殊功能失效
- DOM中：可以调用方法
preventDefault() - IE中：可以进行赋值：
returnValue（默认为true，设为false可以取消事件默认行为）
5. 补全JS代码
-
要求当点击每一个元素li时控制台展示该元素的文本内容（不考虑兼容）
-
思路：为目标元素添加事件处理程序，当发生事件时，执行对应函数
-
示例预览
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
// 代码补全，可有两种方法实现，1事件代理，2循环遍历
// ----------------------此处使用事件代理--------------------------
// 获取DOM节点
var ct = document.querySelector('.ct');
// 使用事件代理，对容器添加事件处理程序
ct.addEventListener('click', function (e) {
// 判断触发源，防止容器触发事件导致不正常效果
if(clickNode.tagName.toLowerCase() === 'li'){
// 控制台打印触发源的文本内容
console.log(e.target.innerText);
}
})
</script>
6. 补全JS代码
-
当点击按钮
开头添加时在第一个li元素前添加一个新元素 -
当点击按钮
结尾添加时在最后一个li 元素后添加一个新元素 -
当点击每一个元素li时控制台展示该元素的文本内容。
-
思路：1创建一个新元素；2获取用户输入；3添加元素到页面指定位置
-
示例预览：输入内容为非空字符串
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
// 代码补全
// ------------------------------------------------------------------
// 获取DOM节点
var ct = document.querySelector('.ct')，
ipt = document.querySelector('.ipt-add-content')，
start = document.querySelector('#btn-add-start')，
end = document.querySelector('#btn-add-end');
// 为 按钮：开头添加 绑定事件处理程序
start.addEventListener('click', function(){
// 思路：1创建一个新元素 2获取用户输入 3添加元素到页面指定位置
var li = document.createElement('li');
li.innerText = iptAddContent.value;
ct.insertBefore(li, ct.firstChild);
})
// 为 按钮：结尾添加 绑定事件处理程序
end.addEventListener('click', function(e){
var li = document.createElement('li');
li.innerText = iptAddContent.value;
ct.appendChild(li);
})
// 使用事件代理，添加事件处理程序
ct.addEventListener('click', function(e){
if(e.target.tagName.toLowerCase() === 'li'){
console.log(e.target.innerText);
}
})
</script>
7. 补全代码
-
要求：当鼠标放置在 li元素 上，会在 img-preview 里展示当前 li元素 的 data-img 对应的图片
-
思路：1获得触发源的 data-img 属性值；2组装HTML结构放到指定位置
-
示例预览
<ul class="ct">
<li data-img="1.jpg">鼠标放置查看图片1</li>
<li data-img="2.jpg">鼠标放置查看图片2</li>
<li data-img="3.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
// 代码补全
// ------------------------------------------------------------------
// 获取DOM节点
var ct = document.querySelector('.ct');
var panal = document.querySelector('.img-preview');
// 使用事件代理，对 li 元素 添加事件处理程序
ct.addEventListener('mouseover', function(e){
if(e.target.tagName.toLowerCase() === 'li'){
// 思路：1获得触发源的 data-img 属性值；2组装HTML结构放到指定位置【本质为tab切换，也可使用for循环+增减display值来实现】
var dataImg = e.target.getAttribute('data-img');
panal.innerHTML = '  ' // 字符串拼接
}
})
</script>
