JavaScript click事件深入
在上一个例子“addEventSimple观察鼠标事件”中，我们观察了发生在一个元素上的所有鼠标事件。现在我们再来深入研究某一个具体的鼠标事件的更多细节。
获得事件
要获得事件对象（也即event对象），我们可以在事件响应函数中使用如下代码：
function clickFunc(e){
    var evt = e || window.event
}
《ppk谈JavaScript》一书介绍了代码的原理：W3C标准兼容的浏览器，事件将会作为第一个参数被传入函数中，也就是上面函数的参数e；微软的IE中，事件将会被存储在全局变量window.event中。所以以上代码会将事件对象存储在evt变量中。
能够获得事件对象，我们就可以进一步的访问它的属性了。
事件对象的属性
type属性，也就是事件的类型。
位置属性，有许多属性可以用来获得鼠标事件的位置。但是并不是每个属性都能够跨浏览器，我们使用如下的代码来做一个显示事件属性的实例：
javascript免费教程<script type="text/javascript">
function addEventSimple(obj,evt,fn){
    if(obj.addEventListener){
      obj.addEventListener(evt,fn,false);
    }else if(obj.attachEvent){
    obj.attachEvent('on'+evt,fn);
  }
}
addEventSimple(window,'load',init);
function init(){
  addEventSimple(document,'click',clickFunc);
}
function clickFunc(e){
  var evt = e || window.event
    var str = "";
  var watchScreen = ElementById("watchScreen");
  if(evt.pageX||evt.pageY){
      str += "pageX:" + evt.pageX + " ";
    str += "pageY:" + evt.pageY;
      str += "<br />";
}
  if(evt.offsetX||evt.offsetY){
      str += "offsetX:" + evt.offsetX + " ";
    str += "offsetY:" + evt.offsetY;
      str += "<br />";
}
  if(evt.clientX||evt.clientY){
      str += "clientX:" + evt.clientX + " ";
    str += "clientY:" + evt.clientY;
      str += "<br />";
}
  if(evt.screenX||evt.screenY){
      str += "screenX:" + evt.screenX + " ";
    str += "screenY:" + evt.screenY;
      str += "<br />";
}
  watchScreen.innerHTML = pe + "事件发生！<br />" + str;
}
</script>

个人测试window.event
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
    <script type="text/javascript">
        load = function()
        {
            var watchScreen = ElementById("watchScreen");
            keydown = test;
            lick = test;
        }
        function init(e)
        {
                alert(window.event);
        }
        function test(e)
        {
          //  alert("a");
              alert(window.event);//发现window.event即为当前触发该函数的事件对象
        }
    </script>
   
</head>
<body>
    <input type="text" id="watchScreen" >
 
     
</body>
</html>

JavaScript事件来源元素
有些时候我们需要知道是哪个元素触发了某个事件，我们可以事件响应函数中获得这个元素。但是在不同的浏览器中我们需要使用不同的方法来获得这个来源元素。假设evt为事件对象：W3C标准中，使用evt.target,而IE为evt.srcElement。所以我们可以用如下代码来跨浏览器地获得事件的来源元素：
function clickFunc(e){
    var evt = e || window.event;
    var eventSrc = evt.target||evt.srcElement;
}
注意：时间响应函数中的this返回的是定义事件响应函数的元素。我们使用如下的JavaScript
代码来显示事件来源元素的信息，可以在页面下方的div内观察得到。
<script type="text/javascript">
function addEventSimple(obj,evt,fn){
  if(obj.addEventListener){
      obj.addEventListener(evt,fn,false);
    }else if(obj.attachEvent){
    obj.attachEvent('on'+evt,fn);
  }
}
addEventSimple(window,'load',init);
function init(){
  addEventSimple(document,'click',clickFunc);
}
function clickFunc(e){
  var evt = e || window.event;
  var eventSrc = evt.target||evt.srcElement;
var str = pe + "事件发生！";
  str += "<br />事件的来源元素：" + eventSrc;
  str += "<br />来源元素的nodeName：" + deName;
  str += "<br />来源元素的nodeValue：" + deValue;
str += "<br />来源元素的nodeType：" + deType;
  str += "<br />时间响应函数的this：" + this;
    var watchScreen = ElementById("watchScreen");
  watchScreen.innerHTML = str;
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。