事件

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

• DOM0级方法指定的事件处理程序被认为是元素的方法，就是将一个函数赋值给一个事件处理程序属性（每个元素包括window和document都有自己处理程序的属性）。例如：onclick、onmouseover、onmouseout等。因此，这时候的事件处理程序是在元素的作用域中执行的，DOM0级事件只能覆盖，不会连续触发。
• DOM2级事件’定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener();所有的DOM节点都包含这两种方法。
  它们都接受3个参数：要处理的事件名，事件处理程序的函数，和一个布尔值。 最后一个参数：如果为true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序，DOM2级事件可以连续触发。

题目2： attachEvent与addEventListener的区别？

• attachEvent （不支持addEventListener的旧IE浏览器特有）
  • 只有两个参数（函数名、）
• 只能以冒泡事件触发
• 作用域： 全局变量 this 指向window
• 指定多个同类型事件时，执行顺序无规律（如少量方法还会按顺序执行）
• addEventListener
• 三个参数（事件类型、方法、布尔值）
• 作用域： 元素自身， this 指触发元素
• 指定多个同类型事件时，按添加顺序执行

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

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

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

• stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。

• 要阻止事件的默认行为，可以使用preventDefault()方法，前提是cancelable值为true

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

var lis = document.querySelector('.ct'). querySelectorAll('li'); for (var i = 0;i<lis.length; i++) { lis[i].addEventListener('click',function() { console.log(this.innerText); }) }

var ct = document.querySelector('.ct'); ct.addEventListener('click',function(e) { console.log(e.target.innerText); })

题目6： 补全代码，要求：

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
var content = document.querySelector('.ipt-add-content'); var start = document.querySelector('#btn-add-start'); var end = document.querySelector('#btn-add-end'); var ct = document.querySelector('.ct'); end.addEventListener('click',function(){ var li = document.createElement('li'); li.innerText = content.value; if(li.innerText !=''){ ct.appendChild(li); } }); start.addEventListener('click',function(){ var li = document.createElement('li'); li.innerText = content.value; if(li.innerText !=''){ ct.appendChild(li); } ct.insertBefore(li,ct.firstChild); }); ct.addEventListener('click',function(e){ if(e.target.tagName.toUpperCase()==='LI') console.log(e.target.innerText); });

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

var ct = document.querySelector('.ct'); var imgPre= document.querySelector('.img-preview'); var image = document.createElement('img'); ct.addEventListener('mouseover',function(e) { var path = e.target.getAttribute('data-img'); image.setAttribute('src',path); imgPre.appendChild(image); });