进阶任务-9

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

//DOM0监听事件
var btn = document.getElementById('#btn');
btn.onclick = function(){
console.log('DOM0点击事件监听')
}
//this指向元素自身，这种方法的缺点是只听添加一个事件程序，如果多添加了，后面的会把前面的覆盖掉


//DOM2级事件监听
var btn = document.getElementById('#btn');
btn.addEventListener('click/dbclick/mouseover/mouseout.....',function(){
console.log('DOM2事件监听')
})
//这种添加事件监听的方法，比较推荐，可以给一个元素添加多个事件，this指向元素本身

2 .attachEvent与addEventListener的区别？

• 先说说attachEvent，IE浏览器中的事件处理方法，
  1. 只接受2个参数attachEvent('带on的事件名称'，function(){要做事的函数代码})
  2. 这个事件处理程序中，他的作用域是全局作用域，因此this的指向是window
  3. 给目标元素添加多个事件之后，标准浏览器中的执行顺序是按照代码的先后顺序进行执行的，但是attachEvent是按照，最后添加最先执行这样的顺序来的
• addEventListener，标准浏览器中的事件处理方法
  1. 能接受3个参数 addEventListener('不带on的事件名称'，function(){要做事的函数代码},一个布尔值，默认为false意为在冒泡阶段处理事件，为true的时候就是在捕获阶段的时候来处理事件)
  2. 他的作用域是目标元素的作用域，this指向的是当前元素
  3. 给目标元素添加多事件之后，处理顺序与代码顺序一致

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

• IE的事件冒泡传播机制，就和它的字面意思“冒泡”一样，想象一下鱼缸里面的鱼吐泡泡，就能知道，是一种从目标元素自身向“水面”上逐级传播的一个过程
• DOM2事件传播机制，它分完整的3个阶段
  第一阶段是事件捕获阶段，由最上层向下穿透，为截取事件提供机会
  第二阶段是处于目标阶段，实际目标接收事件
  第三阶段是冒泡阶段，从目标元素开始，向上层穿透

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

• 对于标准浏览器来说，直接调用event对象中的stopPropagation()方法，就可以阻止事件冒泡。阻止默认事件的话直接用preventDefault()方法就可以啦
• 对于老IE而言，他的event对象中由cancelBubble属性，默认的值为false，当给它改成true的时候，就可以取消事件冒泡了。如果取消默认的事件行为的话，把returnValue的值设置为false来取消默认的事件行为

5.点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
  function $(id){
        return document.querySelector(id);
    }
  function $$(cla){
        return document.querySelectorAll(cla);
    }
   var liNodes = $$('.ct li')
   liNodes.forEach(
      function(node){
        node.addEventListener('click', function(){
            console.log(this.innerText)
        })
      }
    )
</script>

6. 补全代码

第六题

<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>
// 第6题
   var ulNode = $('.ct'),
       startBtn = $('#btn-add-start'),
       endBtn = $('#btn-add-end'),
       ipt = $('.ipt-add-content'),
       reg =/^\w+$/ ;
      //事件委托，事件冒泡的一种使用方法 显示每个li的内容的需求得到解决
      ulNode.addEventListener('click', function(e){
        if(e.target.tagName.toLowerCase()==='li'){
          console.log(e.target.innerText)
        }
      })
      //头部添加li  dom方法‘insertBefore’不熟 还要多看一下
        startBtn.addEventListener('click', function(){
        var li = document.createElement('li');
        var iptVal = ipt.value;
        if (reg.test(iptVal)) {
         li.innerText  = iptVal;
         ulNode.insertBefore(li,ulNode.firstChild);
        } 
          else {
              console.log('只能由英文，数字，下划线，组成！')
            }
      })
      //尾部添加li 
      endBtn.addEventListener('click', function(){
        var li = document.createElement('li');
        var iptVal = ipt.value;
        if (reg.test(iptVal)) {
         li.innerText  = iptVal;
         ulNode.append(li);
        } 
          else {
              console.log('只能由英文，数字，下划线，组成！')
            }
      })

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

7. 补全代码

第七题代码

<style type="text/css">
.img-preview img{
    width: 400px;
    height: 400px;
}
</style>
<ul class="ct">
    <li data-img="https://ws1.sinaimg.cn/large/006tKfTcly1fj5d2lzwlxj30ny0ogq4p.jpg">查看图片1</li>
    <li data-img="https://ws2.sinaimg.cn/large/006tKfTcly1fj5d4qc4yzj30l411cac8.jpg">查看图片2</li>
</ul>
<div class="img-preview"></div>
<script>
var liNodes = $$('.ct li');
  var imgPre = $('.img-preview');
  liNodes.forEach(function(node){
   node.addEventListener('mouseover', function(e){
    imgPre.innerHTML = '![]('+e.target.dataset.img+')';
   })
  

  })
  

function $(id){
        return document.querySelector(id);
    }
function $$(cla){
        return document.querySelectorAll(cla);
    }


</script>