JS中的event 对象详解
JS中的event对象详解
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对象事件类型注册多个事件处理函数的⽅法，它们有两个参数，第⼀个是事件类型，第⼆个是事件处理函数。
function(e)的用法
一、简介function(e)是JavaScript中常见的语法结构，用于定义函数和处理事件。
其中，e通常表示事件对象，可以在函数内部使用这个对象来获取触发事件的相关信息。
二、在函数中使用event对象1. 在事件处理函数中，可以通过function(e)来接收事件对象e，然后在函数内部使用这个对象来获取事件的相关信息，比如触发事件的元素、事件的类型等。
2. 通过event对象可以获取元素的相关信息，比如获取事件触发的元素，获取鼠标位置等。
这些信息可以帮助开发者更灵活地处理事件。
三、示例以下是一个简单的示例，演示了如何在函数中使用event对象来处理鼠标点击事件。
```// HTML部分<button id="btn">点击我</button>// JavaScript部分document.getElementById('btn').addEventListener('click',function(e) {console.log('触发了点击事件');console.log('事件类型：' + e.type);console.log('触发事件的元素：' + e.target);console.log('鼠标点击的X坐标：' + e.clientX);console.log('鼠标点击的Y坐标：' + e.clientY);});```四、在不同情况下的用法1. 在事件处理函数中，可以根据需要选择是否使用event对象。
如果需要获取事件相关的信息，就可以在函数中使用function(e)，然后通过e来获取相应的信息。
2. 在一些情况下，可能并不需要event对象，比如一些简单的事件处理函数，只需要执行一些特定的操作，不需要获取事件的相关信息。
详述JS中的事件
JS事件的理解什么是事件？事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。
当我们与浏览器中Web 页面进行某些类型的交互时，事件就发生了。
事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。
事件还可能是Web 浏览器中发生的事情，比如说某个Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
今天的事件在漫长的演变史，我们已经告别了内嵌式的事件处理方式（直接将事件处理器放在HTML 元素之内来使用）。
今天的事件，它已是DOM的重要组成部分，遗憾的是，IE继续保留它最早在IE4.0中实现的事件模型，以后的IE版本中也没有做太大的改变，这也就是说IE还是使用的是一种专有的事件模型（冒泡型）,而其它的主流浏览器直到DOM 级别3 规定定案后，才陆陆续续支持DOM标准的事件处理模型—捕获型与冒泡型。
历史原因是：W3C 规范在DOM 级别1中并没有定义任何的事件，直到发布于2000 年11 月的DOM 级别2 才定义了一小部分子集，DOM 级别2中已经提供了提供了一种更详细的更细致的方式以控制Web 页面中的事件，最后，完整的事件是在2004年DOM 级别3的规定中才最终定案。
因为IE4是1995推出的并已实现了自己的事件模型（冒泡型），当时根本就没有DOM标准，不过在以后的DOM标准规范过程中已经把IE的事件模型吸收到了其中。
目前除IE浏览器外，其它主流的Firefox, Opera,Safari都支持标准的DOM事件处理模型。
IE仍然使用自己专有的事件模型，即冒泡型，它事件模型的一部份被DOM标准采用，这点对于开发者来说也是有好处的，只有使用DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。
DOM事件流DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
Web前端教程js-event(事件对象及其属性、方法)
Web前端教程js-event(事件对象及其属性、方法) Event 对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行!其中：event.target不支持IE浏览器。
1、事件句柄(事件函数)：以on开头的若干2、标/键盘属性：3、截图：Js event事件在IE、FF兼容性问题1、event对象IE：有window.event对象FF：没有window.event对象。
可以通过给函数的参数传递event对象。
如：function showDiv(event){var event=window.event||event;event.clientX;event.clientY;}2、event.srcElement||event.targetJavascript event.srcElement感觉这个挺好，可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示，如"TD","TR","A"等。
所以把看过的一些抄下来，不记得的时候再来看看。
event.srcElement从字面上可以看出来有以下关键字：事件,源他的意思就是：当前事件的源，我们可以调用他的各种属性就像:document.getElementById("")这样的功能，经常有人问 firefox 下的event.srcElement 怎么用，在此详细说明：IE下,event对象有srcElement属性,但是没有target属性;Firefox 下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：firefox 下的 event.target = IE 下的 event.srcElement 解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.。
js原生3种自定义事件方法(createEventinitinitMouseUIEven
js原生3种自定义事件方法（createEventinitinitMouseUIEven 在JavaScript中，我们可以使用原生的方式来创建和触发自定义事件。
下面将介绍三种常用的方法：createEvent、initEvent和dispatchEvent。
1. createEvent方法：createEvent方法是用于创建一个新的自定义事件对象。
该方法接受一个参数，用于指定事件类型。
常见的事件类型有"CustomEvent"、"MouseEvent"、"UIEvent"等。
示例代码：```javascriptvar event = document.createEvent("CustomEvent");```2. initEvent方法：initEvent方法是用于初始化自定义事件对象的属性。
该方法接受三个参数，分别是事件类型、是否冒泡以及是否可以取消默认行为。
示例代码：```javascriptevent.initEvent("myEvent", true, true);```3. dispatchEvent方法：dispatchEvent方法是用于触发自定义事件。
该方法接受一个参数，即要触发的事件对象。
示例代码：```javascriptdocument.dispatchEvent(event);```综合示例：```javascript//创建自定义事件对象var event = document.createEvent("CustomEvent");//初始化事件对象event.initEvent("myEvent", true, true);//添加事件监听器document.addEventListener("myEvent", function(e)console.log("自定义事件已触发");});//触发自定义事件document.dispatchEvent(event);```除了上述方法，我们还可以使用其他一些特定类型的事件方法来创建和触发自定义事件，如MouseEvent、KeyboardEvent等。
Event对象的属性解析
altKey/shiftKey/ ctrlKey
获取是否按下了 alt、shift、ctrl(这三个非 jQuery 封装
获取移入移出目标点离开或进入的那个 DOM 元素
获取冒泡前触发的 DOM 元素，等同与 this 获取相对于页面原点的水平/垂直坐标 获取显示器屏幕位置的水平/垂直坐标(非 jQuery 封装) 获取相对于页面视口的水平/垂直坐标(非 jQuery 封装) 获取鼠标的左中右键(1,2,3)，或获取键盘按键
Event对象
属性名
type target data
描述
获取这个事件的事件类型，例如：click 获取触发事件的 DOM 元素 获取事件调用时的额外数据
relatedTarget
currentTarget pageX/pageY screenX/screenY clientX/clientY which
Event对象的属性
信息工程学院 讲师：曾艳 事件对象就被创 建了. 在程序中使用事件只需要为函数添加 一个参数. 该事件对象只有事件处理函数才 能访问到. 事件处理函数执行完毕后, 事件 对象就被销毁了. event.pageX, event.pageY: 获取到光标相对 于页面的 x, y 坐标.
js中event的用法
js中event的用法在JavaScript中，事件（event）是指用户与网页或应用程序进行交互时发生的动作或操作。
通过捕捉事件，我们可以执行一些特定的代码来响应用户的操作。
在本文中，我们将介绍JS中事件的基本概念、事件的类型、事件监听器的使用、事件对象的属性和方法以及一些常见的事件示例。
事件的基本概念：在Web开发中，事件是指由用户执行的动作，比如点击鼠标、按下键盘、滚动页面等。
当这些事件发生时，我们可以捕捉并执行一些与之相关的代码。
事件可以在浏览器内部和页面元素之间进行传递。
在JS中，每个事件都有一个对应的事件处理器（event handler），用于处理该事件发生时要执行的代码。
事件的类型：在JS中，有各种各样的事件类型，可以满足不同的需求。
常见的事件类型包括：- 鼠标事件：比如点击（click）、双击（dblclick）、移动（mousemove）、进入（mouseover）和离开（mouseout）等。
- 键盘事件：比如按下一些键（keydown）或释放一些键（keyup）等。
- 表单事件：比如提交表单（submit）、改变输入内容（change）等。
- 页面事件：比如页面加载完成（load）、页面滚动（scroll）、窗口大小改变（resize）等。
- 多媒体事件：比如视频播放（play）和音频暂停（pause）等。
事件监听器的使用：要捕捉事件并执行相应的代码，我们可以使用事件监听器（event listener）或事件处理器。
事件监听器用于“监听”特定的事件，并指定当事件发生时要执行的代码。
在JS中，我们可以使用addEventListener(方法来添加事件监听器。
该方法接受三个参数：事件名称、事件处理函数和一个可选的布尔值，用于指定事件的传播方式。
下面是一个例子，展示如何使用addEventListener(方法来添加一个鼠标点击事件监听器：```javascriptdocument.addEventListener('click', functioalert('鼠标点击了页面！');});```事件对象的属性和方法：在事件处理函数中，我们可以通过事件对象（event object）来访问和操作事件的属性和方法。
JavaScript 事件对象介绍
web前端培训教程：JavaScript 事件对象介绍JavaScript 在事件处理函数中默认传递了event 对象，也就是事件对象。
但由于浏览器的兼容性，开发者总是会做兼容方面的处理。
jQuery 在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法。
一．事件对象事件对象就是event 对象，通过处理函数默认传递接受。
之前处理函数的e 就是event事件对象，event 对象有很多可用的属性和方法，我们在JavaScript 课程中已经详细的了解过这些常用的属性和方法，这里，我们再一次演示一下。
//通过处理函数传递事件对象$('input').bind('click', function (e) { //接受事件对象参数alert(e);});//通过event.type 属性获取触发事件名$('input').click(function (e) {alert(e.type);});//通过event.target 获取绑定的DOM 元素$('input').click(function (e) {alert(e.target); });//通过event.data 获取额外数据，可以是数字、字符串、数组、对象$('input').bind('click', 123, function () { //传递data 数据alert(e.data); //获取数字数据});注意：如果字符串就传递：'123'、如果是数组就传递：[123,'abc']，如果是对象就传递：{user : 'Lee', age : 100}。
数组的调用方式是：e.data[1]，对象的调用方式是：er。
//event.data 获取额外数据，对于封装的简写事件也可以使用$('input').click({user : 'Lee', age : 100},function (e) {alert(er);});注意：键值对的键可以加上引号，也可以不加；在调用的时候也可以使用数组的方式：alert(e.data['user']);//获取移入到div 之前的那个DOM 元素$('div').mouseover(function (e) {alert(e.relatedTarget);});//获取移出div 之后到达最近的那个DOM 元素$('div').mouseout(function (e) {alert(e.relatedTarget); });//获取绑定的那个DOM 元素，相当于this，区别与event.target$('div').click(function (e) {alert(e.currentTarget);});注意：event.target 得到的是触发元素的DOM，event.currentTarget 得到的是监听元素的DOM。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.JS中的event 对象详解标签：firefox文档ienullscroll浏览器2012-09-24 15:38 368人阅读评论(0) 收藏举报分类：javascript（9）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为null4. IE中事件的起泡IE中事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。
例如， div 标签包含了 a ，如果这两个标签都有onclick事件的处理函数，那么执行的情况就是先执行标签 a 的onclick事件处理函数，再执行 div 的事件处理函数。
如果希望的事件处理函数执行完毕之后，不希望执行上层的 div 的onclick的事件处理函数了，那么就把cancelBubble设置为true即可。
js event.keyCode对应的键码：keycode 8 = BackSpace BackSpacekeycode 9 = Tab Tabkeycode 12 = Clearkeycode 13 = Enterkeycode 16 = Shift_Lkeycode 17 = Control_Lkeycode 18 = Alt_Lkeycode 19 = Pausekeycode 20 = Caps_Lockkeycode 27 = Escape Escapekeycode 32 = space spacekeycode 33 = Priorkeycode 34 = Nextkeycode 35 = Endkeycode 36 = Homekeycode 37 = Leftkeycode 38 = Upkeycode 39 = Rightkeycode 40 = Downkeycode 41 = Selectkeycode 42 = Printkeycode 43 = Executekeycode 45 = Insertkeycode 46 = Deletekeycode 47 = Helpkeycode 48 = 0 equal braceright keycode 49 = 1 exclam onesuperior keycode 50 = 2 quotedbl twosuperior keycode 51 = 3 section threesuperior keycode 52 = 4 dollarkeycode 53 = 5 percentkeycode 54 = 6 ampersandkeycode 55 = 7 slash braceleft keycode 56 = 8 parenleft bracketleft keycode 57 = 9 parenright bracketright keycode 65 = a Akeycode 66 = b Bkeycode 67 = c Ckeycode 68 = d Dkeycode 69 = e E EuroSignkeycode 70 = f Fkeycode 71 = g Gkeycode 72 = h Hkeycode 73 = i Ikeycode 74 = j Jkeycode 75 = k Kkeycode 76 = l Lkeycode 77 = m M mukeycode 78 = n Nkeycode 79 = o Okeycode 80 = p Pkeycode 82 = r Rkeycode 83 = s Skeycode 84 = t Tkeycode 85 = u Ukeycode 86 = v Vkeycode 87 = w Wkeycode 88 = x Xkeycode 89 = y Ykeycode 90 = z Zkeycode 96 = KP_0 KP_0keycode 97 = KP_1 KP_1keycode 98 = KP_2 KP_2keycode 99 = KP_3 KP_3keycode 100 = KP_4 KP_4keycode 101 = KP_5 KP_5keycode 102 = KP_6 KP_6keycode 103 = KP_7 KP_7keycode 104 = KP_8 KP_8keycode 105 = KP_9 KP_9keycode 106 = KP_Multiply KP_Multiply keycode 107 = KP_Add KP_Addkeycode 108 = KP_Separator KP_Separator keycode 109 = KP_Subtract KP_Subtract keycode 110 = KP_Decimal KP_Decimal keycode 111 = KP_Divide KP_Divide keycode 112 = F1keycode 113 = F2keycode 114 = F3keycode 115 = F4keycode 116 = F5keycode 117 = F6keycode 118 = F7keycode 119 = F8keycode 120 = F9keycode 121 = F10keycode 122 = F11keycode 123 = F12keycode 124 = F13keycode 125 = F14keycode 126 = F15keycode 127 = F16keycode 129 = F18keycode 130 = F19keycode 131 = F20keycode 132 = F21keycode 133 = F22keycode 134 = F23keycode 135 = F24keycode 136 = Num_Lockkeycode 137 = Scroll_Lockkeycode 187 = acute gravekeycode 188 = comma semicolonkeycode 189 = minus underscorekeycode 190 = period colonkeycode 192 = numbersign apostrophekeycode 210 = plusminus hyphen macronkeycode 211 =keycode 212 = copyright registeredkeycode 213 = guillemotleft guillemotright keycode 214 = masculine ordfemininekeycode 215 = ae AEkeycode 216 = cent yenkeycode 217 = questiondown exclamdownkeycode 218 = onequarter onehalf threequarters keycode 220 = less greater barkeycode 221 = plus asterisk asciitilde keycode 227 = multiply divisionkeycode 228 = acircumflex Acircumflexkeycode 229 = ecircumflex Ecircumflexkeycode 230 = icircumflex Icircumflexkeycode 231 = ocircumflex Ocircumflexkeycode 232 = ucircumflex Ucircumflexkeycode 233 = ntilde Ntildekeycode 234 = yacute Yacutekeycode 235 = oslash Oobliquekeycode 236 = aring Aringkeycode 237 = ccedilla Ccedillakeycode 238 = thorn THORNkeycode 239 = eth ETHkeycode 240 = diaeresis cedilla currency keycode 241 = agrave Agrave atilde Atilde keycode 242 = egrave Egravekeycode 243 = igrave Igravekeycode 244 = ograve Ograve otilde Otildekeycode 245 = ugrave Ugravekeycode 246 = adiaeresis Adiaeresiskeycode 247 = ediaeresis Ediaeresiskeycode 248 = idiaeresis Idiaeresiskeycode 249 = odiaeresis Odiaeresiskeycode 250 = udiaeresis Udiaeresiskeycode 251 = ssharp question backslashkeycode 252 = asciicircum degreekeycode 253 = 3 sterlingkeycode 254 = Mode_switch键值对应表A 0X65 U 0X85B 0X66 V 0X86C 0X67 W 0X87D 0X68 X 0X88E 0X69 Y 0X89F 0X70 Z 0X90G 0X71 0 0X48H 0X72 1 0X49I 0X73 2 0X50J 0X74 3 0X51K 0X75 4 0X52L 0X76 5 0X53M 0X77 6 0X54N 0X78 7 0X55O 0X79 8 0X56P 0X80 9 0X57Q 0X81 ESC 0X1BR 0X82 CTRL 0X11S 0X83 SHIFT 0X10T 0X84 ENTER 0XD如果要使用组合键，则可以利用event.ctrlKey，event.shiftKey，event .altKey判断是否按下了ctrl键、shift键以及alt键.。