事件
2018-04-27 本文已影响0人
dpeng1203
1：DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0事件的添加形式为：
let btn = document.getElementById("myBtn");
btn.onclick = function(){
//do sth...
console.log(this); // myBtn
}
// 事件以'on'开头，如onmouseover, onmouseout等
使用DOM0级方法指定的事件处理程序被认为是元素的方法，此时事件处理程序是在元素的作用域里中运行，所以此时this指向的是元素本身。而且这种添加方式的缺陷是，只能存在一个处理程序，如果再次向同一个元素添加另外一个处理程序，上一个处理程序会被覆盖。
DOM2级别事件监听使用的方法为：
let btn = document.getElementById("myBtn");
btn.addEventListener("事件名", function(){
//do sth...
console.log(this); // myBtn
});
这样的添加方式比起DOM0级更灵活，它可以给一个同一个元素添加多个处理事件。同时它的this也同样指向元素本身。
2.attachEvent与addEventListener的区别？
- 参数个数不相同，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
- 事件名：attachEvent的事件名与DOM0级事件名一样，都是在具体事件前加上了on；而addEventListener的事件名去掉了on.
- 作用域：在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
- 为一个事件添加多个事件处理程序时：执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)
3.解释IE事件冒泡和DOM2事件传播机制？
ie事件冒泡：是指事件从事件目标节点逐层步的往上层节点传播(如下图)，ie只支持这一种传播机制
image.png
dom2事件传播机制：事件从顶层节点一级一级往下层传播，接着到达目标节点，这部分叫做时间捕获阶段。然后事件又从目标节点逐层往上层节点传播，这部分叫做事件冒泡，这个完整的事件流就是dom2时间的传播机制了(如下图)。
image.png
4.如何阻止事件冒泡？ 如何阻止默认事件？
DOM浏览器
阻止冒泡e.stopPropagation();
阻止默认事件event.preventDefault()
function stopEvent(e) {
e.stopPropagation();
}
e.addEventListener('click', stopEvent, false);
// HTML代码为
// <input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');
cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);
5.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<!DOCTYPE html>
<html lang="en">
<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>事件</title>
</head>
<body>
<ul class = "ct">
<li>这里是</li>
<li>几人股</li>
<li>前端</li>
</ul>
<script>
//方法1，直接给元素绑定事件
var liArr = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
for(var i= 0; i< liArr.length; i++){
liArr[i].addEventListener('click',function(){
console.log(this.innerText)
})
}
//方法二，使用事件代理，把事件监听之间绑定在父容器上，根据事件的来源进行处理
/*
var ct = document.querySelector('.ct');
ct.addEventListener('click',function(e){
console.log(e.target.innerText)
})
*/
</script>
</body>
</html>
6. 要求：
-
当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
-
当点击每一个元素li时控制台展示该元素的文本内容。
<!DOCTYPE html>
<html lang="en">
<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>事件</title>
</head>
<body>
<ul class = "ct">
<li>这里是</li>
<li>几人股</li>
<li>前端</li>
</ul>
<input id = "ipt-add-content" placeholder = "添加内容"/>
<button id = "btn-add-start">开头添加</button>
<button id = "btn-add-end">结尾添加</button>
<script>
var ct = document.querySelector('.ct')
var addStartBtn = document.querySelector('#btn-add-start')
var addEndBtn = document.querySelector('#btn-add-end')
var ipt = document.querySelector('#ipt-add-content')
ct.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
console.log(e.target.innerText)
}
})
addStartBtn.addEventListener('click',function(){
var li = document.createElement('li')
li.innerText = ipt.value
ct.insertBefore(li,ct.firstChild)
})
addEndBtn.addEventListener('click',function(){
var li = document.createElement('li')
li.innerText = ipt.value
ct.appendChild(li)
})
</script>
</body>
</html>
7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<!DOCTYPE html>
<html lang="en">
<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 class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct')
var childs = document.querySelectorAll('li')
var preview = document.querySelector('.img-preview')
for(var i = 0; i< childs.length; i++){
childs[i].addEventListener('mouseenter',function(){
var dataImg = this.getAttribute('data-img')
console.log('下在啊:::' + dataImg)
preview.innerHTML = '<img src = "' + dataImg + '" />'
})
}
</script>
</body>
</html>
