首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

深入理解 DOM 事件机制

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(

2.8K50

javascript 事件基础

三、事件对象 在触发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,在那里事件才得到了处理

95150
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    记录一些前端面试题

    写一段脚本,实现:当页面上任意一个链接被点击的时候,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

    64820

    DOM事件基本概念大总结(前端必备)

    否则代码在 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

    1.9K20

    javascript事件详解

    简单的添加与删除事件 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

    1.4K50

    js 事件笔记

    ) 2.2绑定的过程: 选中元素,选中事件处理程序属性如onclick,给属性赋值一个处理函数。...在事件处理程序内部,this始终等同于currentTarget,currentTarget为绑定事件的元素,而target是为触发事件的实际目标。...当存在嵌套的时候,两者不一样,具体详情可以见这篇文章链接描述,或者中文版event.target 和 event.currentTarget。...我这里不做赘述 2.5stopPropagation() 阻止事件在 DOM 中继续传播,防止再触发定义在别的节点上的监听函数,但是不包括在当前节点上其他的事件监听函数。...1、事件代理的原理: 利用事件模型的传播性质,将子元素的监听函数绑定到父元素上,通过事件传播去执行监听函数。

    11.1K21

    13事件

    为默认值,表示冒泡阶段 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

    76930

    一篇文章搞懂前端事件监听

    ("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) }) // 常见的方法 //

    1K10

    事件委托

    事件委托就是把事件监听放在祖先元素(如父元素、爷爷元素)上。 由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。...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事件。

    88520

    一看就晕的React事件机制

    ,首先生成合成事件,注意同一种事件类型只能生成一个合成事件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元素。

    1.8K80

    JavaScript 事件机制

    target 就是触发事件的具体对象,这时注册在 target 上的事件监听器处于目标阶段。 最后,事件再往上从 target 一路逆向传递到根节点,若注册了事件监听器,则监听器处于冒泡阶段。...注册事件 通常我们使用 addEventListener 注册事件,该函数有一个 useCapture 参数,该参数接收一个布尔值,默认值为 false ,代表注册事件为冒泡事件。...target 和 currentTarget 在了解上述的事件传递的三个阶段后,我们来梳理事件对象中容易混淆的两个属性:target 和 currentTarget 。...currentTarget 是绑定事件的对象。...很多人会将 e.stioPropagation 和 e.preventDefault 混淆,事实上,e.preventDefault 与事件传递没有任何关系,并不会影响事件的向下或向上传播。

    86030
    领券