事件 - 简书

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

DOM0级事件

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

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
   var btnClick = document.getElementById('btnClick');
   btnClick.onclick = function showMessage() {
       alert(this.id);
   };
</script>

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

这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可。

DOM2级事件

DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

addEventListener
removeEventListener

所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

事件类型
事件处理方法
布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
刚才的例子我们可以这样写（默认false冒泡阶段触发）

<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>

上面代码为button添加了click事件的处理程序，在冒泡阶段触发，与上一种方法一样，这个程序也是在元素的作用域下运行，不过有一个好处，我们可以为click事件添加多个处理程序

<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);

    btnClick.addEventListener('click', function() {
        alert('Hello!');
    }, false);
</script>

这样两个事件处理程序会在用户点击button后按照添加顺序依次执行。

通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

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

    btnClick.addEventListener('click', handler, false);
    btnClick.removeEventListener('click', handler, false);
</script>

题目2： attachEvent与addEventListener的区别？

attachEvent 是IE浏览器的事件侦听函数，addEventListener是DOM2级事件侦听函数。在添加事件处理程序事addEventListener和attachEvent主要有几个区别：

参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id
为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

题目3：解释IE事件冒泡和DOM2事件传播机制？

IE事件冒泡：事件是从开始由最具体的元素接收，然后逐级向上传播到父级元素
DOM2事件传播机制：DOM2事件规定事件包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生事件捕获阶段，截取事件提供机会从父级元素逐级向下传播，然后实际目标接收事件处于目标阶段，最后事件冒泡阶段开始逐级向上传传播。

题目4：如何阻止事件冒泡？如何阻止默认事件？

//支持DOM2级事件的浏览器
阻止冒泡event.stopPropagation();
阻止默认事件event.preventDefault()  //event.cancelable = true 的时候才可以阻止默认行为

//IE浏览器
阻止冒泡event.cancelBubble = true;
阻止默认事件event.returnValue = false;

题目5：

<body>
  <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端n班</li>
  </ul>
  <script>
  var src = $('.ct');
  src.addEventListener('click', function(e){
    var e = e||window.event;
    var target = e.target || e.srcElemnet;
    if (target.tagName.toLowerCase() === 'li') {
      console.log(target.innerText);
    }
  })

  function $(node) {
    return document.querySelector(node);
  }
  function $$(node) {
    return document.querySelectorAll(node);
  }
  </script>
</body>

题目6：

<body>
  <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 container = $('.ct');
    var addContent = $('.ipt-add-content');
   $('#btn-add-start').addEventListener('click', function(){
     var newItem = document.createElement('li');
     newItem.innerText = addContent.value;
     container.insertBefore(newItem, container.children[0]);
   })
   $('#btn-add-end').addEventListener('click', function(){
     var newItem = document.createElement('li');
     newItem.innerText = addContent.value;
     container.appendChild(newItem);
   })
   container.addEventListener('click', function(e){
     var e = e||window.event;
     var target = e.target||e.srcElemnet;
     if (target.tagName.toLowerCase() === 'li') {
       console.log(target.innerText);
     }
   })

  function $(node) {
    return document.querySelector(node);
  }
  function $$(node) {
    return document.querySelectorAll(node);
  }
  </script>
</body>

题目7：

<body>
  <ul class="ct">
      <li data-img="http://img0.imgtn.bdimg.com/it/u=3877181383,2953432979&fm=214&gp=0.jpg">鼠标放置查看图片1</li>
      <li data-img="http://img2.imgtn.bdimg.com/it/u=1591234727,3952528363&fm=26&gp=0.jpg">鼠标放置查看图片2</li>
      <li data-img="http://img0.imgtn.bdimg.com/it/u=240837337,670283303&fm=26&gp=0.jpg">鼠标放置查看图片3</li>
  </ul>
  <div class="img-preview"></div>

  <script>
  var container = $('.ct');
  var preview = $('.img-preview');
  container.addEventListener('mouseover' ,function(e){
    var e = e||window.event;
    var target = e.target||e.srcElemnet;
    console.log(target)
    if (target.tagName.toLowerCase() === 'li') {
      preview.innerHTML = '![]( + target.getAttribute()';
    }
  })

  function $(node) {
    return document.querySelector(node);
  }
  </script>
</body>

事件

事件

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

DOM0级事件

DOM2级事件

题目2： attachEvent与addEventListener的区别？

题目3：解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？如何阻止默认事件？

题目5：

题目6：

题目7：

相关阅读更多精彩内容

友情链接更多精彩内容

事件

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

DOM0级事件

DOM2级事件

题目2： attachEvent与addEventListener的区别？

题目3： 解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？ 如何阻止默认事件？

题目5：

题目6：

题目7：

相关阅读更多精彩内容

友情链接更多精彩内容

题目3：解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？如何阻止默认事件？