DOM操作

1.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

• DOM0
  DOM0事件处理程序是将一个函数赋值给事件处理程序的属性，每个元素都有自己的事件处理程序属性，这些属性都是小写，如onclick,将元素的属性值设置为一个函数，就可以为元素添加事件处理程序了，如：

var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
  alert(this.id);
};```

这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick

这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可
- DOM2
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
addEventListener
removeEventListener
所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1 事件类型
2 事件处理方法
3 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理刚才的例子我们可以这样写：

var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
btnClick.addEventListener('click', function() {
alert('Hello!');
}, false);

上面代码为button添加了click事件的处理程序，在冒泡阶段触发，与上一种方法一样，这个程序也是在元素的作用域下运行，不过有一个好处，我们可以为click事件添加多个处理程序
通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写

var btnClick = document.getElementById('btnClick');

var handler=function() {
alert(this.id);
}

btnClick.addEventListener('click', handler, false);
btnClick.removeEventListener('click', handler, false);

- 区别：
DOM0只能绑定一个事件处理方法，因为后绑定的方法会覆盖前面的方法。DOM2能绑定多个事件处理方法。
## 2.attachEvent与addEventListener的区别？
区别：
- IE6，7不支持addEventListener方法，使用的事件监听方法是attachEvent
- 参数个数不相同，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理
- 事件名参数不同，attachEvent的事件名与DOM0级事件名一样，都是在具体事件前加上了on；而addEventListener的事件名去掉了on
- 作用域不同，在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window。 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
- 事件处理程序执行顺序不同，通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行。 对于addEventListener的事件处理程序则是按照添加顺序执行

##3.解释IE事件冒泡和DOM2事件传播机制？
- IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。事件冒泡过程如下：


![](https://img.haomeiwen.com/i5657260/431ed24993e4dcaf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 而DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段： 处于目标阶段，此时事件在div上发生，被看做冒泡的一部分。DOM2事件传播过程如下：


![](https://img.haomeiwen.com/i5657260/d9c593b7053800ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##4. 如何阻止事件冒泡？ 如何阻止默认事件？
stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()从而避免注册在body上的事件发生使用方式如下：

<div class="ct">
<div class="box">
<button id="btn">点我</button>
<a href="#" id="link">a链接</a>
</div>
</div>

<script>
var ct = document.querySelector('.ct');
var box = document.querySelector('.box');
var btn = document.querySelector('#btn');
var link = document.querySelector('#link');

ct.addEventListener('click',function(e){
console.log('ct click');
});

box.addEventListener('click',function(e){
console.log('box click');
});

btn.addEventListener('click',function(e){
//使用阻止冒泡后，ct与box不会捕获到btn的点击事件
e.stopPropagation();
console.log('btn click');
});
</script>

如果是IE，可以通过设置事件的cancelBubble属性阻止冒泡，使用方式如下：

function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}

preventDefault()方法可以阻止默认事件，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为

document.getElementsByTagName('a').onclick = function (e) { e.preventDefault();}

##5.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ul = document.querySelector('.ct');
ul.addEventListener('click', function(e) {
var target = e.target;
console.log(target.innerText);
});
</script>

##6.补全代码，要求：
当点击按钮开头添加时在< li>这里是< /li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.当点击每一个元素li时控制台展示该元素的文本内容。

<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>
//你的代码
var ul = document.querySelector('.ct');
var input = document.querySelector('.ipt-add-content');
var btnStart = document.querySelector('#btn-add-start');
var btnEnd = document.querySelector('#btn-add-end');

btnStart.addEventListener('click', function(e) {
    var value = input.value;
    if (value && value.length > 0) {
        var newLi = document.createElement('li');
        newLi.innerText = value;
        ul.insertBefore(newLi, ul.firstChild);
    }
});

btnEnd.addEventListener('click', function(e) {
    var value = input.value;
    if (value && value.length > 0) {
        var newLi = document.createElement('li');
        newLi.innerText = value;
        ul.appendChild(newLi);
    }
});
ul.addEventListener('click', function(e) {
    var target = e.target;
    console.log(target.innerText);
});

</script>

7.补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<ul class="ct">
<li data-img="1.png">鼠标放置查看图片1</li>
<li data-img="2.png">鼠标放置查看图片2</li>
<li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
var ul = document.querySelector('.ct');
var imgPreview = document.querySelector('.img-preview');

ul.addEventListener('mouseover', function(e) {
    var target = e.target;
    if (target.nodeName.toLowerCase() != 'li') {
        return false;
    }
    var imgSrc = target.getAttribute('data-img');
    var img = document.createElement('img');
    img.setAttribute('src', imgSrc);
    img.setAttribute('alt', imgSrc);
    var firstChild = imgPreview.firstChild;
    if (firstChild) {
        imgPreview.replaceChild(img, imgPreview.firstChild);
    } else {
        imgPreview.appendChild(img);
    }
});

</script>