不懂之处
在直接监听使用for循环时，发现for循环中i不变的问题（循环return的console.log(i)都等于最后一个i）
for(var i = 0;i<liList.length;i++){
liList[i].addEventListener('click',function(){
console.log(i)
},false) //yyy
}
//xxx
不明白
这不是闭包的问题，是时机的问题。时机！ ——方方
1.是三个xxx这一行还是yyy这一行先被运行到
只要for循环遍历完成就到xxx，而不点击永远到不了yyy
这时候i=4
2.js没有循环的作用域，都在i的作用域
解决：
1.标记法 给liList(i).setAttribute('data-id',i)，使用的时候获取data-id
2.创建一个作用域
for(var i = 0;i<liList.length;i++){
function xxx(j){
liList[j].addEventListener('click',function(){
console.log(j)
},false) //j的值只在xxx的作用域内有效。j的值只要得到了就不会变了。没人再操作过j
xxx(i) //最好再改成立即执行函数
}
// 把j改成i也可以。因为此i非彼i。
// 函数内的i是函数内的，xxx(i)的i是for循环的
这是下下个任务的第一题
下面是题目
-
DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0事件，就是将一个函数赋值给一个事件处理程序属性。每个元素包括window和document都有自己的时间处理程序属性，这些属性通常全部小写，例如onclick，将这种属性的值设置为一个参数，就可以指定事件处理程序。
var btn = document.getElementById('myBtn')
btn.onclick = function(){
alert(this.id); //myBtn
}
使用DOM0指定事件的处理程序被认为是元素的方法。因此这时候的事件处理程序是在元素的作用域中运行。this引用的是当前元素。例子在上面
DOM2定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中的包含这两个方法，并且它们都接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。如果不写，默认为false，老式浏览器规定该参数必写，较新版本的浏览器允许该参数可选。为了保持兼容，建议总是写上该参数。
var btn = document.getElementById('myBtn')
btn.addEventListener('click',function(){
alert(this.id)
},false)
使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，按照添加它们的顺序触发。
移除事件处理程序的方法
DOM : 将事件处理程序设置为null btn.onclick = null
DOM2 : 用removeEventListener()
- ** attachEvent与addEventListener的区别？**
IE实现了与DOM中类似的两个方法: attachEvent()和detachEvent()
这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。而addEventListener接受三个参数。
var btn = document.getElementById('myBtn')
btn.attachEvent('onclick',function(){
alert('clicked')
})
要注意的是，attachEvent()第一个参数是'onclick'，而非DOM的addEventListener()方法中的'click'
在IE中使用attachEvent()与使用DOM方法的主要区别在于事件处理程序的作用域。在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this 等于 window
多次调用的调用顺序和DOM方法不用，事件处理程序不是以添加他们的顺序执行，而是以相反的顺序被触发。
-
解释IE事件冒泡和DOM2事件传播机制？
IE的事件流叫做事件冒泡，即事件开始时是由最具体的元素接受，然后逐级向上传播到较为不具体的节点。
网景的事件流叫做事件捕获，不太具体的节点更早接收到事件，而最具体的节点应该最后接收到事件。用意是在事件到达预定目标前捕获它。
DOM2事件传播机制
DOM2级事件 规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的事件捕获，为截取事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，在这个阶段对事件作出响应。
在DOM2事件传播机制中，实际的目标在捕获阶段不会接收到事件，捕获阶段只到实际目标的父节点。进入 处于目标阶段 ，事件在目标是发生，并在事件处理中被看成冒泡阶段的一部分。
但是IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。就是有两个机会在目标对象上操作
-
如何阻止事件冒泡？ 如何阻止默认事件？
event.stopPropagation()
阻止捕获和冒泡阶段中当前事件的进一步传播
event.preventDefault()
preventDefault方法取消浏览器对当前事件的默认行为，比如点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。该方法生效的前提是，事件的cancelable属性为true，如果为false，则调用该方法没有任何效果。
- 有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
var ul = document.getElementsByClassName('ct')
var li = ul[0].getElementsByTagName('li')
//1
for(var i=0;i<li.length;i++){
li[i].addEventListener('click',function(e){
console.log(this.innerText)
},false)
}
//2
ul[0].addEventListener('click',function(e){
console.log(e.target.innerText)
}) //返回事件触发的节点，是ul中的li
//3
for(var i=0;i<li.length;i++){
li[i].addEventListener('click',function(e){
console.log(e.currentTarget.innerText)
},false)
} //返回事件当前所在的节点 也就是li
//4
for(var i=0;i<li.length;i++){
li[i].setAttribute('onclick','')
li[i].onclick = function(){
console.log(this.innerText)
}
event.currentTarget和event.target
currentTarget返回的是事件当前所在的节点。在监听函数中，currentTarget属性实际上等同于this对象。
target返回的是触发事件的节点
- 补全代码，要求：
当点击按钮开头添加时在<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 ul = document.getElementsByClassName('ct')
var li = ul[0].getElementsByTagName('li')
var addStart = document.getElementById('btn-add-start')
var addEnd = document.getElementById('btn-add-end')
var change = document.getElementsByClassName('ipt-add-content')
addStart.addEventListener('click',function(){
var myString = document.createElement('li')
var stringContent = document.createTextNode('')
stringContent.data = change[0].value
myString.appendChild(stringContent)
if(myString.innerText===''){
console.log('请输入一个非空字符串')
alert('请输入一个非空字符串')
}else{
ul[0].insertBefore(myString,li[0])
}
},false)
addEnd.addEventListener('click',function(){
var myString = document.createElement('li')
var stringContent = document.createTextNode('')
stringContent.data = change[0].value
myString.appendChild(stringContent)
if(myString.innerText===''){
console.log('请输入一个非空字符串')
}else{
ul[0].appendChild(myString)
}
},false)
ul[0].addEventListener('click',function(e){
console.log(e.target.innerText)
</script>
