整体事件与个体事件
一、事件处理的浏览器兼容性问题
标准浏览器使用虚参数e,IE使用 window.event,如果在html代码中写onclick="fn(event)"必须使用fn关键字。
语法: e = e|| window.event
1 var oDiv = document.getElementById("div1")
2 oDiv.onclick=fn
3 function fn(e){
4 var e=e||window.event//处理浏览器兼容性的问题,e:标准浏览器传进来的虚参数,window.event是IE
5 var target = e.target||e.srcElement//最终的事件在哪个元素上产生的(就是点击了是儿子还是父亲)
6 alert(target.id)
7 }
阻止冒泡
1 var oDiv = document.getElementById("div1")
2 var oDiv2 = document.getElementById("div2")
3 oDiv.onclick=fn
4 oDiv2.onclick=fn
5 function fn(e){alert(this.id)
6 var e=e||window.event//处理浏览器兼容性的问题,e:标准浏览器传进来的虚参数,window.event是IE
7 //var target = e.target||e.srcElement//最终的事件在哪个元素上产生的(就是点击了是儿子还是父亲)
8 if(e.stopPropagation)
9 e.stopPropagation()
10 else
11 e.cancelBubble=true
12 alert(target.id)
13 }
解决点击孙子不让父亲、爷爷的事件触发
传播本身的方式(通过事件传播的方法不让它父亲元素响应click事件)
阻止传播方式(阻止冒泡):
标准浏览器里:e.stopPropagation()//在标准浏览器里是一个方法,e是事件的方法
I E使用的是这个: e.cancelBubble=true //默认是false.在ie里是一个属性,e是事件属性
若调用方法,方法里不传参数,在标准浏览器里,会自动指定参数(浏览器的事件对象),
三、整体事件
1 <body>
2 <div id="div1" style="width:200px; height:200px; background-color:#0CC">
3 1111
4 </div>
5 </body>
6 </html>
7 <script type="text/javascript">
8 var oDiv = document.getElementById("div1")
9
10 function fn(event){
11 alert(event.target.id);
12 }
13 //oDiv.onclick=function(event){fn(event)}相当于在html里写成这样onclick="fn(event)",fn方法里必须传参数,必须要使用event
14 oDiv.onclick = fn//这样写可以不传参数,在标准浏览器里fn方法里的event是一个虚参数。
15
16
17
18 </script>
注意13行和14行。