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():当cancelable为true的时候可以使用这个来阻止默认事件
4.stopPropagation():当bubbles为true的时候可以用来阻止冒泡
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级方法添加的事件event是window的属性,使用attachEvent()添加的事件event才是参数参入