JS 事件委托

6.焦点事件

1.失去焦点 onblur   

2.获取焦点 onfocus

7.键盘事件

document.onkeyup：按键抬起
document.onkeydowm：按键按下event.keyCode：获取键码
兼容性写法：var keyCode=e.keyCode || e.which

8.浏览器事件

window.onload :页面全部资源加载完毕
window.onscroll :浏览器滚动的时候触发
window.onresize:页面大小事件

5.事件监听

事件的绑定方式
DOM0级
属性事件，绑定事件
DOM2级
事件监听写法:
事件源.addEveentListener(( '事件类型（前面不要on）'，处理函数))

​ 区别

1.属性事件
兼容所有浏览器，html结构与行为没分离
2.绑定事件
后续事件会覆盖前面事件(注：相同事件源和事件类型)
3.监听事件
后续事件不覆盖前面事件(注：相同事件源和事件类型)
兼容IE7 IE8以上:addEventListener
兼容IE7 IE8: attachEvent
元素 .attachEvent('onclick',function(){})

​ 移出事件

removeEventListener(事件类型,事件处理函数)
事件处理函数不能是匿名函数
function onLogin(){}
元素.removeEventListener( 'click ' ,onLogin)
元素.onclick = function(){}
元素.onclick = nul1

6.事件传播方向

1.事件冒泡

就是从事件 目标 的事件处理函数开始，依次向外，直到 window 的事件处理函数触发
也就是从下向上的执行事件处理函数

2.事件捕获

就是从 window 的事件处理函数开始，依次向内，只要事件 目标 的事件处理函数执行
也就是从上向下的执行事件处理函数

3.实现

addEventListener的第三个参数决定了是事件捕获还是事件冒泡
true:表示注册的事件在捕获阶段触发
false:表示注册的事件在冒泡阶段触发-----默认值

4.事件处理的三个阶段

事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段；

7.事件目标对象

target 这个属性是事件对象里面的属性，表示你点击的目标

当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

这个 target 也不兼容IE，在 IE 下要使用 srcElement

1.target与currentTarget属性

当我点击哪个元素时，event.target返回的是点击的元素节点
event.currentTarget返回的是绑定事件的元素

7.事件委托

<script>
Var oUl = docuemnt.querySelector('ul')
oUl.addEventListener('click', function(e){
e = e ll window.event
var target = e.target ll e.srcElement
// 判断你点击的是 Li
if (target.nodeName.toUpperCase === 'LI') {
// 确定点击的是 Li
// 因为当你点击在 uL上面的时候，nodeName应该是UL
// 去做点击 Li 的时候该做的事情了
console.log('我是 li, 我被点击了 )
</script>

​ 这个时候，当我们点击 li 的时候，也可以触发 ul 的点事件

​ 并且在事件内不，我们也可以拿到你点击的到底是 ul 还是 li

​ 这个时候，我们就可以把 li 的事件委托给 ul 来做

2.好处

1.减少了事件绑定的数量；
对后来动态创建的元素依然有效，
解决动态添加的元素节点无法绑定事件的问题;

2.减少事件的冗余绑定，节约了事件资源。

3.缺点

1.事件委托基于冒泡，对于不冒泡的事件不支持。

2.层级过多，冒泡过程中，可能会被某层阻止掉。

3.理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。

4.把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。

8.阻止事件传播

e.stopPropagation()   标准浏览器
e.cancelBubble=true  IE低版本
兼容写法
if(e.stopPropagation){
    e.stopPropagation()
}else{
     e.cancelBubble = true
}
兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble = true

2.默认行为

默认行为，就是不用我们注册，它自己就存在的事情
比如我们点击鼠标右键的时候，会自动弹出一个菜单
比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面
…
这些不需要我们注册就能实现的事情，我们叫做 默认事件

1.两个方法来阻止默认事件

e.preventDefault() : 非 IE 使用
e.returnValue = false ：IE 使用