事件及事件流

2017-07-28 本文已影响238人 DCbryant

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

DOM0 事件：

HTML内联方式：<div onclick="alert()"></div>
缺点：

存在加载顺序问题，如果事件处理程序在html代码之后加载，用户
可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
这样书写html代码和JavaScript代码紧密耦合，维护不方便

JavaScript指定事件处理程序：通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。

<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就是当前元素。当我们删除事件处理程序的时候，只需把元素的onclick属性赋为null即可。

缺点：同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次

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

addEventListener
removeEventListener

这两个方法都接受三个参数;

type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发

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

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

优点：

可以针对同一个事件，添加多个监听函数。
能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发回监听函数。
除了DOM节点，还可以部署在window、XMLHttpRequest等对象上面，等于统一了整个JavaScript的监听函数接口。

this是一个让人很头疼的问题，这里补充一下：

以下写法的this对象都指向Element节点

// JavaScript代码
element.onclick = print
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}

// HTML代码
<element onclick="console.log(this.id)">

2.以下写法的this对象，都指向全局对象。

// JavaScript代码
element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');

// HTML代码
<element onclick="doSomething()">

题目2： attachEvent与addEventListener的区别？

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

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

IE事件冒泡:从目标节点依次传导到window对象，自下而上，由于像水冒泡，因此称为冒泡事件。

事件冒泡

DOM2事件流：
第一阶段：从window对象传导到目标节点，称为“捕获阶段”

第二阶段：在目标节点上触发，称为“目标阶段”

第三阶段：从目标节点传导回window对象，称为“冒泡阶段”

DOM事件流

这种三阶段的传播模型，会使得一个事件在多个节点上触发。

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

阻止事件冒泡：

IE:e.cancelBubble = true;
非IE：e.stopPropagation();

阻止默认事件：

IE:e.returnValue = false;
非IE：e.preventDefault();

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

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>  
    <script>
        var $ = (className) => document.querySelector(className)
        $('ul').addEventListener('click',function(e){
            var target = e.target
            if(target.tagName.toLowerCase() === 'li'){
                console.log(target.textContent)
            }
        })
    </script>

题目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>
    var $ = (className) => document.querySelector(className)
    $('#btn-add-start').addEventListener('click',function(){
        if($('.ipt-add-content').value === ''){
            alert('请输入一些内容吧');
            return;
        }
        var newLi = document.createElement('li')
        newLi.textContent = $('.ipt-add-content').value
        $('.ct').insertBefore(newLi,$('.ct').firstChild)
    })
    $('#btn-add-end').addEventListener('click',function(){
        if($('.ipt-add-content').value === ''){
            alert('请输入一些内容吧');
            return;
        }
        var newLi = document.createElement('li')
        newLi.textContent = $('.ipt-add-content').value
        $('.ct').appendChild(newLi)
    })
    $('ul').addEventListener('click',function(e){
        var target = e.target
        if(target.tagName.toLowerCase() === 'li'){
            console.log(target.textContent)
        }
    })
</script>

可查看旁边的demo：demo

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

<ul class="ct">
<li data-img="data:image/jpeg;base64,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">鼠标放置查看图片1</li>
<li data-img="http://tse2.mm.bing.net/th?id=OIP.pRu5ddfv1MQlcexX9cOCuwDlEs&w=198&h=259&c=7&qlt=90&o=4&dpr=1.5&pid=1.7">鼠标放置查看图片2</li>
<li data-img="http://tse3.mm.bing.net/th?id=OIP.eWHsr9TKLGWTYjBDAx-qMgDIEs&w=198&h=297&c=7&qlt=90&o=4&dpr=1.5&pid=1.7">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var $ = (className) => document.querySelector(className)
var $$ = (className) => document.querySelectorAll(className)
var lis = $$(".ct li");
var imgPre = $(".img-preview");
function createImg() {
    var img = new Image;
    img.setAttribute("src", this.dataset.img);
    imgPre.appendChild(img);
}
for(var i=0; i<lis.length; i++) {
    lis[i].addEventListener("mouseover",createImg);
    lis[i].addEventListener("mouseout", function() {
        imgPre.removeChild(imgPre.querySelector("img"));
    })
}
</script>

可查看旁边的demo：demo

事件及事件流

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

题目2： attachEvent与addEventListener的区别？

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

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

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

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

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

题目8：写一篇博客，讲解事件相关知识点，如事件冒泡、捕获、代理、兼容写法等(选做题目)

猜你喜欢

热点阅读

事件及事件流

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

题目2： attachEvent与addEventListener的区别？

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

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

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

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

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

题目8： 写一篇博客，讲解事件相关知识点，如事件冒泡、捕获、代理、兼容写法等(选做题目)

猜你喜欢

热点阅读

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

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

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

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

题目8：写一篇博客，讲解事件相关知识点，如事件冒泡、捕获、代理、兼容写法等(选做题目)