事件

作者: 饥人谷_秦勤 | 来源:发表于2017-12-06 01:24 被阅读0次

JavaScript事件01——事件流
事件对象，事件监听，事件冒泡，事件代理
事件总结
Javascript事件系统
Javascript事件-事件冒泡，事件捕获，事件监听和事件委托
【事件】事件流
【事件】事件对象
【事件】事件类型
2018-09-10JQuery高级应用
JS事件

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

DOM0级事件处理程序是将一个函数赋值给一个事件处理程序属性(类似于key=value键值对的方式)，而通过将事件处理程序设置为null删除绑定在元素上的事件处理程序。这种方法无法给一个事件添加多个事件处理程序，后面的程序会覆盖前面的程序

node.onclick=function (){console.log('你好，世界')}
node.onclick=function (){console.log('hello world')}
//hello world

DOM2级定义了addEventListener()和removeEventListener()用于处理指定和删除事件处理程序。所有DOM节点都包含这两个方法，并且它们都接受3个参数，要处理的事件类型、事件处理方法和一个布尔值。这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序(默认false)

  node.addEventListener('click', function() {
        alert(this.id);
    }, false);

题目2： attachEvent与addEventListener的区别？

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

node.attachEvent('onclick' , function (){console.log('hello world')} );

题目3：解释IE事件冒泡和DOM2事件传播机制？
IE事件冒泡是从事件元素逐步向上传播
DOM2事件从顶层节点（document）往下传播到事件元素，再传播到顶层

image

题目4：如何阻止事件冒泡？如何阻止默认事件？
preventDefault() 取消事件默认行为
stopPropagation() 取消事件进一步捕获或冒泡

IE浏览器中
cancelBubble默认为false，设置为true后可以取消事件冒泡
returnValue默认为true，设为false可以取消事件默认行为

e.preventDefault()  
e.stopPropagation()
window.event.cancelBubble=true;
window.event.returnValue=false;

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

<ul class="ct1">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
function $$(selector){
    return document.querySelectorAll(selector)
}
var items=$$(".ct1 li");
items.forEach(function(item){
    item.addEventListener("click",function(e){
        console.log(item.innerText);
    })
})
</script>

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

<ul class="ct2">
    <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>
function $(selector){
    return document.querySelector(selector)
}
$('#btn-add-start').addEventListener("click",function(){
    if($('#ipt-add-content').value){
    var li=document.createElement('li')
    li.innerText=$('#ipt-add-content').value;
    var parentNode=$('.ct2');
    $('.ct2').insertBefore(li,parentNode.firstChild);
        }
})

$('#btn-add-end').addEventListener("click",function(){
    if($('#ipt-add-content').value){
    var li=document.createElement('li')
    li.innerText=$('#ipt-add-content').value;
    $('.ct2').appendChild(li);
    }

})

$('.ct2')addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
      console.log(e.target.innerText);
    }
 });

</script>

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

<ul class="ct3">
    <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 liArr=$$(".ct3 li");
liArr.forEach(function(li){
    li.addEventListener("mouseenter",function(e){
    var imgSrc=li.getAttribute('data-img')//var imgSrc=this.getAttribute('data-img')//
    //console.log(imgSrc)
    //innerHTML中html大写
    //$('.img-preview').innerHTML='<img 
 src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">'
    $('.img-preview').innerHTML='<img src="'+ imgSrc +'">'  
    })
})
</script>