1.DOM事件和DOM2级在事件监听使用方式上有啥区别？
事件监听器也叫事件处理程序，是为了响应某个事件的方法
- DOM事件监听方式
1.HTML内联方式
<input type="button" value="Click Here" onclick="alert('Clicked!')">
2.JavaScript指定事件处理程序
把一个方法赋值给一个元素的事件处理程序属性
<input id="btnClick" type="button" value="Click Here2">
<body>
<script>
var btnClick=document.getElementById('btnClick');
btnClick.onclick=function shoeMessage(){
alert(this.id);
}
</script>
-
DOM2事件监听方式
DOM2事件处理程序，定义了两个方法用于处理指定和删除事件处理程序的操作;所有的DOM方法都包含这两个方法，并且接受三个参数
1.addEventListener
2.removeEventListener
参数：
1.事件类型（click，mouseover....）
2.事件处理方法
3.true/false(默认值为false,冒泡阶段才触发)var btnClick=document.getElementById('btnClick'); btnClick.addEventListener('click',function(){ alert(this.id); })
2.attachEvent和addEventListener的区别是什么？
addEventListener: 是DOM2级获取事件处理程序的方法，它包含三个参数（事件类型、事件处理方法、布尔参数true/false-默认值为false即是冒泡阶段触发）
attachEvent:IE浏览器事件处理程序方法，同时接收两个参数：（事件处理程序名称、事件处理程序方法）
3.解释IE事件冒泡和DOM2事件的传播机制？
IE事件冒泡：从点击最具体的逐步往外冒泡，IE有且仅有事件冒泡机制
DOM2级事件：包含事件捕获阶段、处于目标阶段、事件冒泡阶段，大部分浏览器都支持DOM2事件流，IE除外；它包含的三个参数（事件类型、事件方法、布尔值）中的布尔值决定了该方法在那个阶段触发；默认值false在冒泡阶段触发，true在捕获阶段触发。
4.如何阻止事件冒泡？如何阻止默认事件？
-
IE事件模型中：
1.如何阻止事件冒泡？
对event对象下的cancelBubble进行赋值
2.如何阻止默认行为？
对event对象下的returnValue进行赋值 -
DOM2事件流中
1.如何阻止事件冒泡？
对event对象使用stopPropagation()方法
2.如何阻止默认事件？
对event对象使用preventDefault()方法
5.有如下代码，需求当点击每一个li的时候控制台显示该元素文本内容。不考虑兼容性
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
代码
function $(e){
if(document.querySelectorAll(e).length > 1){
return document.querySelectorAll(e);
}else{
return document.querySelector(e);
}
}
var li = $('li')
for(var i = 0; i < li.length; i ++){
li[i].addEventListener('click', function(){
console.log(this.innerText)
})
}
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>
代码
// 封装一个函数，用来获取相对应的DOM-node
function $(ele){
if(document.querySelectorAll(ele).length>1){
return document.querySelectorAll(ele)
}
else{
return document.querySelector(ele)
}
}
var star=$('#btn-add-start');
var end=$('#btn-add-end');
var content=$('.ipt-add-content');
var ct=$('.ct');
var li=$('.ct>li');
// 点击尾部添加
end.addEventListener('click',function(){
var li=document.createElement('li');
ct.appendChild(li);
li.innerText=content.value;
content.value=''; //归零清空输入框内容
})
// 点击头部添加
star.addEventListener('click',function(){
var li=document.createElement('li');
ct.insertBefore(li,ct.firstChild);
li.innerText=content.value;
content.value='';
})
// 点击console文本内容
li.forEach(function(ele){
ele.addEventListener('click',function(){
console.log(ele.innerText)
})
})
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>
代码
function $(ele){
if(document.querySelectorAll(ele).length>0){
return document.querySelectorAll(ele);
}
else{
return document.querySelector(ele);
}
}
var ct=$('.ct');
var ImgPreview=$('.img-preview');
var list=$('.ct>li');
list.forEach(function(ele){
ele.addEventListener('mouseenter',function(){
var img=document.createElement('img');
img.src=ele.getAttribute('data-img');
ImgPreview[0].appendChild(img);
})
ele.addEventListener('mouseleave',function(ele){
ImgPreview[0].innerHTML=''
})
})
网友评论