3.DOM3 级事件 在DOM 2级事件的基础上添加了更多的事件类型。...UI事件,当用户与页面上的元素交互时触发,如:load、scroll 焦点事件,当元素获得或失去焦点时触发,如:blur、focus 鼠标事件,当用户通过鼠标在页面执行操作时触发如:dblclick、mouseup...滚轮事件,当使用鼠标滚轮或类似设备时触发,如:mousewheel 文本事件,当在文档中输入文本时触发,如:textInput 键盘事件,当用户通过键盘在页面上执行操作时触发,如:keydown、keypress...2.如何实现 接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上: // 给父层元素绑定事件 document.getElementById('list').addEventListener...:' + e.currentTarget.id ) }) document.getElementById('d').addEventListener('click', function(
三、事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息;包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。...里面有一些重要常用的属性及方法,如: type属性:用于获取事件类型 target属性:用于获取事件目标 stopPropagation方法:用于阻止事件冒泡 e.preventDefault()方法:...阻止事件的默认行为 (如a标签的跳转) var btn = document.getElementById("btn"); btn.onclick = function(e){ console.log...等同于发生事件的 window对象 理解currentTarget与target 在事件处理程序内部,this始终等于currentTarget值,即currentTarget是指当前被触发或者说正在处理事件的那个元素...currentTarget就是指被点击的那个元素,但是target是当前点击的目标元素, 如上代码,由于btn上并没有注册事件,结果click事件就冒泡到了document.body,在那里事件才得到了处理
("click", (event) => { alert("我是 p 元素上被绑定的第一个监听函数"); }, false); p.addEventListener("click",...方法,阻止click事件冒泡,并且阻止p元素上绑定的其他 click 事件的事件监听函数的执行. }, false); p.addEventListener("click", (event)...target 与 currentTarget target 属性指向的是事件目标,而 currentTarget 属性指向的是正在处理当前事件的对象,它总是指向事件绑定的元素。...例如: div.addEventListener('click', (e) => { console.log(e.target, e.currentTarget); },false); e.target...而 e.currentTarget 总是指向 div 元素。
写一段脚本,实现:当页面上任意一个链接被点击的时候,alert出这个链接在页面上的顺序号,如第一个链接则alert(1),依次类推。...return str; } console.log("laoxie".repeatify(4)) 完成一个函数,接受数组作为参数,数组元素为整数或者数组,数组元素包含整数或数组,函数返回扁平化后的数组,如:...} } } getNewArr(arr) 假设现有一篇文章 var content = “…大量文字”,文章触及到一些敏感词[“wscat”,“yao”,“eno”,“6.1”]等,如何在文章中发现这些敏感词...) }); document.body.addEventListener("click", function displayDate1(e) {...console.log('body注册点击事件'); console.log("e.currentTarget", e.currentTarget); console.log
像axios和jQuery等库就是在xhr上的封装,而有些情况也可能会使用原生的fetch,因此对这两种情况都要进行捕获。...使用true或false都可以,默认为false 2、资源加载错误使用addEventListener去监听error事件捕获 实现原理:当一项资源(如或)加载失败,加载资源的元素会触发一个...Event接口的error事件,并执行该元素上的onerror()处理函数。...&& event.currentTarget.status !...// event.currentTarget.status // event.currentTarget.statusText }
像axios和jQuery等库就是在xhr上的封装,而有些情况也可能会使用原生的fetch,因此对这两种情况都要进行捕获。 e.g: 下图是xhr请求接口返回400时捕获后的上报数据: ?...使用true或false都可以,默认为false (滑动查看) 2、资源加载错误使用addEventListener去监听error事件捕获 实现原理:当一项资源(如或)加载失败...,加载资源的元素会触发一个Event接口的error事件,并执行该元素上的onerror()处理函数。...&& event.currentTarget.status !...// event.currentTarget.status // event.currentTarget.statusText }
否则代码在 IE 上可能出问题 const EventHandle = { addEvent: (element, type, fn) => { if(element.addEventListener...但有两种情况需要注意 通过直接在 html 元素上添加的事件,必须写明参数为 event,响应执行函数也要写明该参数 通过 addEventListener() 添加的事件,只需要在执行函数上写明参数就行...currentTarget:输出为 div;因为该执行函数就绑定在该元素上 情况三:点击 div;只触发 father() target 和 currentTarget 都为 div 另外,执行函数中的...this 值指向 currentTarget;但是有个前提,this值要等于 currentTarget,那么必须是在target上或者事件是通过 sddEventListener 添加的。...但是这两个方法下的 event 对象的使用有区别,特别是在 IE 浏览器上 在 window对象下触发整个页面的加载; window.addEventListener('load', function
this指向永远和currentTarget指向一致(只考虑this的普通函数调用)。...if(window.attachEvent){ obj.attachEvent("on" + ev, handler); }else if(window.addEventListener...){ obj.addEventListener(ev, handler, false); } } function test(e...){ alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName...事件流:捕获(自顶而下)——目标阶段——冒泡(自下而顶) 在事件处理程序内部,对象this始终等于currentTarget的值(换个角度理解,DOM上的方法this指向都为该DOM-方法调用模式),而
简单的添加与删除事件 obj.onclick=function(){} obj.onclick=null; 通用事件添加的删除 obj.addEventListener(),obj.attachEvent...与target 在事件处理程序内部,this始终等于currentTarget值,即currentTarget是指当前被触发或者说正在处理事件的那个元素,而target是指当前的目标元素;比如如下代码,...currentTarget就是指被点击的那个元素,但是target是当前点击的目标元素,如上代码,由于btn上并没有注册事件,结果click事件就冒泡到了document.body,在那里事件才得到了处理...window.event console.log(window.event); console.log(window.event.type); // 'click' } 上面的写法是在DOM0级上注册事件...,如果我们在Dom2级上注册事件的话,那么就会有一个事件对象event作为参数传入事件到函数中,如下: var btn = document.getElementById("btn"); EventUtil.addHandler
后来ECMAScript在DOM2中对事件流进行了进一步规范,基本上就是上述二者的结合。...DOM2级事件规定的事件流包括三个阶段: + 事件捕获阶段 + 处于目标阶段 + 事件冒泡阶段 注意:warning::先捕获后冒泡,但是在目标节点上谁写在前面谁先执行。...如: var div = document.getElementById("myDiv"); EventUtil.addEventHandler(div,"myEvent", function ()...而event.detail的值被设置成了一个简单的字符串,然后在div和document上侦听该事件,因为在initCustomEvent中设置了事件冒泡。...console.log(ev.target.innerHTML) }) 复制代码 target和currentTarget区别: target返回触发事件的元素,不一定是绑定事件的元素 currentTarget
) 2.2绑定的过程: 选中元素,选中事件处理程序属性如onclick,给属性赋值一个处理函数。...在事件处理程序内部,this始终等同于currentTarget,currentTarget为绑定事件的元素,而target是为触发事件的实际目标。...当存在嵌套的时候,两者不一样,具体详情可以见这篇文章链接描述,或者中文版event.target 和 event.currentTarget。...我这里不做赘述 2.5stopPropagation() 阻止事件在 DOM 中继续传播,防止再触发定义在别的节点上的监听函数,但是不包括在当前节点上其他的事件监听函数。...1、事件代理的原理: 利用事件模型的传播性质,将子元素的监听函数绑定到父元素上,通过事件传播去执行监听函数。
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中,会包含鼠标的位置信息。...属性/方法 类型 读/写 说明 bubbles Boolean 只读 事件是否冒泡 cancelable Boolean 只读 是否可以取消事件的默认行为 currentTarget Element 只读...3 console.log(event.currentTarget==this);//true 4 },false); 上面的代码中说明currentTarget...1 aa.addEventListener("click",function(event){ 2 //console.log(event.target==this);//...true 3 //console.log(event.currentTarget==this);//true 4 console.log(
在as中给事件监听器的调用函数传递参数可以使用匿名函数,如下: moveUp.addEventListener(MouseEvent.CLICK, function (event:MouseEvent...exportSelected.x, exportSelected.y)); Alert.show("(" + p.x + "," + p.y +")"); 10. flex中的拖拽,分几步: 1) 在源组件上定义...ds.addData(dragInitiator, "myRule"); DragManager.doDrag(dragInitiator, ds, event); } 2) 在目标组件上定义...).addElement(dragObject); } 这样就可以在本身不带拖拽功能的组件上实现拖拽了。...); b.addEventListener(DragEvent.DRAG_DROP, dragDropHandler); c.addEventListener(DragEvent.DRAG_ENTER
为默认值,表示冒泡阶段 Even事件对象 为HTML页面中的元素注册事件时,事件的处理函数具体一个参数,该参数就是 Event事件对象Event事件对象中包含了该事件的信息,以及该事件发生在哪个元素上...liElement.onclick = function (event) { /* target属性:触发当前事件的目标元素 currentTarget...属性:绑定当前事件的目标元素 this:与currentTarget属性一致 */ console.log(event.target, event.currentTarget..., this) } 属性或方法 描述 target 表示触发当前事件的HTML元素 currentTarget 表示注册当前事件的HTML元素 srcElement E8及之前版本浏览器支持,表示触发当前事件的...表示阻止当前事件的冒泡行为 preventDefault 表示取消当前事件的默认行为 stopPropagation 表示阻止当前事件的冒泡行为 获取目标元素 target 用于获取触发当前事件的HTML元素 currentTarget
在这个基础上,我们实现下面的功能: a.body添加 click 事件监听,当body捕获到event事件时,打印出事件发生的时间和 触发事件的节点信息: currentTarget) { alert("您好,我是第二层div。")...== event.currentTarget) { alert("您好,我是span。")...比如,如果span 元素的处理函数没有执行冒泡终止,则事件会传到div2 上,这样会造成div2 的提示信息; 方法二缺点:方法二为每一个元素都增加了事件监听处理函数,事件的处理逻辑都很相似,即都有判断...if(event.target == event.currentTarget),这样存在了很大的代码冗余,现在是三个元素还好,当有10几个,上百个又该怎么办呢?
(btnEvent1.EVENT_NAME,appCatchMyEvent,true); this.panel1.addEventListener(btnEvent1.EVENT_NAME...private function appCatchMyEvent(par_event:btnEvent1):void{ label1.text += par_event.currentTarget.id...+par_event.EventData;//currentTarget是传播路径上的当前捕捉者 } private function panelCatchEvent...(par_event:btnEvent1):void{ label1.text += par_event.currentTarget.id+par_event.EventData...(btnEvent1.EVENT_NAME,panelCatchEvent,true);//非冒泡监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME
("div元素被点击5") }) divEl.addEventListener("click", () => { console.log("div元素被点击6") }) 认识事件流的由来 事实上对于事件有一个概念叫做事件流...我们可以想到一个问题:当我们在浏览器上对着一个元素点击时,你点击的不仅仅是这个元素本身; 这是因为我们的HTML元素是存在父子元素叠加层级的; 比如一个span元素是放在div元素上的,div元素是放在...body元素上的,body元素是放在html元素上的; 代码演示 我是span元素<span...那么这些信息会被封装到一个Event对象中; 该对象给我们提供了想要的一些属性,以及可以通过该对象进行某些操作; 常见的属性: type:事件的类型; target:当前事件发生的元素; currentTarget...("click", (event) => { console.log("div元素被点击:", event.target, event.currentTarget) }) // 常见的方法 //
事件委托就是把事件监听放在祖先元素(如父元素、爷爷元素)上。 由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。...dianwo dianwo dianwo let ul=document.querySelector('ul') ul.addEventListener...('click',function(e){ e.target.style.color='pink' //e.target 得到点击的那个对象 }) target 与 currentTarget...的区别: e.target: 用户操作的元素 e.currentTarget: 程序员监听的元素 比如上例中,e.target 就是 li ,e.currentTarget 就是 ul 以上代码中,并没有给每一个元素绑定事件...不用在新添加的li上绑定click事件。 当删除某个li时,不用移解绑上面的click事件。
,首先生成合成事件,注意同一种事件类型只能生成一个合成事件Event,如onclick这个类型的事件,dom上所有带有通过jsx绑定的onClick的回调函数都会按顺序(冒泡或者捕获)会放到Event....还是使用上次的栗子: class ExampleApplication extends React.Component { componentDidMount() { document.addEventListener...) { target.addEventListener(eventType, callback, false); return { remove: function...上 event.currentTarget = EventPluginUtils.getNodeFromInstance(inst); if (simulated) { ReactErrorUtils.invokeGuardedCallbackWithCatch...= null; } 上面这个函数最重要的功能就是将事件对应的dom元素绑定到了currentTarget上, 这样我们通过e.currentTarget就可以找到绑定事件的原生dom元素。
target 就是触发事件的具体对象,这时注册在 target 上的事件监听器处于目标阶段。 最后,事件再往上从 target 一路逆向传递到根节点,若注册了事件监听器,则监听器处于冒泡阶段。...注册事件 通常我们使用 addEventListener 注册事件,该函数有一个 useCapture 参数,该参数接收一个布尔值,默认值为 false ,代表注册事件为冒泡事件。...target 和 currentTarget 在了解上述的事件传递的三个阶段后,我们来梳理事件对象中容易混淆的两个属性:target 和 currentTarget 。...currentTarget 是绑定事件的对象。...很多人会将 e.stioPropagation 和 e.preventDefault 混淆,事实上,e.preventDefault 与事件传递没有任何关系,并不会影响事件的向下或向上传播。
领取专属 10元无门槛券
手把手带您无忧上云