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元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
