js中的事件对象和添加事件

1.事件冒泡,子元素上触发的事件如果父元素上也有同样的事件,那么父元素上的事件也会触发,通过事件冒泡可以实现事件委托,就是把事件都绑定在父元素上, 通过判断事件目标来确定事件处理函数.
oBox1.οnclick=function(ev){
//这里只是适用于非ie 浏览器,ie浏览器的event对象和别的浏览器不一样
   switch(ev.target.id){
      case "box1":
         alert("box1");
      break;
      case "box2":
         alert("box2");
      break;
      case "box3":
         alert("box3");
      break;
   }
}

2.事件绑定的方法:
   1.行内绑定:直接在元素上写事件处理e.g:<input type="button" name="" οnclick="alert('sssss')" />,当然,onclick的事件处理也可以写成一个function,onclick中调用
   2.js中获取元素添加事件处理,e.g:elem.οnclick=function(){},同样这个function也可以不是匿名的.
   3.(ie9+)js中使用elem.addEventListener(事件名字(不需要on),事件处理函数,false代表在冒泡阶段处理,true表示在捕获阶段处理)这个方法
(当然从处理事件的方式上就可以看出第一种并不是一种好方法,它的耦合性太高,而且会出现加载顺序问题)
(:在添加事件处理的时候要注意确保页面加载完毕,至少触发事件的元素加载完毕,要不然就无法获取元素也就无法触发事件)
(ie8-也有类似的事件处理方法attachEvent("on事件名",function),事件名字前面必须要加on,默认冒泡捕获所以不需要第三个参数,有一个注意点就是
在这个方法中的this并不是指向调用它的元素对象,而是window)

   3.删除事件处理:
       1.将事件处理赋值为null,等待回收机制自己处理,elem.οnclick=null,
   2.使用addEventListener()添加的事件要确保不能使用匿名函数,如果你想要删除事件的话,使用removeEventListener(事件名,function,add时候一样)
   在这里如果使用的是匿名函数是无法删除的因为两个匿名函数不是同一个,即使内容相同.ie8-detachEvent(),注意点和上面相同


   4.事件属性:
       1.bubbles:表示事件是否冒泡
       2.cancelable:表示是否有默认事件
       3.preventDefault():cancelabletrue的时候可以使用这个来阻止默认事件
       4.stopPropagation():bubblestrue的时候可以用来阻止冒泡
   5.target:表示事件的目标
   6.currentTarget:表示添加事件的目标
   (this等于currentTarget,但是不一定等于target,要是事件绑定在祖先元素上,那么currentTarget等于祖先元素,
target等于你触发的元素),举个例子:
   document.body.οnclick=function(ev){
      ev.currentTarget===this;//true
      ev.target==this;//不一定,要是点击的是body元素那就等,要是点击的是子孙元素那target就等于子孙元素,this还是
      指的是document.body
   }
   7.ie中阻止默认事件是使用returnValue=false
   8.ie中阻止冒泡使用cancelBubble=true
   9.ie中的目标事件是srcElement



   5.阻止默认事件就是阻止系统自带的事件如点击含有href属性的a元素会跳转,点击submit按钮会提交表单刷新页面,这些都是系统自带,


   6.ie中使用dom0级方法添加的事件eventwindow的属性,使用attachEvent()添加的事件event才是参数参入

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值