事件

作者: dpeng1203 | 来源:发表于2018-04-27 22:15 被阅读0次

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

DOM0事件的添加形式为:

let btn = document.getElementById("myBtn");
btn.onclick = function(){
    //do sth...
    console.log(this); // myBtn
}

// 事件以'on'开头,如onmouseover, onmouseout等

使用DOM0级方法指定的事件处理程序被认为是元素的方法,此时事件处理程序是在元素的作用域里中运行,所以此时this指向的是元素本身。而且这种添加方式的缺陷是,只能存在一个处理程序,如果再次向同一个元素添加另外一个处理程序,上一个处理程序会被覆盖。

DOM2级别事件监听使用的方法为:

let btn = document.getElementById("myBtn");
btn.addEventListener("事件名", function(){
    //do sth...
    console.log(this); // myBtn
});

这样的添加方式比起DOM0级更灵活,它可以给一个同一个元素添加多个处理事件。同时它的this也同样指向元素本身。

2.attachEvent与addEventListener的区别?

  • 参数个数不相同,addEventListener有三个参数,attachEvent只有两个,attachEvent添加的事件处理程序只能发生在冒泡阶段,addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理(我们一般为了浏览器兼容性都设置为冒泡阶段)
  • 事件名:attachEvent的事件名与DOM0级事件名一样,都是在具体事件前加上了on;而addEventListener的事件名去掉了on.
  • 作用域:在attachEvent的事件处理程序中,它的作用域是全局作用域,this等于window; 而在addEventListener里事件处理程序的作用域是元素的作用域,this等于元素本身。
  • 为一个事件添加多个事件处理程序时:执行顺序不同,addEventListener添加会按照添加顺序执行,而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的,但是添加的多了就无规律了)

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

ie事件冒泡:是指事件从事件目标节点逐层步的往上层节点传播(如下图),ie只支持这一种传播机制


image.png

dom2事件传播机制:事件从顶层节点一级一级往下层传播,接着到达目标节点,这部分叫做时间捕获阶段。然后事件又从目标节点逐层往上层节点传播,这部分叫做事件冒泡,这个完整的事件流就是dom2时间的传播机制了(如下图)。


image.png

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

DOM浏览器
阻止冒泡e.stopPropagation();
阻止默认事件event.preventDefault()

function stopEvent(e) {
e.stopPropagation();
}
e.addEventListener('click', stopEvent, false);
// HTML代码为
// <input type="checkbox" id="my-checkbox" />

var cb = document.getElementById('my-checkbox');

cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件</title>
</head>
<body>
    <ul class = "ct">
        <li>这里是</li>
        <li>几人股</li>
        <li>前端</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)
        })
    }



    //方法二,使用事件代理,把事件监听之间绑定在父容器上,根据事件的来源进行处理
    /*
    var ct = document.querySelector('.ct');
    ct.addEventListener('click',function(e){
        console.log(e.target.innerText)
    })
    */
    

</script>
</body>
</html>

6. 要求:

  • 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.

  • 当点击每一个元素li时控制台展示该元素的文本内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件</title>
</head>
<body>
    <ul class = "ct">
        <li>这里是</li>
        <li>几人股</li>
        <li>前端</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')

    var addStartBtn = document.querySelector('#btn-add-start')
    var addEndBtn = document.querySelector('#btn-add-end')
    var ipt = document.querySelector('#ipt-add-content')

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

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

    addEndBtn.addEventListener('click',function(){
        var li = document.createElement('li')
        li.innerText = ipt.value
        ct.appendChild(li)
    })
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <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')
        var childs = document.querySelectorAll('li')
        var preview = document.querySelector('.img-preview')

        for(var i = 0; i< childs.length; i++){
            childs[i].addEventListener('mouseenter',function(){
                var dataImg = this.getAttribute('data-img')
                console.log('下在啊:::' + dataImg) 
                preview.innerHTML = '<img src = "' + dataImg + '" />'
            })
        }
    </script>
</body>
</html>

相关文章

  • 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/korilftx.html