事件 - 简书

1.DOM事件和DOM2级在事件监听使用方式上有啥区别？

事件监听器也叫事件处理程序，是为了响应某个事件的方法

DOM事件监听方式
1.HTML内联方式

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

2.JavaScript指定事件处理程序
把一个方法赋值给一个元素的事件处理程序属性

<input id="btnClick" type="button" value="Click Here2">
<body>
<script>
var btnClick=document.getElementById('btnClick');
btnClick.onclick=function shoeMessage(){
    alert(this.id);
}
</script>

DOM2事件监听方式
DOM2事件处理程序，定义了两个方法用于处理指定和删除事件处理程序的操作;所有的DOM方法都包含这两个方法，并且接受三个参数
1.addEventListener
2.removeEventListener
参数：
1.事件类型（click，mouseover....）
2.事件处理方法
3.true/false(默认值为false,冒泡阶段才触发)
```
  var btnClick=document.getElementById('btnClick');
  btnClick.addEventListener('click',function(){
  alert(this.id);
  })
```

2.attachEvent和addEventListener的区别是什么？

addEventListener: 是DOM2级获取事件处理程序的方法，它包含三个参数（事件类型、事件处理方法、布尔参数true/false-默认值为false即是冒泡阶段触发）
attachEvent:IE浏览器事件处理程序方法，同时接收两个参数：（事件处理程序名称、事件处理程序方法）

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

IE事件冒泡：从点击最具体的逐步往外冒泡，IE有且仅有事件冒泡机制
DOM2级事件：包含事件捕获阶段、处于目标阶段、事件冒泡阶段，大部分浏览器都支持DOM2事件流，IE除外；它包含的三个参数（事件类型、事件方法、布尔值）中的布尔值决定了该方法在那个阶段触发；默认值false在冒泡阶段触发，true在捕获阶段触发。

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

IE事件模型中：
1.如何阻止事件冒泡？
对event对象下的cancelBubble进行赋值
2.如何阻止默认行为？
对event对象下的returnValue进行赋值
DOM2事件流中
1.如何阻止事件冒泡？
对event对象使用stopPropagation()方法
2.如何阻止默认事件？
对event对象使用preventDefault()方法

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

<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>

代码

function $(e){
    if(document.querySelectorAll(e).length > 1){
        return document.querySelectorAll(e);
    }else{
        return document.querySelector(e);
    }
}
var li = $('li')
for(var i = 0; i < li.length; i ++){
    li[i].addEventListener('click', function(){
        console.log(this.innerText)
    })
}

6.补全代码，要求

当点击按钮开头添加时，在</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>
  //你的代码
  </script>

代码

// 封装一个函数，用来获取相对应的DOM-node
function $(ele){
if(document.querySelectorAll(ele).length>1){
    return document.querySelectorAll(ele)
}
else{
    return document.querySelector(ele)
}
}


var star=$('#btn-add-start');
var end=$('#btn-add-end');
var content=$('.ipt-add-content');
var ct=$('.ct');
var li=$('.ct>li');



// 点击尾部添加

end.addEventListener('click',function(){
var li=document.createElement('li');
ct.appendChild(li);
li.innerText=content.value;
content.value='';  //归零清空输入框内容
})

// 点击头部添加

star.addEventListener('click',function(){
var li=document.createElement('li');
ct.insertBefore(li,ct.firstChild);
li.innerText=content.value;
content.value='';
})

// 点击console文本内容
li.forEach(function(ele){
ele.addEventListener('click',function(){
    console.log(ele.innerText)
    })

})

7.补全代码，要求：当鼠标放置在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>
    //你的代码
    </script>

代码

function $(ele){
        if(document.querySelectorAll(ele).length>0){
            return document.querySelectorAll(ele);
        }
        else{
            return document.querySelector(ele);
        }

    }


    var ct=$('.ct');
    var ImgPreview=$('.img-preview');
    var list=$('.ct>li');


    list.forEach(function(ele){


        
        ele.addEventListener('mouseenter',function(){
            var img=document.createElement('img');
            img.src=ele.getAttribute('data-img');
            ImgPreview[0].appendChild(img);
        })
        ele.addEventListener('mouseleave',function(ele){
            ImgPreview[0].innerHTML=''
        })
    })

事件