javascript避免dom事件重复触发

/** * 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景 * @param {String} domID 要添加事件的控件ID * @param {String} eventName 要添加的事件, 例如: click, dblclick, 不可写成onclick, ondblclick * @param {Function} callback 触发事件所要执行的函数, 对于有参数的函数, 需要包含在一个…

JavaScript HTML DOM 事件

JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时. 如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码: onclick=JavaScript HTML 事件的例子: 当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输…

前端笔记之JavaScript（十）深入JavaScript节点&DOM&事件

一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript能做非常多的事情:DOM开发.Ajax开发.Canvas开发.NodeJS开发.前端框架(React.Vue.Angular等等).HTML5开发.这些都需要语言核心的知识. DOM开发说白了就是浏览器中的页面效果开发,在2011年之前,DOM开发占据了前端开发工程师的90%的工作:年之后,前端要负…

javascript:理解DOM事件

首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. 标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM事件的兼容性最初我们给页面实现点击,就像下面这样的简单操作. 先定义一个块如<div id="weiyuzhou">微宇宙</div>,之后在<script type="text/javascript"></script>…

JavaScript基础—dom,事件

Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让javascript能操作html页面控件的类,函数. 这就是文档对象模型.按照xml文档的理解就可以. à页面中的属性,标签要是没有注明给那个对象,则统一时给window的,我们都可以通过window点击出来,进行操作,这个js中理解的一样.但是我们现在通过document.getElementById…

前端JavaScript之DOM事件操作

DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型定义了访问和操作HTML文档的标准法,把HTML文档呈现为带有元素,属性和文本的树结构,由节点组成解析过程:HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点.然后操作的时候修改的是该元素的属性. 具体介绍见链接 2.事件(JS是以事件为核心的一门语言) 三要素:…

【总结整理】JavaScript的DOM事件学习（慕课网）

事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件来实现比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换本章内容1.理解事件流2.使用事件处理程序3.不同的事件类型一.事件流事件流描述的是从页面中接受事件的顺序.IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1.事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档).2.事件捕获事件…

松软科技web教程：JavaScript HTML DOM 事件监听器

addEventListener() 方法实例添加当用户点击按钮时触发的事件监听器: document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法为指定元素指定事件处理程序. addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序. 您能够向一个元素添加多个事件处理程序. 您能够向一个元素添加多个相…

javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEventHandler:function (element,type,handler) { if (element.addEventListener) { element.addEventListener(type, handler,false); }else if(element.attachEven…

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DOM事件模型分为两种:事件冒泡和事件捕获.事件冒泡最初是微软提出的DOM事件流的模型,顾名思义,就是值浏览器的事件流如同冒泡一样,从最低处到最高处.最低处对应的是DOM中最具体的元素,最高处则是最外层元素,最外层元素一般就是document元素. a.事件冒泡模型: 如下图,当点击最底层的span元素…

DOM事件简介－－摘自admin10000

Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部分被触发,触发者可以是用户操作,也可以是浏览器本身.事件并不是只是在一处被触发和终止:他们在整个document中流动,拥有它们自己的生命周期.而这个生命周期让DOM事件有更多的用途和可扩展性. 作为一个开发人员,我们必须要理解DOM事件是如何工作的,然后才能更好的驾驭它,利用它们潜在的优势,开…

【转】DOM事件简介

原文转自:http://blog.jobbole.com/52430/ Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部分被触发,触发者可以是用户操作,也可以是浏览器本身.事件并不是只是在一处被触发和终止:他们在整个document中流动,拥有它们自己的生命周期.而这个生命周期让DOM事件有更多的用途和可扩展性. 作为一个开发人员,我们必须要理解…

DOM事件简介

DOM事件简介--摘自ADMIN10000 Posted on 2013-12-05 09:32 ziran 阅读(76) 评论(1) 编辑收藏 Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部分被触发,触发者可以是用户操作,也可以是浏览器本身.事件并不是只是在一处被触发和终止:他们在整个document中流动,拥有它们自己的生命周期.而这个…

JavaScript HTML DOM 入门详解

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有…

javascript HTML DOM 简单介绍

JavaScript HTML DOM通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素.HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS…

JavaScript(这里主要侧重于 JavaScript HTML DOM)杂项

JavaScript基础 ------学习网站https://www.runoob.com/js/js-tutorial.html Javascript语言的特点: 安全性:2.易用性:3.动态交互性:跨平台性: 第一个javascript程序: 基本语法:<script type=”text/javascript”> </script> 第一个程序: <!DOCTYPE html> <html> <head> <meta charset=…

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升.不过,我们也应该.必须了解其基本原理.比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口.因为只有获得众多开发者的芳心,浏览器才会走得更远…

JavaScript:理解worker事件api

如果你不是很了解Event事件,建议先看我上一篇随文javascript:理解DOM事件.或者直接看下文worker api. hack 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的worker对象新开一个接口,此接口会处理客户端与indexedDB数据库之间的通信.这里的数据库是指浏览器数据库.如果,你需要判断浏览器是否支持worker对象,详见如下代码.或者浏览器是否支持indexedDB数据库,详见同下,二者判断最好选择前者.因为IE不支持indexedDB . if(w…

二、JavaScript语言--事件处理--DOM事件探秘

第一章事件流事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netscape:事件捕获流事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). 事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 第二章事件处理程序 1.HTML事件处理程序 HTML事件的缺点:HTML和JS代…

jQuery 防止相同的事件快速重复触发

重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要js或php程序脚本上做好,让用户知道点击是己提交服务器正在处理,下面我就整理从脚本上来处理此重复触发的问题. 很多时候事件会被快速重复触发,比如 click,这样就会执行两次代码,造成很多后果.现在有比较多的解决方法,但几乎都有局限性,比如一个 Ajax 表单,如果防止用户一次点好多下可以在第一次点击的时候冻结提交按钮,直到允许再次点击的时候再放开.很多人都这样干,但在其他的情况…

JavaScript DOM 事件模型

JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助我们更好的处理事件,写出更优的代码事件驱动机制当事件发生时,我们收到事件的反馈,在 JavaScript 中,事件反馈是我们自行定义的事件处理函数事件,如点击事件.鼠标移入事件等,是每一个元素与生俱来的能力通常说的绑定事件,实际上是绑定事件的反馈,即事件处理函数例如点击一个按钮,按钮元素对…

denounce函数：Javascript中如何应对高频触发事件

在DOM Event的世界中,以scroll.resize.mouseover等为代表的高频触发事件显得有些与众不同.通常,DOM事件只有在明确的时间点才会被触发,比如被点击,比如XMLHttpRequest状态更改等等:而高频事件则是在整个动作时期内反复触发反复调用callback,为整个APP的流畅运行留下了性能隐患. 甚至w3school在介绍mousemove事件时还为大家留下了贴心小提示:"每当用户把鼠标移动一个像素,就会发生一个 mousemove 事件.这会耗费系统资源去处理所有这…

javascript中0级DOM和2级DOM事件模型浅析

Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button" onclick="alert('Button Click')" /> 当上面的button被点击后,会弹出一个框显示"Button Click". 在javascript中添加事件监听函数有多种方法,比如: 在html元素上 [xhtml] view…

走进javascript——DOM事件

DOM事件模型在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事件模型中,就比较复杂一些,它将不再是单纯的调用一下自身绑定的事件就完事了,它还拥有机会去处理它的祖先节点,在DOM2级事件模型中,它有一个事件传播过程,分为3个阶段,从"事件捕获"Document开始来到"目标节点"再从"目标节点"冒泡回Docume…

JavaScript Dom 事件

JavaScript Dom 事件对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 onclick // 鼠标双击.出发事件 ondbclick // 鼠标移动到标签处.触发事件 onmouseover onmouseover="函数1(0);" // 鼠标离开到标签处.触发事件 onmouseout onmouseout="函数2(0);" 使用:…

动态生成的DOM不会触发onclick事件的原因及解决方法

最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment'>点击加载评论</span>. 然后再写 $(“.get_comment).click(function(){ //响应事件逻辑 }) 发现click事件并不会触发,使用控制台侦听也木有错误.百思不得其解时, 因为我在以前做搜狐家居商城的运费管理时,也曾遇到,因此将焦点落在动态加载…

javascript中0级DOM和2级DOM事件模型浅析分类： C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读评论(0) 收藏

JavaScript之DOM操作，事件操作，节点操作

1,DOM操作 1.1 概念所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸如XML和HTML文档的标准.DOM是一个使程序和脚本有能力动态地访问和更新文档的内容,结构以及样式的平台和语言中立的接口. 在文档中一切皆对象,比如 html,body,div,p等等都看做对象,那么我们如何来点击某个盒子让他变色呢? DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档…

针对focus和blur的Dom事件触发顺序

Dom事件触发顺序,拿文本框举例: 它会先触发focus事件,之后才会触发在有交点之后才能触发的一些如 click change 等事件(但如果有mousedown则先执行). 而相对于blur而言,它会在有焦点的时候处理click change等事件,之后如果再有blur那么才会被触发.…

如何在JavaScript里防止事件函数的高频触发和调用

网页中JavaScript最基本的功能是监听或响应用户的动作,这非常的有用.用户的动作有些频率非常高,有的十分罕见.有些监听器函数的执行如闪电般完成,而有些繁重的会把浏览器拖死.拿浏览器窗口的resize事件来说,这种事件会在浏览器窗口大小的每一尺度变化都触发一次,如果监听器体量很大,你的浏览器很快就会被拖垮. 很显然,我们不能允许浏览器被拖垮,但我们又不能删除删除监听器.然而,我们可以限制函数调用的频度,弱化事件函数运行带来的影响.相对于让窗口的每一步size的变化都触发一次监听器函数,我们可…

【javascript避免dom事件重复触发】的更多相关文章