0121事件

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

DOM0事件监听方式:

  • 内联方式,与CSS内联样式相对
<input type="button" value="Click Here" onclick="alert('Clicked!');" />
  • 事件处理程序的具体实现,在页面其它地方定义
<input type="button" value="Click Here" onclick="showMessage();" />

DOM2事件监听方式:
addEventListener(),参数列表:

  • 事件类型
  • 事件处理方法
  • 布尔参数,如果是true表示在捕获阶段调用事件处理程序,如果是false,则是在事件冒泡阶段处理

使用举例:

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

DOM0和DOM2事件监听使用区别:DOM2可以为事件添加多个处理程序

题目2: attachEvent与addEventListener的区别?

  • 参数个数不同:attachEvent接收两个参数(事件名称和方法),addEventListener接收三个参数(事件类型、方法、布尔值)
  • 第一个参数意义不同:addEventListener第一个参数是事件类型(比如clickload),而attachEvent第一个参数指明的是事件处理函数名称(onclickonload
  • 事件处理程序的作用域不相同:addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,thiswindow,所以刚才例子才会返回undefined,而不是元素id
  • 为一个事件添加多个事件处理程序时,执行顺序不同:addEventListener添加会按照添加顺序执行,而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的,但是添加的多了就无规律了)

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

IE事件冒泡:
DOM2事件传播:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素

DOM2事件传播机制:事件开始时由最大的,不具体的元素接收,然后逐级向小的具体元素逐级传递,再反向传出

题目4:如何阻止事件冒泡? 如何阻止默认事件?

阻止事件冒泡:

  • 标准事件模型:
stopPropagation()
  • IE事件模型:
cancelBubble默认为false,设置为true后可以取消事件冒泡

阻止默认事件:

  • 标准事件模型:
preventDefault()
  • IE事件模型:
returnValue默认为true,设为false可以取消事件默认行为

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

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

代码:

<script>
    var list = document.querySelectorAll('.ct>li');
    for (var i = 0; i < list.length; i++){
        list[i].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>

代码:

<script>
    var parent = document.querySelector('.ct');
    var sAdd = document.querySelector('#btn-add-start');
    var eAdd = document.querySelector('#btn-add-end');
    var content = document.querySelector('.ipt-add-content');

    parent.addEventListener('click', function(e){
        console.log(e.target.innerText);
    })

    sAdd.addEventListener('click', function(e){
            var add = document.createElement("li");
            //var newContent = document.createTextNode(content.value);
            //add.appendChild(newContent);
            add.innerText = content.value;
            parent.insertBefore(add, parent.firstChild);
    });

    eAdd.addEventListener('click', function(e){
        var add = document.createElement("li");
        var newContent = document.createTextNode(content.value);
        add.appendChild(newContent);
        parent.appendChild(add);
    });
</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>

代码:

<script>
var overImg = document.querySelector('.ct');
var showImg = document.querySelector('.img-preview');

overImg.addEventListener('mouseover', function(e){
    var checkImg = document.querySelector('.img-preview img');
    if (!checkImg){
        var imgDiv = document.createElement('img');
        var ctDiv = document.querySelector('.img-preview');
        imgDiv.setAttribute('src', e.target.getAttribute('data-img'));
        ctDiv.appendChild(imgDiv);
    }
    else{
        imgDiv = checkImg;
        imgDiv.setAttribute('src', e.target.getAttribute('data-img'));
    }
    //showImg.innerHTML = '![](' + e.target.getAttribute('data-img') + ')'
})
</script>

推荐阅读更多精彩内容

  • 1.何谓事件 用户和网页交互时的行为,动作,称之为事件; 2.监视事件 现实生活中,为了监视车辆是否违章,通过在红...
    草鞋弟阅读 42评论 0 0
  • 题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? DOM0事件处理程序,事件名以'on'开头,...
    饥人谷_Leon阅读 49评论 0 0
  • 如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot大师兄阅读 112评论 1 3
  • 题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? Dom0级Dom0级事件处理程序是将一个函数...
    QQQQQCY阅读 38评论 0 0
  • 题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? 事件处理程序我们也称之为事件侦听器(list...
    Taaaaaaaurus阅读 40评论 0 1