js中的event事件对象兼容型写法及事件流学习笔记

一、event事件对象:表示用来获取事件的详细信息,如:鼠标的位置,键盘的按键。比如得到鼠标的横坐标:事件对象.clientX。clientX是可视区坐标,滚动条距离是:document.documentElement.scrollTop (ie)或者 document.body.scrollTop.

   由于在ie和chrome下得到的事件方法不一样,在ie下:

   

<script>
    document.onclick = function(){ 
        alert(event.clientX);
    }
</script>

 

  而在chrom下就不行了,在chrome下须要这样:

   

<script>
    document.onclick = function(ev){
      alert(ev.clientX);
        }
</script>

   所在他们的兼容最简单的写法就是:

   

<script>
    var Oevn = ev || event;//如果ev为false表示不是在chrome下   
      document.onclick = function(){
       alert(Oevn .clientX);
    }
</script>

注:现在chrome高版本也直接支持event事件了。



二、事件流

   例子出下:

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
    <div style="width:300px;height:300px;background:#00FF99; " onclick="alert(this.style.background);">
        <div style="width:200px;height:200px;background:#000000;" onclick="alert(this.style.background);">
            <div style="width:100px;height:100px; background:#FF0000;" onclick="alert(this.style.background);"> </div>     
        </div>
    </div>
</body>
</html>

   当我们点击最大的div时,只会弹出该div的背景,但是我们当点击最小的div时,他们会依次弹出最小,中度,最大div的背景,这种情况就是js冒泡事件。他们会依次将事件传递到父级中去。

   js冒泡事件一般来说是给我们带来困难而不会带来方便,要想阻止其传播,就用 Oevent.cancelBubble =true来搞定。

   例子:

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#div1 {
    height:100px;
    width:200px;
    background:#00FF99;
    display:none;
    }
</style>
<script>
window.onload =function ()
{
  var butn = document.getElementById("butn1");
  var div = document.getElementById("div1");
                                                                                                                            
  butn.onclick = function (ev){
  var Oevent = ev || event;
   div.style.display ="block";
     alert(111);
     Oevent.cancelBubble =true;
  };
                                                                                                                            
  document.onclick =function(){
    div.style.display ="none";
    alert(222);
  };
                                                                                                                            
 };
                                                                                                                            
</script>
</head>
<body>
<input type="button" id="butn1" value="按钮"/>
<div id="div1">
</div>
</body>
</html>

       这样通过alert提示来得出每一步的结果,像百度的翻译,百度个人用户信息等都是这原理。


 三、让一个div跟随鼠标移动:

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#div1 {
    width:200px;
    height:200px;
    background:#0066FF;
    position:absolute;
}
</style>
<script>
document. =function(ev){
var Oevent = ev || event;
var div1 = document.getElementById("div1");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
div1.style.left = Oevent.clientX+"px";
div1.style.top = Oevent.clientY+scrollTop+"px";
}
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

   学完一点,总结一点


本文出自 “浪羽清风” 博客,转载请与作者联系!

你可能感兴趣的:(事件流,js中的event)