JavaScript_个人笔记5_JavaScript_event相关的重要参数

最新推荐文章于 2024-04-28 12:25:46 发布

rainychan2009

最新推荐文章于 2024-04-28 12:25:46 发布

阅读量362

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/rainychan2009/article/details/44926719

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在JavaScript中，在事件处理器中可以获取event这个对象，有时候啊处理事件时需要获取一些跟事件相关的信息，可以通过下面的代码获取

function PrintLn(str){
  var div = document.getElementById("msg");
  div.innerHTML = div.innerHTML + str+"<br/>";
}

function OnClick(){
  var e = event;
  var div = document.getElementById("msg");
  //alert("clicked.");
  PrintLn("是否冒泡：" + e.bubbles);
  PrintLn("鼠标的按钮：" + e.button);
  PrintLn("Ctrl键是否按下：" + e.ctrlKey);
  PrintLn("alt键是否被按下：" + e.altKey);
  var rest = e.isChar || "NotDefined";
  PrintLn("当前按下的键是否表示一个字符:" + rest);
  PrintLn("当前按键的unicode（仅仅对keypress事件有效）:" + e.keyCode);
  PrintLn("当前按键的unicode，无视当前按键是否表示一个字符:" + e.which);
  PrintLn("viewport区域坐标: X:" + e.pageX + "Y:" + e.pageY);
  PrintLn("相对于屏幕的坐标, X:" + e.ScreenX + "Y:" + e.ScreenY);
  PrintLn("事件冒泡阶段所在的当前DOM元素:" + e.currentTarget);
  PrintLn("事件冒泡原始的DOM元素:" + e.target || e.originalTarget);
  PrintLn("其他和事件相关的DOM元素:" + e.relatedTarget);
  PrintLn("--------------------------------------------");
}

对应的HTML代码

<!DOCTYPE html>
<html>
   <head>
       <script type="text/javascript" src="TestStatocVariable.js"></script>
       <script type="text/javascript">
           onload = function(){
           	//document.getElementById("box").addEventListener("click", OnClick);
           }
       </script>
   	   <title>Test Page</title>
   	   <style type="text/css">
           #msg{
           	width:  60%;
           	height: 600px;
           	border: 1px;
           	border-radius: 5px;
           }
   	   </style>
   </head>
   <body>
       <div id="box" οnclick="OnClick();">
   	   <button  οnclick="OnClick();" name="btnTest">Click</button>
   	   <div id="msg">
   	   	
   	   </div>
   	   </div>
   </body>
</html>

输出的结果：

是否冒泡：true
鼠标的按钮：0
Ctrl键是否按下：false
alt键是否被按下：false
当前按下的键是否表示一个字符:NotDefined
当前按键的unicode（仅仅对keypress事件有效）:0
当前按键的unicode，无视当前按键是否表示一个字符:1
viewport区域坐标: X:32Y:24
相对于屏幕的坐标, X:undefinedY:undefined
事件冒泡阶段所在的当前DOM元素:[object HTMLButtonElement]
事件冒泡原始的DOM元素:[object HTMLButtonElement]
其他和事件相关的DOM元素:null
--------------------------------------------
是否冒泡：true
鼠标的按钮：0
Ctrl键是否按下：false
alt键是否被按下：false
当前按下的键是否表示一个字符:NotDefined
当前按键的unicode（仅仅对keypress事件有效）:0
当前按键的unicode，无视当前按键是否表示一个字符:1
viewport区域坐标: X:32Y:24
相对于屏幕的坐标, X:undefinedY:undefined
事件冒泡阶段所在的当前DOM元素:[object HTMLDivElement]
事件冒泡原始的DOM元素:[object HTMLButtonElement]
其他和事件相关的DOM元素:null
--------------------------------------------