DOM事件

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

DOM0事件：
通过javascript制定事件处理程序，就是把一个方法赋值给一个元素的事件处理程序属性。每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个函数，就可以指定事件处理程序。

    // 添加事件处理程序
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
    // 删除事件处理程序
    btn.onclick=null;

DOM2级事件：
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
1. addEventListener
2. removeEventListener
所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1. 事件类型
2. 事件处理方法
3. 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

    var btnClick = document.getElementById('btnClick');
    var handler=function() {
        alert(this.id);
    }
    // 指定事件处理程序
    btnClick.addEventListener('click', handler, false);
    // 删除事件处理程序
    btnClick.removeEventListener('click', handler, false);

attachEvent与addEventListener的区别

浏览器支持情况不同： IE9 以下的浏览器不支持 addEventListener 方法，IE 中有与其类似的事件监听方法 attachEvent() 和 detachEvent()
参数个数不相同：addEventListener 有三个参数 (type, handle, true/false)。attachEventListener 只有两个参数(type, handle)，因为 attachEvent 监听的事件只能发生在冒泡阶段，所以为了兼容性，一般把addEventListener 的第三个参数设为 false。
第一个参数不同：addEvnentListener 第一个参数是一个方法，如 click, scroll。attachEvent 第一个参数是事件名称，如 onclick，onscroll。
事件处理程序的作用域不同： DOM2级事件处理程序所处作用域在所属的元素内进行，此时 this 指向这个元素。使用 attachEvent() 方法时，事件处理程序在全局作用域内进行，此时 this 指向 window。
为一个事件添加多个事件处理程序时，执行顺序不同： addEventListener 添加会按照添加顺序执行，而 attachEvent 添加多个事件处理程序时顺序无规律（在 IE9一下，添加方法较少时，各方法按添加顺序的反顺序进行，添加方法多时则乱序进行）

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

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

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

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

// 阻止事件冒泡
function stopPropgation(e){
  if (e && e.stopPropagation) {
    e.stopPropagation(); // W3C标准
  }else {
    window.event.cancelBubble = true; // IE浏览器
  }
}

// 阻止默认事件
function preventDefault(e){
  if (e && e.stopPropagation) {
    e.preventDefault(); // W3C标准
  }else {
    window.event.returnValue = false; // IE浏览器
  }
}

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

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

补全代码，要求：

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

<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){
    console.log(e.target.innerText);
  });
  
  addEndBtn.addEventListener('click', function(){
     var li = document.createElement('li');
     if(ipt.value !== '') {
       li.innerText = ipt.value;
       ct.appendChild(li);
     } else {
       alert('内容不能为空');
     }
  });
  
  addStartBtn.addEventListener('click', function(){
     var li = document.createElement('li');
     if(ipt.value !== '') {
       li.innerText = ipt.value;
       ct.insertBefore(li,ct.firstChild);
     }else {
       alert('内容不能为空');
     }
  });
</script>

补全代码，要求：

当鼠标放置在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 ct = document.querySelector('.ct');
  var preview = document.querySelector('.img-preview');

  ct.addEventListener('mouseover', function (e) {
    var target = e.target;
    if (target.tagName.toLowerCase() === 'li') {
      var img = document.createElement('img');
      img.src = target.getAttribute('data-img');
      preview.innerHTML = '';
      preview.appendChild(img);
    }
  });
  ct.addEventListener('mouseout', function (e) {
    var target = e.target;
    if (target.tagName.toLowerCase() === 'li') {
      preview.innerHTML = '';
    }
  });
</script>

DOM事件

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

attachEvent与addEventListener的区别

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

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

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

补全代码，要求：

补全代码，要求：

推荐阅读更多精彩内容

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