可以使用$.parser.parse();这个方法进行处理; 例如: $.parser.parse(); 表示对整个页面重新渲染,渲染完就可以看到easyui原来的样式了; var targetObj...input name='mydate' class='easyui-datebox'>").appendTo("#id"); $.parser.parse(targetObj); 表示重新渲染某个特定的组件
DOM中的事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件相关的信息,包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。...IE中的事件对象 在使用DOM0级方法添加事件时,event对象可以作为window对象的一个属性存在,使用attachEvent添加事件处理程序的时候,event对象会作为参数传入事件处理函数中 dom.onclick...UI事件 load 当页面完全加载后再window上触发,当所有框架加载完毕时在框架集上触发,当图像加载完毕时在img元素上触发,当嵌入的内容加载完时在触发 unload...>)中的一个或多个字符时 resize 当浏览器窗口被调整到一个新的高度或者宽度时,会触发 scroll 当用户滚动带滚动条的元素中的内容时,在该元素上触发resize,scroll会在变化期间重复被激发...任意鼠标按钮按下时触发 mouseup 释放鼠标按钮触发 mousemove 鼠标在元素内部移动的时候重发触发 mousewheel 滚轮事件 mouseover 鼠标位于元素外部,将其首次移入另一个元素边界之内时触发
; }); 上面的代码演示了如何使用addEventListener方法为一个按钮元素添加点击事件的监听器。当用户点击按钮时,会触发click事件,弹出一个警告框。...鼠标移动事件(mousemove) 鼠标移动事件在用户的鼠标光标在元素上移动时触发。您可以使用鼠标移动事件创建各种效果,如鼠标悬停效果和拖拽功能。...事件处理程序 事件处理程序是JavaScript函数,它们在特定事件发生时执行。事件处理程序通常通过addEventListener方法将其附加到DOM元素上,以便在事件触发时执行。...要从DOM元素中删除事件处理程序,可以使用removeEventListener方法,传递与添加事件处理程序时相同的事件类型和处理程序函数。...事件委托 事件委托是一种常见的优化技巧,可以减少添加事件处理程序的数量,特别是在处理大量相似元素的情况下。它利用事件冒泡原理,将事件处理程序附加到共同的祖先元素上,以便在事件发生时代理到子元素。
下面简要介绍了事件流的发展历程: 1.1 传统的DOM0级事件 在早期的JavaScript中,事件处理是通过在DOM元素上直接定义事件处理属性来实现的,称为DOM0级事件。...('按钮被点击'); }); 通过addEventListener方法,可以在一个元素上同时添加多个处理程序,而且可以使用removeEventListener方法移除指定的处理程序。...在事件捕获阶段,可以使用addEventListener的第三个参数指定事件处理程序在捕获阶段中执行。...通过在目标元素上注册事件处理程序,可以捕获和处理用户触发的事件,实现交互功能。 例如,通过在按钮上注册click事件处理程序,可以 在按钮被点击时执行相应的代码逻辑。...它利用事件冒泡机制,在父元素上注册一个事件处理程序,处理多个子元素的相同事件。 例如,可以在父元素上注册click事件处理程序,根据触发事件的子元素的不同类别执行不同的操作。
DOM0 事件绑定,给元素的事件行为绑定方法,这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。...3.DOM3 级事件 在DOM 2级事件的基础上添加了更多的事件类型。...UI事件,当用户与页面上的元素交互时触发,如:load、scroll 焦点事件,当元素获得或失去焦点时触发,如:blur、focus 鼠标事件,当用户通过鼠标在页面执行操作时触发如:dblclick、mouseup...2.如何实现 接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上: // 给父层元素绑定事件 document.getElementById('list').addEventListener...我们在例4的inner元素click事件上,添加event.stopPropagation()这句话后,就阻止了父事件的执行,最后只打印了'inner'。
("冒泡"); }, false); 使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。...IE中的事件对象 在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。...在失去焦点的元素上触发; (5)focus在获得焦点的元素上触发; (6)DOMFocusIn在获得焦点的元素上触发。...这个事件并不是DOM2级事件规范中规定的,其得到广泛应用,在DOM3中将其纳入了标准; mousedown 用户按下任意鼠标按钮时触发; mouseenter 鼠标光标从元素外部首次移动到元素范围内时触发...;这个事件不冒泡,而且在鼠标移动到后代元素上不会触发;DOM3被纳入标准; mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发;这个事件不冒泡,而且在鼠标移动到后代元素上不会触发;DOM3
(例如单击事件是 click等) functionName:注册事件的句柄 事件中的this,当使用 addeventlistener()方法为某个HTML页面元素注册事件的时候,this就指代注册事件的元素...注册事件的句柄(之前使用 addeventlistener0方法定义的) capture 设置事件是捕获阶段还是冒泡阶段。...flkc为默认值,表示冒泡阶段 Even事件对象 为HTML页面中的元素注册事件时,事件的处理函数具体一个参数,该参数就是 Event事件对象Event事件对象中包含了该事件的信息,以及该事件发生在哪个元素上...='submit'>提交按钮时,提交表单功能 输入框的输入文本内容功能 单选框或复选框的切换选项功能。...不过,事件流允许在这些HTML元素的共同父级元素注册事件。这种方式被称为事件委托 适用于新创建的元素 如果向DOM树结构中添加新的元素,那么不需要再向这个新元素注册相同事件。
你的代码在DOM元素尚未创建时尝试调用'setAttribute'方法:javascriptCopy codedocument.addEventListener('DOMContentLoaded',...在访问元素之前,确保使用适当的事件监听器等待DOM的完全加载。例如,使用DOMContentLoaded事件来确保元素已经在DOM中。...示例代码假设我们有一个网页上的表单,其中有一个输入框和一个按钮。当用户点击按钮时,我们想要获取输入框的值,并动态地将其添加到网页的内容中。...注意事项属性名称是大小写敏感的,因此请确保在使用setAttribute方法时,将属性名称指定为正确的大小写形式。一些属性具有固定的值或特殊的行为,如id和class属性。...这个错误的几种常见情况包括访问一个不存在的元素、在元素尚未加载时访问它、或者在DOM元素尚未创建时调用方法。通过检查元素是否存在和使用适当的事件监听器等待DOM加载,可以避免这个错误的发生。
eventTarger(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。...,是一个布尔值,默认是false 注:同一个元素同一个事件可以添加多个监听器(事件处理程序) 按钮 按钮 DOM事件流分为3个阶段: 捕获阶段 当前目标阶段 冒泡阶段 比如我们给一个div注册了点击事件: 事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程。...阻止事件冒泡 事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点。...事件委托也称为事件代理,在jQuery里面称为事件委派。 原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点。
事件 含义 事件是在编程时系统内发生的动作或者发生的事(比如用户再网页上单击一下按钮) 事件监听 让浏览器检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应 也称为注册事件 语法: 元素....addEventListener('事件' , 要执行的函数) 事件监听三要素 事件源:哪个dom元素被事件触发了 事件:用什么方式触发 事件调用的函数 :要做什么事 例如: // 给元素注册上事件...DOM L2:使用addEventListener注册事件 DOM L3: DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型 事件类型 1....btn.addEventListener('click', function () { // 点击时改变按钮颜色 // this是内置的,...,让当前点击的按钮高亮(添加pink类名),其他元素不能高亮(移除pink类名) let btns = document.querySelectorAll('button')
添加事件有几种方式(以click事件为例)? 在HTML中添加onclick属性,值使用JS的字符串来表示要执行的事件。...function handleClick(){ console.log("按钮被点击了"); } 给DOM元素添加onclick方法,如下 var btn...= document.getElementById("btn"); btn.onclick = function (){ console.log("按钮被点击了"); }; DOM元素使用addEventListener...比如添加click事件那么attachEvent的第一个参数是”onclick”。 addEventListener中的this指向DOM元素,而attachEvent中的this指向window。...使用事件委托,如表格中删除某一行可以把事件添加到表格上而不是td标签,然后判断那一个元素出发的,然后对特定元素做处理,这样既可以减少事件监听的数量有可以不用关系新增元素的时间。
键盘弹起' , e.key) }) 事件流 指的是事件完整执行过程中的流动路径 两个阶段:先捕获在冒泡 捕获阶段是 从父到子 冒泡阶段是 从子到父 事件冒泡 当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发...实现: 事件对象.target 可以获得真正触发事件的元素 使用tagName属性可以得到元素名(注意得到的元素名是大写) 案例:点击p元素 出现弹框 传统做法 let box = document.querySelector...直接使用null覆盖就可以实现事件的解绑 都是冒泡阶段执行的 // 需求:按钮的点击事件只能触发一次 // 解绑事件 // 解绑语法: 元素.onclick = null btn.onclick...} 事件监听注册(L2) 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获) 后面注册的事件不会覆盖前面注册的事件(同一个事件) 可以通过第三个参数去确定是在冒泡或者捕获阶段执行...给document添加 例如:监听页面DOM加载完毕 document.addEventListener('DOMContentLoaded' , function() {
在为整个窗口注册处理器之前,我们在window对象上调用了addEventListener。 这种方法也可以在 DOM 元素和一些其他类型的对象上找到。...addEventListener方法允许您添加任意数量的处理器,因此即使元素上已经存在另一个处理器,添加处理器也是安全的。...该方法有时很实用,例如,你将一个按钮放在另一个可点击元素中,但你不希望点击该按钮会激活外部元素的点击行为。 下面的示例代码将mousedown处理器注册到按钮和其外部的段落节点上。...例如,如果您在按下某个按键时向 DOM 添加按钮,并且在释放按键时再次将其删除,则可能会在按住某个按键的时间过长时,意外添加数百个按钮。 该示例查看了事件对象的key属性,来查看事件关于哪个键。...实际上,事件处理器是在进行滚动之后才触发的。 焦点事件 当元素获得焦点时,浏览器会触发其上的focus事件。当失去焦点时,元素会获得blur事件。 与前文讨论的事件不同,这两个事件不会传播。
JavaScript 事件 注册事件(绑定事件) 给元素添加事件,称为注册事件或者绑定事件。...有传统方式和方法监听方式 传统方式 利用 on 开头的事件,如 onclick, 同一个元素同一个事件只能设置一个处理函数,出现多个处理函数的话,后面的会覆盖前面的。...事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程就是 DOM 事件流。...事件冒泡:IE 最早提出,事件逐级向上传播到 DOM 最顶层节点的过程。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。...()之前会依次弹出 1、2、3、4,在按钮绑定的事件中,加上之后只会弹出 1 事件委托 事件委托也被称为事件代理,在 jQuery 里面称为事件委派。
(HTML或者XML)的标准编程接口 DOM作用: 用来修改网页内容,结构和样式 DOM树: 我们用一个图片来表示(来自B站黑马程序员Pink老师) 获得元素 DOM在我们实际开发中主要用来操作元素...: 用来获得元素,且具有逻辑性地获得元素 节点概述: 节点操作的主要操作时元素节点操作 页面内所有内容都是节点,在DOM中,节点使用node表示 HTML DOM中所有节点均可以通过JavaScript...属性节点nodeType = 2 文本节点nodeType = 3 节点层级 我们在使用节点时,通常利用DOM树把节点划分为不同的层级关系 父级节点 对象.parentNode 得到的是元素最近的父节点...,如果希望出现该节点,需要插入该节点 事件高级内容 我们在前面已经掌握了事件的基本方法,接下来我们来学习进阶内容: 注册事件概述 给元素添加事件,被称为注册事件或者绑定事件 注册事件有两种方法: 传统注册方法...// 这里表示在页面内点击时 // 注意只能用addEventListener,传统方法不能使用 document.addEventListener(
你肯定习惯于使用 addEventListener() 将事件添加到Web中的元素,一般情况下, addEventListener() 调用起来是这样的: element.addEventListener...('click',doSomething,false); 第一个元素是我们要监听的事件,第二个元素是事件触发时的回调函数,第三个参数是一个布尔值用来标识事件在捕获还是冒泡阶段触发。...,然后使用按钮将其添加到文档中。...afterend: 插入元素之后 事件详细信息 如前所述,事件使用熟悉的 addEventListener() 方法添加到网页上的元素。...() 时,可能需要防止函数调用中出现默认浏览器行为。
事件 事件就是浏览器或用户做出的事情,比如:用户在网页上单击一个按钮 。...即,监听用户的行为,做出反馈,比如:鼠标经过显示下拉菜单、点击按钮可以播放轮播图等等结合 DOM 使用事件时,需要为 DOM 对象添加事件监听,等待事件发生(触发)时,便立即调用一个函数。...addEventListener 是 DOM 对象专门用来添加事件监听的方法,它的两个参数分别为【事件类型】和【事件回调】。 完成事件监听分成3个步骤: 获取 DOM 元素 通过 addEventListener 方法为 DOM 节点添加事件监听 等待事件触发,如用户点击了某个按钮时便会触发...接下来简单看一下事件对象中包含了哪些有用的信息: ev.type 当前事件的类型 ev.clientX/Y 光标相对浏览器窗口的位置 ev.offsetX/Y 光标相于当前 DOM 元素的位置 注:在事件回调函数内部通过
比如点击某一个按钮,而它是由上一层的父标签,或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢?...但有两种情况需要注意 通过直接在 html 元素上添加的事件,必须写明参数为 event,响应执行函数也要写明该参数 通过 addEventListener() 添加的事件,只需要在执行函数上写明参数就行...添加事件的方法?建议使用之前写的跨浏览器事件处理方法。当然也可以通过获取 dom 对象,并对其属性赋值,也可以直接在 html 元素上绑定。...但是这两个方法下的 event 对象的使用有区别,特别是在 IE 浏览器上 在 window对象下触发整个页面的加载; window.addEventListener('load', function...,会冒泡 focusin 在获取焦点元素上触发,会冒泡 blur 在失去元素上触发,不会冒泡 DOMFocusOut 在失去焦点元素上触发,会冒泡; Opera 专有 focus 在获取焦点元素上触发,
当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当用户触发按键时......事件对象 在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息。所有浏览器都支持event对象,但支持方式不同。...事件和DOM2级在事件监听使用方式上有什么区别?...二者区别:使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,而Dom0级为一个事件添加多个事件处理程序时,后面的程序会覆盖前面的。...>这里是元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串;(2)当点击每一个元素li时控制台展示该元素的文本内容。
事件的基本概念 事件是指在网页中发生的特定交互行为,比如点击按钮、滚动页面或输入文本等。通过事件,我们可以在特定的交互行为发生时触发相关的JavaScript代码,以实现相应的操作和逻辑。...通过addEventListener()方法动态添加事件 addEventListener()方法是DOM对象提供的一种常用的事件添加方式。...可以通过以下步骤动态添加事件: 1.获取需要添加事件的DOM元素。 2.使用addEventListener()方法,指定要添加的事件类型和对应的事件处理函数。...3.事件处理函数中编写具体的操作逻辑。 通过事件委托实现动态事件绑定 事件委托是一种利用事件冒泡原理的动态事件绑定技术。通过将事件绑定到父元素上,可以在父元素上捕获子元素触发的事件。...实现事件委托的步骤如下: 1.找到共同的父元素,通常是包含所有子元素的容器。 2.使用事件冒泡的方式将事件绑定到父元素上。
领取专属 10元无门槛券
手把手带您无忧上云