-
关键词:事件
通过 “事件” 实现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 = ' ![]( ' + dataImg + ' ) ' // 字符串拼接
}
})
</script>