事件和事件对象

事件流.png

事件

就是和浏览器产生交互效果的，事件触发和函数一起使用，当触发事件的时候，调用相应的事件去处理接下来的事情。

DOM0级事件

直接在dom对象上注册事件名称，所有浏览器都支持。

document.getElementById('div1').onclick=function(e){ // 触发事件之后的操作}

事件触发会默认传入一个参数e：事件对象；通过这个事件对象，可以获取到触发这个事件的dom元素，点击的坐标值，等一些主要的信息。当然事件的触发也可以这样写：

document.getElementById('div1')['onclick']=function(e){// 触发事件后的操作}

这上面的两种事件的触发，其实也就是js对象身上属性的两种访问方式，也就是说：

• DOM0级事件是元素对象的私有属性；
• 同一个元素对象，同一个事件行为，只能绑定一次，多次绑定，后面的会覆盖前面的；
• DOM0级事件发生在事件流的冒泡阶段

DOM0级事件中的this

一般下面这种写法的时候，当事件触发的时候，事件中的this就是指向触发该事件的dom元素对象

当把事件写在html代码里面的时候，虽然也遵守事件覆盖的原则，但不会传入event事件对象，相当于动态调用函数，this指向的是window，而不是事件触发者：dom元素：

DOM2级事件

支持元素绑定多个事件

• addEventListener()
  • 注册事件
  • this指向被绑定事件的这个元素
  • 三个参数：事件行为（去掉前边的on），处理函数回调（默认传入event对象，this指向触发的元素节点），捕获/冒泡（true/false）
  • 给同一个元素，同一个行为绑定多次同一个方法，实际上只执行一次
  • 对应同一个元素来说，是按照事件绑定的先后顺序执行的

var btn=document.getElementById('div');
btn.addEventListener('click',function(e){
     console.log(this); // btn
  },false)

• removeEventListener()

  • 移除事件

• IE8及其以下版本浏览器，

  • attachEvent(事件处理程序名称与事件处理程序函数)
    • 对于同一个元素，绑定多个事件，事件执行的顺序不是按照绑定的顺序执行
    • 事件中的this默认指向window，即事件处理程序会在全局作用域内执行，与DOM0级事件相比，事件作用域在其所属元素内运行
    • 给同一个元素，同一个行为绑定多次同一个方法，执行是多次的
  • detachEvent()

• 阻止冒泡

  • e.stopPropagation() 标准浏览器
  • e.cancelBubble=true 低级IE浏览器
  • 兼容性写法

   通过e.stopPropagation来判断是标准浏览器还是低级IE浏览器
  
    e.stopPropagation? e.stopPropagation(): e.cancelBubble=true;
  

• 阻止默认事件

原先点击的事件，事件应该发生本来的事件效果，但是可以去阻止默认的事件

• e.preventDefault 标准浏览器
• e.returnValue=false 低级IE浏览器

通过e.preventDefault来判断是标准浏览器还是低级IE浏览器

 e.preventDefault?e.preventDefault():e.returnValue=false;

只能输入和编辑数字

好处

• 将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
• DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。