JS中的event 对象包含哪些东西 event，实例 详解 JS 中的 event?event:window.event...

javascript event\u5bf9\u8c61\u7684\u5177\u4f53\u529f\u80fd\u662f\u4ec0\u4e48

event\u5bf9\u8c61\u53ea\u5728\u4e8b\u4ef6\u53d1\u751f\u7684\u8fc7\u7a0b\u4e2d\u624d\u6709\u6548\uff08\u6bd4\u5982\u9f20\u6807\u70b9\u51fb\uff0c\u952e\u76d8\u6309\u4e0b\u7b49\uff09\u3002
event\u5bf9\u8c61\u7528\u4ee5\u8868\u793a\u4e8b\u4ef6\u7684\u72b6\u6001\uff0c
\u4f8b\u5982
\u89e6\u53d1event\u5bf9\u8c61\u7684\u5143\u7d20\uff08event.srcElement\uff09\u3001
\u9f20\u6807\u7684\u4f4d\u7f6e\uff08event.clientX\u3001event.clientY\uff09\u3001
\u6309\u4e0b\u7684\u952e\uff08event.keyCode\uff09\u7b49\u7b49\u3002

event\u5bf9\u8c61\u7684\u5c5e\u6027\u5305\u62ec\uff1a
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y \uff08\u53ef\u4ee5\u8be6\u7ec6\u67e5\u770b\u53c2\u8003\u4e66\uff09

\u4f7f\u7528event\u7684\u65b9\u6cd5\uff1a

\u5b9a\u4e49
var evt = window.event;
FF\u4e2d\u4e0d\u80fd\u901a\u8fc7\u8be5\u65b9\u6cd5\u5f97\u5230event\u5bf9\u8c61\uff0c\u53ef\u4ee5\u901a\u8fc7\u4f20\u503c\u7684\u65b9\u6cd5\uff1a
element.onclick = function(e){
var evt = window.event || e;
...
}

\u7528event\u83b7\u5f97\u70b9\u51fb\u65f6\u9f20\u6807\u7684\u5750\u6807
element.onclick = function(e){
var evt = window.event || e;
var cursorPOS = {
x : evt.clientX,
y : clientY
}
}

\u7528event\u5bf9\u8c61\u6307\u5b9a\u5f53\u6309\u4e0b\u56de\u8f66\u952e\u65f6\uff0c\u5f39\u51fa\u8b66\u544a\u6846
element.onkeydown = function(e){
var evt = window.event || e;
if(evt.keyCode==13){
alert('\u6309\u4e0b\u4e86\u56de\u8f66\uff01');
}
}

\u7528event\u83b7\u5f97\u9f20\u6807\u70b9\u51fb\u7684DOM\u5bf9\u8c61
document.onclick=function(e){
var evt = window.event || e;
var _target = evt.srcElement || evt.target;
alert(_target.tagName)
}

\u66f4\u591a\u7684\u4f7f\u7528\uff0c\u8bf7\u53c2\u8003\u6559\u6750\u3002

