事件

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

1. DOM0 级事件处理

DOM0 级事件处理，事件名以on开头，如onclick、onload等。

  • 在 HTML 上进行事件处理
<button onclick="clickFnc()">点击</button>
<script>
function clickFnc(){
  alert('Hi');
}
</script>

通过这种方式添加事件，会使 HTML 和 JS 耦合在一起，不容易维护和 bug 排查。

  • 通过 JS 添加事件
<button id="btn">点击</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function (){
  alert('Hi');
};
</script>

要添加一个事件，就需要先获得对应的 DOM 元素，然后把事件绑定在元素上面。DOM0 级在同一个元素上绑定同一个事件会覆盖，而清除事件只需要btn.onclick = null即可。

2. DOM2 级事件处理

W3C标准为 DOM2 级事件规范添加了两个方法addEventListener() removeEvenListener()，分别用于添加事件和移除事件。

<button id="btn">点击</button>
<script>
var btn = document.getElementById('btn');
btn.addEvenListener('click', clickFnc, false);
function clickFnc(){
  alert('Hi');
}
</script>

移除事件btn.removeEventListener("click", clickFnc, false);

参考： JavaScript DOM文档事件－DOM0、DOM2级事件处理程序

二、attachEvent 与 addEventListener 的区别？

在早期 IE 浏览器中（如： IE 8）是不支持新标准的 addEvenlistener 方法的，但是提供了 attachEvent 方法来代替，所以这是 IE 兼容问题。不过现在基本不再考虑这个兼容了，另外 IE 使用 detachEvent 来解绑事件。以下详细说说两者的区别。

1. 事件机制

在老版的 IE 中，只支持 DOM0 级事件，也就是说，只有事件的冒泡阶段。而addEventListener()是 DOM2 级事件，是一个由事件捕获 => 目标事件 => 事件冒泡 这样的一个事件流。这也是为什么attachEvent() 没有第三个参数的原因。

2. 事件对象

在attachEvent()绑定的函数中，并没有把对应的目标事件对象传进来，所以只能通过window.event来访问这个事件对象。

3. 事件中的 this

在attachEvent()绑定的函数中，没有把事件触发的对象作为 this 传进函数，所以在attachEvent()中直接使用 this 的话，是全局window对象。

三、解释 IE 事件冒泡和 DOM2 事件传播机制？

  • 事件冒泡

事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

事件冒泡
  • DOM2 事件传播机制

DOM2 级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

DOM2 事件流

四、如何阻止事件冒泡？ 如何阻止默认事件？

要阻止事件冒泡，可以对传进来的事件执行stopPropagation()方法，这个方法取消事件进一步捕获或冒泡，如

document.querySelector(element).addEventListener('click',function(e){
  e.stopPropagation()
  //这里开始阻止后续的冒泡或者捕获了
  console.log('xxx')
})

要取消默认事件，如点击<a>后的默认跳转行为或者是<form>表单的提交行为，可以对事件执行preventDefault()方法。

另外，直接使用return false可以粗暴的阻止事件冒泡、捕获和默认事件。

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

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

结果

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
  var lists = document.querySelectorAll('.ct li');
  lists.forEach((item, index, arr) => {
    item.addEventListener('click', function() {
      console.log(this.innerText);
    })
  })
</script>

在线预览

六、 补全代码，要求：

  1. 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；
  2. 当点击结尾添加时在最后一个<li>元素后添加用户输入的非空字符串.
  3. 当点击每一个元素<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 input = document.querySelector('.ipt-add-content')
var addStartBtn = document.querySelector('#btn-add-start')
var addEndBtn = document.querySelector('#btn-add-end')
var ct = document.querySelector('.ct')
var lists = ct.querySelectorAll('li')

//开头添加
addStartBtn.addEventListener('click', function(){
  if(input.value){
    var newLi = document.createElement('li')
    newLi.innerText = input.value
    //为新添加的元素添加事件
    consoleText(newLi)
    ct.insertBefore(newLi, lists[0])
  }else {
    alert("输入不能为空！")
  }
})

//结尾添加
addEndBtn.addEventListener('click', function(){
  if(input.value){
    var newLi = document.createElement('li')
    newLi.innerText = input.value
    //为新添加的元素添加事件
    consoleText(newLi)
    ct.appendChild(newLi)
  }else {
    alert("输入不能为空！")
  }
})

//添加点击打印文字事件
function consoleText(element){
  element.addEventListener('click', function(){
    console.log(this.innerText)
  })
}
  
//为初始的 li 添加点击事件
  lists.forEach((item, index, arr) => {
    consoleText(item)
  })
</script>

在线预览

七、补全代码，要求：当鼠标放置在<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="https://img6.bdstatic.com/img/image/public/bizhi112.png">鼠标放置查看图片1</li>
    <li data-img="http://img05.tooopen.com/images/20160121/tooopen_sy_155168162826.jpg">鼠标放置查看图片2</li>
    <li data-img="http://img06.tooopen.com/images/20160728/tooopen_sy_172881922881.jpg">鼠标放置查看图片3</li>
</ul>
<img src="" alt="图片" class="img-preview">
<script>
var lists = document.querySelectorAll('.ct li')
var img = document.querySelector('.img-preview')
lists.forEach((item) => {
  item.addEventListener('mouseover', function(){
    img.src = this.getAttribute('data-img')
  })
})
</script>

在线预览

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • JS中DOM0,DOM2,DOM3级事件模型解析
    声明：本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下（...
    angryyan阅读 7,133评论 1赞 6
  • Dom、事件
    一、问答 1. dom对象的innerText和innerHTML有什么区别？ innerHTML： 也就是从对象...
    饥人谷_罗伟恩阅读 648评论 0赞 2
  • 事件相关
    如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 592评论 1赞 3
  • 《JavaScript 闯关记》之事件
    JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,285评论 3赞 11
  • 事件
    事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、...
    徐国军_plus阅读 605评论 0赞 2