事件

作者: LINPENGISTHEONE | 来源:发表于2017-04-10 22:20 被阅读0次

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

区别1：
用DOM0事件监听时，无法向一个元素添加多个监听。
例如：

btn.onclick = function(){
  console.log(1)
}
btn.onclick = function(){
  console.log(2)
}

点击会只会输出2，因为后添加的监听会覆盖之前添加的监听
而DOM2级可以对一个元素添加多个监听

区别2：
在删除监听的时候，
DOM0级方法只需把元素的对应事件属性赋为null即可
DOM2级方法可以用removeEventListener()方法删除
区别3：
DOM2级方法有三个参数：
1.事件类型
2.事件处理方法
3.布尔参数
其中布尔参数如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理。

2： attachEvent与addEventListener的区别？

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

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

IE的事件冒泡：
事件冒泡是当发生事件的时候，事件从当前被点击的元素向document传递。在传递的过程中如果遇到相同的事件，也会响应事件。
DOM2事件传播机制：
有3个阶段：捕获阶段、处于目标阶段、冒泡阶段。
捕获阶段:当发生事件的时候，事件从document传到目标，如果传递的过程里有相同的事件就会响应。当然元素一般都是默认不捕获事件，需要把false改为true
处于目标阶段:在目标响应事件。
冒泡阶段:从目标又一层层的传到body。在传递的过程中如果遇到相同的事件，也会响应事件。

TIM图片20170410214220.png

在兼容所有浏览器的事件处理程序上主要采用冒泡机制作为事件传播机制。同时也衍生出了解决当需要在父元素下进行新增的子元素的操作所造成无法触发事件或者事件方法复杂的技巧，如：

<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>

    <script>
        function $(id){
          return document.querySelector(id);
        }
        $('ul').addEventListener('click', function(e){
          if(e.target.tagName.toLowerCase() === 'li'){
            console.log(e.target.innerHTML);
          }
        });
    </script>
</body>

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

阻止事件冒泡

<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
    <script>
        function $(id){
            return document.querySelector(id);
        }
        function $$(id){
            return document.querySelectorAll(id);
        }
        [].forEach.call($$('li'), function(node){
            node.addEventListener('click', function(e){
            e.stopPropagation(); //阻止事件冒泡方法
            console.log(e.target.innerHTML);
            });
        })
        //当父元素也设置了点击事件时，点击子元素也会触发父元素事件处理程序
        $('ul').addEventListener('click',function(e){
            console.log(e.target);
        })
    </script>
</body>

阻止默认事件


<body>
    <a href="http://www.jirengu.com">饥人谷官网</a>

    <script>
        function $(id){
            return document.querySelector(id);
        }
        $('a').addEventListener('click', function(e){
            e.preventDefault();
            console.log('阻止跳转...')
        })
    </script>
</body>

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

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

答：

    <ul>
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端6班</li>
    </ul>

    <script>
        $('ul').addEventListener('click',function(e){
            if(e.target.tagName.toLowerCase() === 'li'){
                console.log(e.target.innerHTML);
            }
        })

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

参考答案：

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

<script>
    //方法1， 直接给元素绑定事件

    var liArr = document.getElementsByClassName('ct')[0].getElementsByTagName('li');    //这样更安全一些
    for(var i=0;i<liArr.length;i++){
        liArr[i].addEventListener('click', function(){
        console.log(this.innerText);
    })
    }
  
    //方法2 ，使用事件代理，把事件监听绑定到父容器上，根据事件的来源进行处理
  
    var ct = document.querySelector('.ct');
    ct.addEventListener('click', function(e){
        console.log(e.target.innerText);
    });
   
</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>
//你的代码
</script>

答：

<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 content = $('.ipt-add-content');
    var btnStart = $('#btn-add-start');
    var btnEnd = $('#btn-add-end');

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

    btnStart.addEventListener('click',function(){
        var addLi = document.createElement('li');
        if(content.value) {
            addLi.innerHTML = content.value;
            $('ul').insertBefore(addLi,$('ul').children[0]);
        }else{
            console.log('请填写内容后再添加！')
        } 
    });

    btnEnd.addEventListener('click',function(){
        var addLi = document.createElement('li');
        if(content.value) {
            addLi.innerHTML = content.value;
            $('ul').appendChild(addLi);
        }else{
            console.log('请填写内容后再添加！')
        } 
    });

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

参考答案：

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

<input id="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>


<script>
    var ct = document.querySelector('.ct'),
        addStartBtn = document.querySelector('#btn-add-start'),
        addEndBtn = document.querySelector('#btn-add-end'),
        ipt = document.querySelector('#ipt-add-content');
    
    ct.addEventListener('click', function(e){
        if(e.target.tagName.toLowerCase() === 'li'){
        console.log(e.target.innerText);
        }
    });
    
    addEndBtn.addEventListener('click', function(){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.appendChild(li);
    });
    
    addStartBtn.addEventListener('click', function(){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.insertBefore(li,ct.firstChild);
    });
</script>

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>

答：

    <ul class="ct">
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
    </ul>

    <div class="img-preview"></div>

    <script>
        var ulCt = $('.ct');
        var preview = $('.img-preview');

        ulCt.addEventListener('mouseover',function(e){
            if(e.target.tagName.toLowerCase() === 'li'){
            // console.log(e.toElement.getAttribute('data-img'))
            var address = e.toElement.getAttribute('data-img')
            var imgPreview = document.createElement('img');
            imgPreview.setAttribute('src',address);
            preview.appendChild(imgPreview);
            }
        });

        ulCt.addEventListener('mouseout',function(e){
            if(e.target.tagName.toLowerCase() === 'li'){
            preview.innerHTML = '';
            }
        });

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

参考答案：

<ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
</ul>

<div class="img-preview"></div>

<script>
    var ct = document.querySelector('.ct'),
        childs = ct.querySelectorAll('li'),
        preview = document.querySelector('.img-preview');

    for(var i=0; i<childs.length; i++){
        childs[i].addEventListener('mouseenter', function(){
        var dataImg = this.getAttribute('data-img');
        preview.innerHTML = '< img src="' + dataImg + '">';  //img前面本不用空格，简书会转义，所以加空格。
        });
    }
    
    //也可以考虑不使用循环，用事件代理把事件绑定到父元素上，想想怎么实现
</script>

事件

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

2： attachEvent与addEventListener的区别？

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

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

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

6：补全代码，要求：

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

8：在 github 上创建个人项目，把视频里事件兼容的函数写法放入项目，在 Readme.md里描述项目(选做题目)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

事件

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

2： attachEvent与addEventListener的区别？

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

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

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

6： 补全代码，要求：

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

8： 在 github 上创建个人项目，把视频里事件兼容的函数写法放入项目，在 Readme.md里描述项目(选做题目)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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

6：补全代码，要求：

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

8：在 github 上创建个人项目，把视频里事件兼容的函数写法放入项目，在 Readme.md里描述项目(选做题目)