1\u3001this \u8868\u793a\u8fd9\u4e2a \u5143\u7d20\uff0c\u7b49\u540c\u4e8edocument.getElementById;
2\u3001a)\u4f60\u7684\u7406\u89e3\u662f\u6b63\u786e\u7684\uff0c\u4f46\u662f\u4e0d\u4ec5\u53ea\u6709undifined\u4f1a\u88ab\u5f3a\u5236\u8f6c\u6362\u3002
js\u7684\u5f31\u7c7b\u578b\uff0c\u8ba9\u4ed6\u53ef\u4ee5\u7533\u660e\u540e\u8d4b\u4efb\u4f55\u7c7b\u578b\u7684\u503c\u3002
\u56e0\u6b64\u9664\u4e86bool\u578b\u7684false\uff0cnumber\u7c7b\u578b\u76840\uff0cString\u7c7b\u578b\u7684\u7a7a\u4e32\uff0c\u8fd8\u6709null\u5728\u4e09\u5143\u8fd0\u7b97\u7b26\u6216\u8005\u5224\u65ad\u6761\u4ef6\u65f6\u90fd\u4f1a\u88ab\u8f6c\u6210false
\u5176\u4ed6\u8fd8\u6709\u4e00\u4e9b\uff0c\u53ef\u4ee5\u770b\u4e00\u770b\u6bd4\u8f83\u57fa\u7840\u7684javascript\u4e66\u548c\u300ajavascript\u9ad8\u7ea7\u7a0b\u5e8f\u8bbe\u8ba1\u300b\uff0c\u53ef\u8c13\u4e00\u9605\u626b\u767e\u60d1\uff0c\u6bd4\u5728\u7f51\u4e0a\u522b\u4eba\u4e00\u77e5\u534a\u89e3\u7684\u8bb2\u8ff0\u4e86\u89e3\u7684\u66f4\u5f7b\u5e95\u3002
b)\u901a\u8fc7\u4e0a\u9762\u7684\u89e3\u7b54\uff0c\u5e94\u8be5\u77e5\u9053\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u7528event\u4ee3\u66ffthis\u4e86\u5427
c)js\u5bf9\u4e8e\u51fd\u6570\u7684\u5b9a\u4e49\u662f\u975e\u5e38\u677e\uff0c\u5373\u4f7f\u4f60\u5728\u51fd\u6570\u5b9a\u4e49\u65f6\u672a\u5199\u4efb\u4f55\u53c2\u6570\uff0c\u6216\u8005\u4f60\u5b9a\u4e49\u7684\u53c2\u6570\u6709\u591a\u4e2a\uff0c\u4f46\u662f\u4f60\u8c03\u7528\u65f6\uff0c\u4e00\u4e2a\u53c2\u6570\u4e5f\u4e0d\u586b\uff0c\u4e5f\u4e0d\u4f1a\u51fa\u9519\u7684\u3002
js\u51fd\u6570\u5185\u9ed8\u8ba4\u6709\u4e2a\u53d8\u91cf\uff0c\u4fdd\u5b58\u4f60\u7684\u5165\u53c2\u53eb\uff1aarguments
\u4ed6\u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u4e0b\u6807\u4ece0\u5f00\u59cb\uff0c
\u6240\u4ee5\u83b7\u53d6event\u53ef\u4ee5\u5199\u6210
function Test(){var event = window.event||arguments[0];}\u5728ie\u4e0b\uff0c\u4e8b\u4ef6\u5bf9\u8c61\u662f\u5728\u5168\u5c40\u7684\uff0c\u4e5f\u5c31 window\u4e0b\uff0c\u505a\u4e3awindow\u7684\u4e00\u4e2a\u5c5e\u6027
\u5728\u5176\u4ed6\u6d4f\u89c8\u5668\uff0c\u90fd\u505a\u4e3a\u65b9\u6cd5\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u4f20\u5165\uff0c\u6240\u4ee5\u8fd9\u6837\u5199\u662f\u4e3a\u4e86\u517c\u5bb9

\u8981\u83b7\u53d6\u8fd9\u4e2abutton\u7684\u503c\uff0c\u53ef\u4ee5\u5148\u83b7\u53d6\u8fd9\u4e2a\u5bf9\u8c61\uff0cevent\u65e2\u7136\u662f\u4e8b\u4ef6\uff0c\u80af\u5b9a\u662f\u67d0\u5bf9\u8c61\u89e6\u53d1\u7684
\u6240\u4ee5\u6709\u8fd9\u8981\u4e00\u4e2a\u65b9\u6cd5
ie\u4e0b\u662fevent.srcElement
\u5176\u4ed6\u6d4f\u89c8\u5668\u662fevent.target
\u6240\u4ee5\u83b7\u53d6\u8fd9\u4e2a\u5bf9\u8c61\u548c\u83b7\u53d6\u4e8b\u4ef6\u5bf9\u8c61\u7684\u503c\u53ef\u4ee5\u8fd9\u6837\u5199
function Test(){var event = window.event||arguments[0],//target \u5c31\u662f\u8fd9\u4e2a\u5bf9\u8c61target = event.srcElement||event.target,//\u8fd9\u4e2a\u5bf9\u8c61\u7684\u503ctargetValue = target.value;}

JS的event对象
Event属性和方法：

1. type：事件的类型，如onlick中的click；

2. srcElement/target：事件源，就是发生事件的元素；

3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键）

4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置；

6. x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数；

7. altKey,ctrlKey,shiftKey等：返回一个布尔值；

8. keyCode：返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )

9. fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；

10. cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)

11. returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定 DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在
attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；

13. screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；

一些说明：

1. event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；

2. event对象只在事件发生的过程中才有效。
firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是 window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。

3. 下面两句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event为null, IE下event为null

4. IE中事件的起泡
IE中事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如， div 标签包含了 a ，如果这两个标签都有onclick事件的处理函数，那么执行的情况就是先执行标签 a 的onclick事件处理函数，再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后，不希望执行上层的 div 的onclick的事件处理函数了，那么就把cancelBubble设置为true即可。

扩展阅读：深入浅出vue js ... js map set ... empty embryo汉化krkr ... emptyxembryo攻略 ... js中的eval详解 json ... js instanceof ... change values ... general help ... empty embryo攻略对象 ...