JS中的event 对象包含哪些东西 event,实例 详解 JS 中的 event?event:window.event...
javascript event\u5bf9\u8c61\u7684\u5177\u4f53\u529f\u80fd\u662f\u4ec0\u4e48event\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;}
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攻略对象 ...