blog
blog copied to clipboard
Published
20 hours ago •
yongheng2016
yongheng2016
事件(Event)
题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0：行内样式或js标签中直接写事件以及所对应的处理函数，它是一种表达式的写法；所以点遇到同名函数的时候会发生重置；
<button onclick=console.log('a')></button>
DOM2：是一种方法，所以可以重复调用这种方法而不冲突；
- 标准浏览器：
- 监听事件：
addEventListener( ) - 删除事件：
removeEventListener( )事件中的this指的是触发事件的元素
- 监听事件：
- 老式IE浏览器（IE8及以下）：
- 监听事件：
attachEvent( ) - 删除事件：
detachEvent( )事件中的this指向的是window
- 监听事件：
题目2： attachEvent与addEventListener的区别？
-
参数不同：
attachEvent只有两个参数（’onclick‘，handler）addEventListener有三个参数（‘click’，handler，false/true）
-
第一个参数意义不同：
attachEvent第一个参数是事件处理函数名称，如（onclick , onload）addEventListener第一个参数是事件类型，如（click ，load）
-
事件处理的作用域不同：
attachEvent事件处理程序在全局变量內运行，this是windowaddEventListener作用域是元素本身，this指的是触发元素
-
为一个事件添加多个事件处理程序时，执行顺序不同
attachEvent添加处理程序少的时候，反顺序执行；添加处理程序多的时候，乱序执行（有顺序要求的时候要注意了）addEventListener按照添加顺序执行
题目3： 解释IE事件冒泡和DOM2事件传播机制？
- IE事件冒泡： 事件由开始时由最具体的元素接受，并逐级向上传递到祖先元素
- DOM2事件流 三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
- IE8及以下浏览器：
- 阻止事件冒泡：cancelBubble(Boolean) //默认为false，设置为true后可以取消事件冒泡
- 阻止默认事件：returnValue(boolean) //默认为true，设为false可以取消事件默认行为
IE中所有的事件都包含以下属性方法:
|
属性/方法 |
类型 |
读/写 |
说明 |
| cancelBubble | Boolean | 读/写 | 默认为false，设置为true后可以取消事件冒泡 |
| returnValue | Boolean | 读/写 | 默认为true，设为false可以取消事件默认行为 |
| srcElement | Element | 只读 | 事件的目标元素 |
| type | String | 只读 | 被触发的事件类型 |
- 标准浏览器：
- 阻止事件冒泡：stopPropagation( Function) 例：通过此方法可以阻止事件继续冒泡到祖先元素
var handler = function (e) {
alert(e.type);
e.stopPropagation();
}
- 阻止默认事件：preventDefault(Function) //前提是cancelable值为true
例：阻止链接导航：
document.querySelector('#btn').onclick = function (e){
e.preventDefault( );
}
DOM事件对象中属性和方法：
|
属性/方法 |
类型 |
读/写 |
说明 |
| bubbles | Boolean | 只读 | 事件是否冒泡 |
| cancelable | Boolean | 只读 | 是否可以取消事件的默认行为 |
| currentTarget | Element | 只读 | 事件处理程序当前处理元素 |
| detail | Integer | 只读 | 与事件相关细节信息 |
| eventPhase | Integer | 只读 | 事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段 |
| preventDefault() | Function | 只读 | 取消事件默认行为 |
| stopPropagation() | Function | 只读 | 取消事件进一步捕获或冒泡 |
| target | Element | 只读 | 事件的目标元素 |
| type | String | 只读 | 被触发的事件类型 |
| view | AbstractView | 只读 | 与事件关联的抽象视图，等同于发生事件的window对象 |
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
方法1：
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.querySelector('.ct')
ct.addEventListener('click',outputText)
function outputText(e){
var e = e || window.event;
var target = e.target;
if (target.tagName.toLowerCase()=='li'){
console.log(e.target.innerText);
}
}
</script>
方法2：
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var lis = document.querySelector('.ct').querySelectorAll('li')
lis.forEach(function (node){
node.addEventListener('click',outputText)
})
function outputText(){
console.log(this.innerText)
}
</script>
方法3：
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var lis = document.querySelector('.ct').querySelectorAll('li')
for (var i=0; i<lis.length; i++){
lis[i].addEventListener('click',outputText)
}
function outputText(){
console.log(this.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>
代码：
<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 ct = document.querySelector('.ct')
var btnAddStart = document.querySelector('#btn-add-start')
var btnAddEnd = document.querySelector('#btn-add-end')
var input = document.querySelector('.ipt-add-content')
btnAddStart.addEventListener('click',addStart)
btnAddEnd.addEventListener('click',addEnd)
ct.addEventListener('click',outputText)
function addStart(){
var newNode = document.createElement('li')
var inputValue = input.value
if (inputValue){
newNode.innerText = inputValue
ct.insertBefore(newNode,ct.firstElementChild)
input.value = ''
}
}
function addEnd(){
var newNode = document.createElement('li')
var inputValue = input.value
if (inputValue){
newNode.innerText = inputValue
ct.appendChild(newNode,ct.lastElementChild)
input.value = ''
}
}
function outputText(e){
var e = e || window.event
var target = e.target
if (target.tagName.toLowerCase()=='li'){
console.log(target.innerText)
}
}
</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>
方法1：
<ul class="ct">
<li data-img="http://wx2.sinaimg.cn/mw690/b9d0abb5ly1fgita9h88oj211e0hd44r.jpg">鼠标放置查看图片1</li>
<li data-img="http://wx4.sinaimg.cn/mw690/b9d0abb5ly1fgita94hdbj211c0h87bz.jpg">鼠标放置查看图片2</li>
<li data-img="http://wx1.sinaimg.cn/mw690/b9d0abb5ly1fgita8jq7lj211c0h8jxq.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var divPreview = document.querySelector('.img-preview')
console.log(divPreview)
var lis = document.querySelectorAll('li')
console.log(lis)
lis.forEach(function (li){
li.addEventListener('mouseenter',preViewImage)
})
function preViewImage(){
divPreview.innerHTML = ''
var newNode = document.createElement('img')
var dataImg = this.getAttribute('data-img')
newNode.setAttribute('src',dataImg)
divPreview.append(newNode)
}
</script>
方法2：
<ul class="ct">
<li data-img="http://wx2.sinaimg.cn/mw690/b9d0abb5ly1fgita9h88oj211e0hd44r.jpg">鼠标放置查看图片1</li>
<li data-img="http://wx4.sinaimg.cn/mw690/b9d0abb5ly1fgita94hdbj211c0h87bz.jpg">鼠标放置查看图片2</li>
<li data-img="http://wx1.sinaimg.cn/mw690/b9d0abb5ly1fgita8jq7lj211c0h8jxq.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct')
var divPreview = document.querySelector('.img-preview')
ct.addEventListener('mouseover',preViewImage)
function preViewImage(e){
divPreview.innerHTML = ''
var e = e || window.event
var target = e.target
var newNode = document.createElement('img')
var dataImg = target.getAttribute('data-img')
newNode.setAttribute('src',dataImg)
divPreview.append(newNode)
}
</script>
方法3：
<ul class="ct">
<li data-img="http://wx2.sinaimg.cn/mw690/b9d0abb5ly1fgita9h88oj211e0hd44r.jpg">鼠标放置查看图片1</li>
<li data-img="http://wx4.sinaimg.cn/mw690/b9d0abb5ly1fgita94hdbj211c0h87bz.jpg">鼠标放置查看图片2</li>
<li data-img="http://wx1.sinaimg.cn/mw690/b9d0abb5ly1fgita8jq7lj211c0h8jxq.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var lis = document.querySelectorAll('li')
var divPreview = document.querySelector('.img-preview')
for (var i=0; i<lis.length; i++){
lis[i].addEventListener('mouseenter',preViewImage)
}
function preViewImage(){
divPreview.innerHTML = ''
var newNode = document.createElement('img')
var dataImg = this.getAttribute('data-img')
newNode.setAttribute('src',dataImg)
divPreview.append(newNode)
}
</script>
