说是事件其实是事件没啥好说的，加了好多dom操作，主要是能看出来是哪些效果是用了dom操作
题目3： 解释IE事件冒泡和DOM2事件传播机制？
IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。
而DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段： 处于目标阶段，此时事件在div上发生，被看做冒泡的一部分。
由于兼容性的问题，我们可以尽量将在事件添加时为其指定传播机制为冒泡传递。
Paste_Image.png
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
- 兼容DOM的浏览器会将一个event对象传入事件处理程序中，这个event对象包含一个stopPropagation()方法，可以组织事件的进一步捕获或冒泡（取决于添加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行为。（在事件处理程序里使用return false也可以）
- 例子//
<input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');
cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);
上面代码为点击单选框的事件，设置监听函数，取消默认行为。由于浏览器的默认行为是选中单选框，所以这段代码会导致无法选中单选框
- 对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取消事件的默认行为
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var btn=document.getElementsByTagName('li')
for(var i=0;i<btn.length;i++){
btn[i].addEventListener('click', function(){
console.log(this.innerText)
})
}
</script>
也可以用事件代理的思想：
var ct = document.querySelector('.ct');
ct.addEventListener('click', function(e){
console.log(e.target.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>
var ct=document.querySelector('.ct')
var ipt=document.querySelector('.ipt-add-content')
var btn1=document.querySelector('#btn-add-start')
var btn2=document.querySelector('#btn-add-end')
ct.addEventListener('click',function(e){
console.log(e.target.innerText)
})//注意用到了事件代理的思想，如果直接加在li上的话就是用this.innerText
btn1.addEventListener('click',function(){
if(ipt.value.length>0){
var li =document.createElement('li');
li.innerText=ipt.value;
ct.insertBefore(li,ct.firstChild);}
})
btn2.addEventListener('click',function(){
if(ipt.value.length>0){
var li=document.createElement('li');
li.innerText=ipt.value;
ct.appendChild(li);}
})
</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>
var li1=document.getElementsByTagName("li");
var div1=document.getElementsByTagName("div")[0];
for(var i=0;i<li1.length;i++)
{
li1[i].addEventListener("mouseover",function () {
img1=document.createElement("img");
img1.src=this.getAttribute("data-img");
div1.appendChild(img1);
})
li1[i].addEventListener("mouseout",function () {
img1=document.createElement("img");
img1.src=this.getAttribute("data-img");
div1.innerHTML = '';
})
}
</script>
封装一个事件兼容的函数
addEvent(btn1,"click",fn);//调用添加
removeEvent(btn1,"click",fn);//调用移除
function addEvent(element,eventName,Listener) {
if (element.addEventListener) {
element.addEventListener(eventName,Listener,false);//主流浏览器兼容
}else if (element.attachEvent) {
element.attachEvent("on"+eventName,Listener);
}else{
//element.onclick=Listener;//点语法，可以不用写死
element["on"+eventName]=Listener;//中括号语法可以写活
}
};
