事件

作者: 好好顽 | 来源:发表于2017-07-05 13:39 被阅读24次

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

  • DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性。将这些属性的值设置为一个函数,就可以指定事件处理程序。一个事件只能绑定一次,并且新方法会覆盖老方法。例如btn.onclick=function(){}
  • DOM2级事件监听定义了两个方法用于处理指定和删除事件处理程序的操作:addEventListener、removeEventListener。所有的DOM节点都包含这两个方法,并且它们都接受三个参数:事件类型、事件处理方法、布尔参数。例如addEventListener、removeEventListener。可以选择按照冒泡的顺序处理还是捕获的顺序处理。

题目2: attachEvent与addEventListener的区别?

  • 参数不同。addEventListener有三个参数,attachEvent只有两个,attachEvent添加的事件处理程序只能发生在冒泡阶段,addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理(我们一般为了浏览器兼容性都设置为冒泡阶段)
  • 事件名不同。attachEvent第一个参数事件名前要加on,比如el.attachEvent('onclick', handleClick);
  • 第一个参数意义不同,addEventListener第一个参数是事件类型(比如click,load),而attachEvent第一个参数指明的是事件处理函数名称(onclick,onload)
  • 事件处理程序的作用域不相同,addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是window,所以会返回undefined,而不是元素id。
  • 为一个事件添加多个事件处理程序时,执行的顺序不同。 addEventListener 会按照添加的顺序执行。 attachEvent 添加多个事件处理程序时,顺序是无规律的。

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

  • IE事件冒泡:事件由目标元素接收,然后逐级向上传播到到最不具体的元素
  • DOM2事件传播:总共可以分为三个阶段:事件捕获阶段、目标阶段和事件冒泡阶段;首先发生的是事件捕获,为截获事件提供机会,然后是实际目标接收事件,最后是事件冒泡阶段

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

  • 如果使用的是addEventListener添加的事件,通过调用event对象的stopPropagation();来阻止冒泡,通过preventDefault()阻止默认事件
  • 如果使用的是attachEvent添加的事件,通过cancelBubble阻止冒泡,通过returnValue取消默认事件

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
  let ct =document.querySelector('.ct')
  ct.addEventListener('click',function(e){
    console.log(e.target.innerHTML)
  })
</script>

题目6: 补全代码,要求:

当点击按钮开头添加时在li元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
http://js.jirengu.com/devowayaqu/1/edit?html,console,output

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

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="task22-3" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  
  </style>
</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 preview = document.querySelector('.img-preview')
    ct.addEventListener('mouseover',function(e){
        var image = document.createElement('img')
        image.src = e.target.dataset.img
        preview.appendChild(image)
    })
    ct.addEventListener('mouseout',function(e){
        preview.innerHTML = ''
    })
  
  //也可以考虑不使用循环,用事件代理把事件绑定到父元素上,想想怎么实现
</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/mdzfhxtx.html