事件和事件对象

事件和事件对象_第1张图片
事件流.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等),直接修改事件代理的事件处理函数即可,不需要重新绑定处理器,不需要再次循环遍历。

你可能感兴趣的:(事件和事件对象)