JavaScript的DOM事件操作

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

• DOM0事件有两种写入事件
• 在标签内写onclick事件

<input type="button" value="Click Here" onclick="alert('Clicked!');" />

• 将一个函数赋值给一个事件处理属性

<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
btnClick.onclick = null;  // 删除事件处理程序；
</script>

• DOM2事件定义了2个方法，用于处理指定和删除事件处理程序的操作；并且它们都接受三个参数(事件类型, 事件处理方法, 布尔参数)
• addEventListener();

<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);
</script>

• removeEventListener();

<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.removeEventListener('click', function() {
        alert(this.id);
    }, false);
</script>

• 布尔参数说明：如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

attachEvent与addEventListener的区别？

• attachEvent() 接受2个参数，第一个参数是事件名称，第二个参数是要处理的函数；由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序会被添加到冒泡阶段；
• addEventListener 接受3个参数，第一个参数是事件名称，第二个参数是要处理的函数，第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理；
• 事件处理程序的作用域不相同，attachEvent事件处理程序会在全局变量内运行，this => window，addEventListener的作用域是元素本身，this是指的触发元素。
• 单独给一个事件添加多个事件处理程序时，执行顺序不同，attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，addEventListener添加会按照添加顺序执行。

解释IE事件冒泡和DOM2事件传播机制？

• IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

  
  IE的事件冒泡

• DOM2事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

  
  DOM2事件流

如何阻止事件冒泡？ 如何阻止默认事件？

• 阻止事件冒泡
  • e.stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡
  • IE下使用 e.cancelBubble = true; 默认为false，设置为true后可以取消事件冒泡
• 阻止默认事件
  • e.preventDefault(); 方法可以阻止默认行为
• IE下使用 e.returnValue = false; 默认为true，设为false可以取消事件默认行为

实例操作1

• 要求当点击每一个元素li时控制台展示该元素的文本内容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<script>
var ct = document.querySelector('.ct');
ct.addEventListener('click', function(e){
    console.log(e.target.innerText); // 点击后返回结果
});
</script>

实例操作2

• 当点击按钮开头添加时在<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 ct = $('.ct');
$('#btn-add-start').addEventListener('click', function(e){
    var createLi = document.createElement('li');
    var content = $('.ipt-add-content').value;
    if(content){
        createLi.innerText = content;
        ct.insertBefore(createLi, ct.firstChild );
    }
})
$('#btn-add-end').addEventListener('click', function(e){
    var createLi = document.createElement('li');
    var content = $('.ipt-add-content').value;
    if(content){
        createLi.innerText = content;
        ct.appendChild(createLi);
    }
})
$('.ct').addEventListener('click', function(e){
    console.log(e.target.innerText)
})
function $(el){
    return document.querySelector(el);
}
</script>

实例操作2

• 当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<ul class="ct">
    <li data-img="https://jscode.me/user_avatar/jscode.me/bolong/64/3978_1.png">鼠标放置查看图片1</li>
    <li data-img="https://jscode.me/user_avatar/jscode.me/bolong/64/3978_2.png">鼠标放置查看图片2</li>
    <li data-img="https://jscode.me/uploads/default/original/1X/270d05f57fc86712517c9a6d58dc282505365271.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct');
var li = document.querySelectorAll('.ct li');
var preview = document.querySelector('.img-preview');
// 第一种方法 给li 添加事件
for (var i = 0; i < li.length; i++) {
    li[i].addEventListener('mouseenter', function () {
        var img = this.getAttribute('data-img');
        preview.innerHTML = '![](' + img + ')';
    })
}
// 第二种方法 给父级添加一个事件，然后去找它的子级
// ct.addEventListener('mouseover', function(event) {
//  if(event.target.nodeName.toLowerCase() === 'li'){
//      var img = document.createElement('img');
//         img.src = event.target.getAttribute('data-img');
//         preview.appendChild(img);
//  }
// });
// 添加移出事件
ct.addEventListener('mouseout', function (event) {
    if (event.target.nodeName.toLowerCase() === 'li') {
        preview.innerHTML = '';
    }
});
</script>

事件函数封装

JavaScript事件兼容的函数