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。

js-Event经验之谈

事件
点击
Onclick 元素被单击时事件触发
Ondbclick 元素被单击时事件触发
事件对
Onfocus 失去焦点时元素被触发
Onblur 元素失去焦点时被触发
Onkeydown 键盘上任意按键按下都会激发具有此事件的任何元素相应此事件Onkeyup键盘上任意按键弹起都会激发具有此事件的任何元素相应此事件
Onmousedown 鼠标键被按下时事件相应（一次）
Onmouseup 鼠标键弹起时事件相应（一次）
Onmouseover 鼠标进入某个元素事件相应，触发一次
Onmouseout鼠标进入离开元素事件相应，触发一次
Onmousemove鼠标进入某个元素并且不断移动事件相应，触发一次Onmousemove 鼠标在该元素上移动，事件就响应（一次）
Onchange 当某一元素A被此事件绑定时，只要其内容改变，其它事件B触发时，A的Onchange事件就被先触发
Onkeypress 键盘上的键被按住着不放期间事件一直被响应
Onselect 元素里面的内容被选中时，事件被相应。

js的event详解

js的event详解event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

event对象只在事件发生的过程中才有效。

event的某些属性只对特定的事件有意义。

比如，fromElement 和toElement 属性只对onmouseover 和onmouseout 事件有意义。

例子下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。

code<HTML><HEAD><TITLE>Cancels Links</TITLE><SCRIPT LANGUAGE="JScript">function cancelLink() {if (window.event.srcElement.tagName == "A" && window.event.shiftKey)window.event.returnValue = false;}</SCRIPT><BODY onclick="cancelLink()">下面的例子在状态栏上显示鼠标的当前位置。

code<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">属性：altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX,screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y1.altKey描述：检查alt键的状态。

JavaScript事件对象event用法分析

JavaScript事件对象event⽤法分析本⽂实例讲述了JavaScript事件对象event⽤法。

分享给⼤家供⼤家参考，具体如下：前⾯的⽂章已经介绍了。

下⾯继续介绍JavaScript的事件对象event。

事件对象event包含导致事件的元素、事件的类型以及其他与特定事件相关的信息。

1、DOM中的事件对象属性/⽅法类型说明bubbles Boolean表明事件是否冒泡cancelabel Boolean表明是否可以取消事件的默认⾏为currentTarget Element事件处理程序当前正在处理事件的那个元素（监听事件的那个元素）defaultPrevented Boolean true表⽰已经调⽤了preventDefault()detail Integer与事件相关的细节信息eventPhase Integer调⽤事件处理程序的阶段：1表⽰捕获阶段，2表⽰处于⽬标，3表⽰冒泡阶段preventDefault()Function取消事件的默认⾏为，cancelable为true才可使⽤此⽅法stopImmediatePropagation()Function取消事件的捕获或冒泡，同时阻⽌任何事件处理程序被调⽤stopPropagation()Function取消事件的捕获或冒泡，bubbles为true才可使⽤此⽅法target Element事件的⽬标trusted Boolean true表⽰事件是浏览器⽣成的，false表⽰事件是由开发⼈员通过JavaScript创建的type String事件的类型view AbstractView与事件关联的抽象视图，等同于发⽣事件的window对象若直接将事件处理程序指定给了⽬标元素，则this，currentTarget和target包含相同的值；若事件处理程序存在于按钮的⽗节点中，则this和currentTarget等于⽗节点，⽽target等于按钮元素。

JavaScript Event

JavaScript Event学习第一章：Event 介绍Events是每一个JavaScript程序核心。

什么是事件处理，它有什么问题和怎样写出跨浏览器的代码，我将在这一章做一个概述。

我也会提供一些有精彩的关于事件处理程序的细节的文章。

没有event就没有脚本。

可以看看任何有JavaScript代码的网页：几乎所有的例子都有一个事件触发了脚本。

原因非常简单。

JavaScript就是给你的页面添加内部活动：用户做一些事情然后页面做出回应。

因此JavaScript就需要一个方法能够检测到用户的动作然后才能知道什么时候做出反应。

这还需要知道那个函数会被执行，函数会做一些你认为的给你的网页增色的动作。

