美文网首页
事件

事件

作者: 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>

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

相关文章

  • JavaScript事件01——事件流

    大纲：概念（事件、事件流）事件流模型（事件冒泡、事件捕获、DOM事件流） 一、概念： 1、事件：事件就是用户或浏览...

  • 事件对象，事件监听，事件冒泡，事件代理

    一、事件对象 二、冒泡事件：（事件从子元素往父级元素向上触发事件）处理兼容问题：主流浏览器：e.stopPropa...

  • 事件总结

    DOM事件主要内容 事件流 事件注册 事件对象 事件分类 事件代理 什么是DOM事件? 事件是某个行为或者触发，比...

  • Javascript事件系统

    本文内容 事件基础 事件监听方式 事件默认行为 事件冒泡与事件捕获 事件绑定与事件委托 事件基础 注意：本文不会深...

  • Javascript事件-事件冒泡，事件捕获，事件监听和事件委托

    事件处理机制 （一）DOM事件流 DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML...

  • 【事件】事件流

    1、JavaScript和HTML之间的交互通过事件实现的。2、事件流描述的是从页面中接收事件的顺序。3、IE 和...

  • 【事件】事件对象

    触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的额信息。（包括导致事件的元...

  • 【事件】事件类型

    DOM3 级事件规定了以下几类事件： UI（User Interface，用户界面）事件，当用户与页面上的元素交互...

  • 2018-09-10JQuery高级应用

    JQuery事件 window事件 鼠标事件 键盘事件 表单事件 事件注册语法$(对象).type(fn)type...

  • JS事件

    ?事件的相关术语 事件类型： 鼠标事件、键盘事件事件名称： click、dbclick等事件目标： 表示与发生事件...

网友评论

      本文标题：事件

      本文链接：https://www.haomeiwen.com/subject/iyueattx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|事件|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！