DOM深入 - Githubissues

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

DOM 0 级事件是基于元素内联属性或DOM元素命名的元素的概念，例：
``
`input.onclick = function() { ... };`
通过这种方式绑定的事件，是元素的属性，当再一次给同一个节点元素绑定另外一个属性方法的时候，前一个属性的方法将会被覆盖,也就是只能指定一次,其次此时事件处理程序是在元素的作用域里中运行，所以此时this指向的是元素本身。
DOM 0是在标准DOM定义之前内置到浏览器中的专用命令。它们都被标准- DOM所取代，但仍然在浏览器中工作，只是为了支持早期Netscape浏览器编写的脚本。
`var btn = document.getElementById('id');
btn.addEventListener('click',function()
{
//do sth
})
//通过这种方式指定的事件处理程序能更灵活，最明显的区别就是能够同时绑定多个不同的事件处理程序，并且不相干涉。`
DOM级别2，有了一个更加标准化的方法来管理事件，增加了一个监听器，可使用addEventListener，removeEventListener （所有DOM节点都包含这2种方法）

attachEvent与addEventListener的区别？

IE并不支持addEventListener方法，而是实现了类似的方法

attachEvent

attachEvent是IE的事件处理程序，当使用node.attachEvent('on'+type,handler)时，要在事件类型前面加上on,其次IE的事件处理程序只能触发在冒泡阶段,还有就是当我们使用IE的事件处理程序添加事件时，其处理的先后顺序是后添加的先执行，并且当处理程序的作用域是window即this指向的是window.

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

IE事件的传播机制只有冒泡阶段，即从目标元素向父元素传播一直传播到window停止，当传播的过程中如果监听到了相同的事件类型酒会一并触发，即从最具体的元素开始触发，一直到最外层的元素.

DOM2事件传播机制包括事件的，从window开始 -> 捕获阶段－> 到达目标元素 -> 冒泡阶段 -> 再到达最外层的 window，并且在addEventListener(type,function(){},true(为捕获阶段)/false(默认为冒泡阶段触发))。

如何阻止事件冒泡？如何阻止默认事件？
阻止事件冒泡
stopPropagation（停止传播）
`document.body.addEventListener('click',function(){
console.log('Body')
})
document.querySelector('.container').addEventListener('click',function(){
console.log('Container')
})
document.querySelector('.box').addEventListener('click',function(){
console.log('Box')
})
document.querySelector('button').addEventListener('click',function(e){
e.stopPropagation()  //冒泡会被阻止
console.log('Button')
})`
阻止默认事件
preventDefault form表单、a链接都是有默认事件，点击链接会默认跳转到该功能：可监听到提交，先阻止提交，验证是否符合条件符合，即继续下一步
`document.querySelector('button').addEventListener('click',function(e){
e.preventDefault()
console.log('Button')
})`

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

`
这里是
饥人谷
前端6班

`

`    var storage = document.querySelector('.ct')
//找到目标的父容器.
storage.addEventListener('click',function(e){
console.log(e.target.innerText)//获取目标事件的文本内容（innerHTML）
})`

补全代码，要求：
当点击按钮开头添加时在<i>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
`
这里是
饥人谷
任务班




`

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
`
鼠标放置查看图片1
鼠标放置查看图片2
鼠标放置查看图片3


`

HuangHongRui / Notebook

DOM深入 #7

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

attachEvent与addEventListener的区别？

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

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

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

补全代码，要求：

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

HuangHongRui / Notebook

DOM深入 #7

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

attachEvent与addEventListener的区别？

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

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

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

补全代码，要求：

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

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