这些文字描述了如何去写这样的脚本。

虽然不容易，但是这是一个很让人满足的工作。

当用户做了什么事情event就发生了，当然还有一些event不会直接被用户触发：比如load 事件会在页面装载完毕的时候触发。

JavaScript能够检测一些event。

从Netscape 2开始，在HTML元素上添加event hanlder 就成为可能。

这些事件处理函数等待一个确定的事件，比如点击一个链接。

当他发生的时候，事件就会通过你指定的JavaScript代码来执行。

当用户做出动作他就引发了一个事件。

当你的代码让页面对这个动作做出回应，交互就产生了。

事件处理程序的历史如上所述，没有事件处理程序就没有在页面添加JavaScript的必要。

那些能对用户动作做出反应的就是最好的脚本。

因此，当Netscape发布他的第二版支持JavaScript的浏览器的时候，他同时也支持event。

Netscape模式Netscape只支持一小部分事件。

Mouseover和mouseout的快速流行时因为当鼠标滑入时改变图片而滑出时又返回到原来的状态这个很炫的效果。

而且可以看到用户是否提交了表单或者重置了表单，这样在客户端的验证也就成为了可能。

js事件定义方式和获取事件对象event总结

js事件定义⽅式和获取事件对象event总结js中事件的定义⽅式有3种：标签内事件属性，dom元素事件属性和 dom元素添加事件的⽅法。

1.标签内事件属性：//事件处理函数内this 指向事件源元素<div id="adiv" onclick="alert(event.type);">a div</div>标签内事件属性其实是⼀个匿名函数，在ie中等价于 $('adiv').onclick=function(){alert(event.type);} 在FF中等价于 $('adiv').onclick=function(event){.....}因为在ie中 event对象是在事件发⽣时创建的，作为window对象的属性存在，全局范围内可访问；在FF中 event对象是作为事件处理函数的第⼀个参数传⼊的，函数体内可⽤ event或arguments[0]引⽤2.dom元素事件属性: //事件处理函数内this 指向事件源元素$("adiv").onclick=function(){alert(event.type);}; //ie only. 在ie中 event对象是在事件发⽣时创建的，作为window对象的属性存在，全局范围内可访问$("adiv")['onclick']=function(){alert(event.type);};$('adiv').onclick=function(e){alert(e.type);}; //ff, 事件处理函数的第⼀个参数就是event对象，参数名称可⾃定义如 e, ev event....$('adiv')['onclick']=function(e){alert(e.type);};3.dom元素的事件相关⽅法 //事件处理函数内this不指向事件源元素，需要⽤ event.srcElement 或 event.target引⽤$('adiv').attachEvent('onclick',function(){alert(event.type);}); // ie only$('adiv').addEventListener('click',function(e){alert(e.type);},false); // FF。

JavaScriptevent对象：当前事件

JavaScriptevent对象：当前事件event 对象是JavaScript 中一个非常重要的对象，用来表示当前事件。

event 对象的属性和方法包含了当前事件的状态。

当前事件，是指正在发生的事件；状态，是与事件有关的性质，如引发事件的DOM元素、鼠标的状态、按下的键等等。

event 对象只在事件发生的过程中才有效。

获取event对象在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于IE8.0 及其以下版本，event 对象必须作为window 对象的一个属性。

◆在遵循 W3C 规范的浏览器中，event 对象通过事件处理函数的参数传入。

语法：elementObject.OnXXX=function(e){var eve=e; // 声明一个变量来接收 event 对象}上面绑定的事件处理函数中，参数 e 用来传入 event 对象，变量eve 则表示当前事件。

这个过程是 JavaScript 自动完成的。

例如，要获取发生事件时鼠标的坐标，可以这样写：1.<div id="demo">在这里单击</div>2.<script type="text/javascript">3.document.getElementById("demo").onclick=function(e){4.var eve=e;5.var x=eve.x; // X坐标6.var y=eve.y; // Y坐标7.alert("X坐标："+x+"\nY坐标："+y);8.}9.</script>请看下面的演示：在这里单击（Chrome、FireFox、Opera、Safari、IE9.0及其以上版本）◆ 对于 IE8.0 及其以下版本，event 必须作为 window 对象的一个属性。

onclick event对象参数

onclick event对象参数onclick event对象参数是指在HTML中使用JavaScript编写的点击事件处理函数中，可以通过传入一个event对象参数来获取关于该点击事件的详细信息。

这个参数中包含了一些属性和方法，可以用来获取鼠标点击的位置、触发事件的元素、事件类型等信息。

下面将详细介绍一下onclick event对象参数的使用和相关知识。

一、获取点击事件的位置1. 通过event对象的clientX和clientY属性可以获取鼠标点击的相对于浏览器窗口的水平和垂直坐标。

这对于一些需要根据鼠标位置进行操作的场景非常有用，比如制作拖拽功能、绘制图形等。

2. 通过event对象的pageX和pageY属性可以获取鼠标点击的相对于整个网页文档的水平和垂直坐标。

这对于一些需要根据鼠标位置进行具体定位的场景非常有用，比如制作鼠标跟随效果、实现点击弹窗等。

3. 通过event对象的screenX和screenY属性可以获取鼠标点击的相对于用户屏幕的水平和垂直坐标。

这对于一些需要根据鼠标位置进行全局操作的场景非常有用，比如制作屏幕截图工具、实现鼠标放大镜效果等。

二、获取触发事件的元素1. 通过event对象的target属性可以获取触发点击事件的元素。

这对于一些需要根据不同的元素进行不同操作的场景非常有用，比如实现列表的展开和收起、制作图片轮播效果等。

2. 通过event对象的currentTarget属性可以获取当前绑定点击事件的元素。

这对于一些需要在多个元素上绑定相同点击事件的场景非常有用，比如实现菜单的弹出和收起、制作选项卡切换效果等。

三、获取事件类型通过event对象的type属性可以获取当前触发的事件类型。

在点击事件中，该属性的值为"click"。

这对于一些需要根据不同的事件类型进行不同操作的场景非常有用，比如实现鼠标按下和松开的效果、制作双击事件等。

onclick event对象参数可以通过获取鼠标点击的位置、触发事件的元素、事件类型等信息，实现一些有趣和实用的功能。

javascriptevent（事件对象）详解

javascriptevent（事件对象）详解1. 事件对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

•什么时候会产生Event 对象呢?o例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.•事件通常与函数结合使用，函数不会在事件发生前被执行！2. 事件流2.1 事件流发展史•事件发展史,这位大神已经写好了,想去偷瞄两眼的请点击这里2.2 冒泡•什么是事件冒泡,o官方的定义就是从最特定的事件目标到最不特定的事件目标意思就是说,假如用户单击了一个元素,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡2.3 捕获•什么是事件捕获事件捕获和事件是相反的,也就是说,当用户触发了一个事件的时候,这个事件是从DOM树的最上层开始触发一直到捕获到事件源.2.4 事件流•它的由来由于微软和网景乱搞,后来必须要为事件传播机制,制定一个标准,因为事件捕获是网景公司开发出来的,而事件冒泡是由微软公司开发出来的,它们都想要自己的技术成为标准,所以导致这两个公司老是干架,制定标准的人为了不让它们干架,所以研发了事件流.2.5 事件流的写法以及实现方式•标准实现方式使用关键词addEventListener,假如你想要给某一个元素添加事件,现在就可以这样写element.addEventListener(eventType, fn, false)o dom对象.addEventListener(事件类型, 回调函数, 事件机制)这里的事件类型表示你要使用哪种事件类型比如click, 回调函数里面写着触发此事件你要做什么事情, 事件机制分为冒泡和捕获,如果为false表示事件冒泡,为true表示事件捕获•既然有标准的实现方式,那么肯定也存在着不和谐的写法,没办法谁让人家牛逼呢,俗话说的好啊两虎之争必有一伤,可伤了我们程序员了.这种不和谐的写法是o dom对象.attachEvent(eventType, fn)第一个参数表示事件类型,第二个是回调.这种写法兼容IE, IE没有实现事件捕获,因为在当时他比较厉害,以为没必要…………只是,,,,省略一千字, 现在微软的浏览器已经做得很好了… 只是调侃一下无其他意图..•以上的两种写法一种是兼容W3C标准的一种是老版IE的写法,怎么写兼容性写法呢?下面是注册事件和删除事件的Code// 注册时间if(dom.addEventListener) {dom.addEventListener(eventType, fn);} else {if(dom.attachEvent) {dom.attachEvent('on' + eventType, fn);}}// 下面是删除事件if(dom.removeEventListener) {dom.removeEventListener(eventType, fn, false);} else {if(dom.detachEvent) {dom.detachEvent("on" + eventType, fn)}}•冒泡和捕获的一个小demo<!DOCTYPE html><html><head><meta charset="utf-8"><title>bubble event</title><style type="text/css">body{margin:0;}#one{width:500px;height:500px; background:rgb(255,0,0); border: 1px solid transparent; }#two{width:400px;height:400px;margin: 0 auto;margin-top: 50px; background:rgb(255,50,50); border: 1px solid transparent; }#three{width:300px;height:300px;margin: 0 auto;margin-top: 50px; background:rgb(255,100,100); border: 1px solid transparent; }#four{width:200px;height:200px;margin: 0 auto;margin-top: 50px; background:rgb(255,150,150); }</style></head><body><div id='one'><div id='two'><div id='three'><div id='four'></div></div></div></div><script>var one = document.getElementById('one');var two = document.getElementById('two');var three = document.getElementById('three');var four = document.getElementById('four');var useCapture = false; //false为冒泡获取【目标元素先触发】true为捕获获取【父级元素先触发】one.addEventListener('click', function(event) {event || (event = window.event);console.log(event);console.log('one');}, useCapture);two.addEventListener('click', function() {console.log('two');}, useCapture);three.addEventListener('click', function() {console.log('three');}, useCapture);four.addEventListener('click', function() {console.log('four');}, useCapture);/*false冒泡点击four div输出结果：four three two onetrue捕获点击four div输出结果： one two three four*/</script></body></html>注意: 不管是微软的写法还是标准的写法,都支持给一个事件绑定多个函数.并且支持动态的添加和删除事件3. 关于event对象•在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到(IE暂且不谈),或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止.以下是event对象的一些属性和方法属性描述altKey 返回当事件被触发时，”ALT” 是否被按下。

js中的触发事件对象event.srcElement与event.target详解

js中的触发事件对象event.srcElement与event.target详解介绍IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作⽤是相当的，即：firefox 下的event.target = IE 下的 event.srcElement解决⽅法使⽤obj = event.srcElement ? event.srcElement : event.target;或：var evtTarget = event.target || event.srcElement;event.srcElement.idevent.srcElement.tagnameevent.srcElement.typeevent.srcElement.valueevent.srcElement.classnameevent.srcElement.parentelementevent.srcElement.getattributeevent.srcElement.childrenstChildevent.srcElement.ChildNodeevent.srcElement.selectedIndexjs将html的所有控件都看成是⼀个个对象，通过js的各个属性，就能对其进⾏操作处理，js⾥对象的整体结构是树形的结构。

⼀层⼀层的追溯，即可获取需要的结果。

event.srcElement：表⽰的当前的这个事件源。

event.srcElement.parentNode：表⽰当前事件源的⽗节点。

parentNode：⽗节点，也就是上⼀层的节点。

可以是任何⼀个标签。

event.srcElement.firstChild：当前事件的第⼀个节点，如果节点是input，通过event.srcElement.firstChild.value就可以获取此input的值。

js event的使用

JavaScript 中的事件处理
在JavaScript 中，事件处理是处理用户与网页交互的一种重要方式。

当用户与网页进行交互时，如点击按钮、输入文本、移动鼠标等，都会触发相应的事件。

JavaScript 可以监听这些事件，并在事件发生时执行相应的代码。

事件的使用可以分为以下几个步骤：
1.添加事件监听器
要监听某个事件，需要使用事件监听器来绑定事件和事件处理函数。

例如，要监听一个按钮的点击事件，可以使用以下代码：
其中，document.getElementById("myButton") 用于获取页面中ID
为 myButton 的元素，addEventListener 方法用于添加事件监听器，第一个参数为事件的名称（如 click、mouseover 等），第二个参数为事件处理函数。

2.编写事件处理代码
在事件处理函数中，可以编写处理事件的代码。

例如，在上面的例子中，当按钮被点击时，可以执行一些操作，如弹出提示框：
3.移除事件监听器
有时候，我们可能需要在某个时间点移除事件监听器，以避免不必要的处理。

可以使用 removeEventListener 方法来移除事件监听器：
注意，如果要移除的事件处理函数与添加时使用的函数不是同一个对象（即使内容相同），则移除操作不会生效。

因此，如果要移除之前添加的事件监听器，需要使用相同的函数对象作为参数。

七十二：JavaScript之JS事件之event对象属性与方法

七⼗⼆：JavaScript之JS事件之event对象属性与⽅法1.type：事件类型根据事件类型，执⾏不同的js代码<body><button id="btn">点击按钮</button><script>var btn = document.getElementById('btn');var func = function (event){console.log(event.type == 'click' ? '点击事件被触发了': event.type == 'mouseout' ? '⿏标移除事件被触发了': '未知事件')};btn.addEventListener('click', func);btn.addEventListener('mouseout', func);</script></body>2.target和currentTargettarget：事件源，点击的哪个元素，target就是哪个元素currentTarget：事件执⾏的元素，事件绑定在哪个元素上⾯，就指向哪个元素<div id="parent"><div id="child">点击⼦元素</div></div><script>var parent = document.getElementById('parent');parent.addEventListener('click', function (event){console.log('event.target: ', event.target);console.log('event.currentTarget: ', event.currentTarget);});</script>3.preventDefault：阻⽌默认⾏为4.stopPropagation：阻⽌事件冒泡或者捕获<div id="parent"><div id="child">点击⼦元素</div></div><script>var parent = document.getElementById('parent');var child = document.getElementById('child');parent.addEventListener('click', function (event){console.log('parent');}); child.addEventListener('click', function (event){console.log('child');event.stopPropagation(); // 阻⽌冒泡，不再执⾏⽗元素的事件});</script>5.client、page、screenclientY：指浏览器顶部底边到点击时⿏标的位置，不包含滚动轴的距离pageY：指浏览器顶部底边到点击时⿏标的位置，包含滚动轴的距离screenY：指屏幕顶部底边到点击时⿏标的位置（不会根据浏览器窗⼝缩放改变）X轴与Y轴同理可获得<style>#box{height: 1000px; background: limegreen;}</style></head><body><div id="box"></div><script>var box = document.getElementById('box');box.addEventListener('click', function (event){console.log(`clientY:${event.clientY};pageY:${event.pageY};screenY:${event.screenY};`) });</script>。

js事件（Event）知识整理

js事件（Event）知识整理⿏标移动到⽬标元素上的那⼀刻，⾸先触发mouseover之后如果光标继续在元素上移动，则不断触发mousemove如果按下⿏标上的设备(左键,右键,滚轮……)，则触发mousedown当设备弹起的时候触发mouseup⽬标元素的滚动条发⽣移动时(滚动滚轮/拖动滚动条。

)触发scroll滚动滚轮触发mousewheel，这个要区别于scroll⿏标移出元素的那⼀刻，触发mouseout平常我们绑定事件的时候⽤dom.onxxxx=function(){}的形式这种⽅式是给元素的onxxxx属性赋值，只能绑定有⼀个处理句柄。

但很多时候我们需要绑定多个处理句柄到⼀个事件上，⽽且还可能要动态的增删某个处理句柄下⾯的事件注册⽅式就能解决这个需求。

复制代码代码如下://IE以外target.addEventListener(type,listener,useCapture)target.removeEventListener(type,listener,useCapture);target ：⽂档节点、document、window 或 XMLHttpRequest。

type ：字符串，事件名称，不含“on”，⽐如“click”、“mouseover”、“keydown”等。

listener ：实现了 EventListener 接⼝或者是 JavaScript 中的函数。

useCapture ：是否使⽤捕捉，⼀般⽤ false。

//IEtarget.attachEvent(type, listener);target.detachEvent(type, listener);target ：⽂档节点、document、window 或 XMLHttpRequest。

type ：字符串，事件名称，含“on”，⽐如“onclick”、“onmouseover”、“onkeydown”等。