`

Javascript批量给元素添加事件

阅读更多
var stars = document.getElementsByTagName("i");

 首先获取所有i标签

 

for (var i=0;i<stars.length;i++){
        			stars[i].index = i;
        		}

 为每个标签添加自定义属性index,值为标签的key值

 

for (var i=0;i<stars.length;i++) {
        			stars[i].onmouseover = function(){
        				lightStars(this.index);
        			}
        			stars[i].onmouseout = function(){
        				offStars(this.index);
        			}
        			stars[i].onclick = function(){
        				alertStars(this.index);
        			}
        		}

 通过循环为每一个元素添加事件,注意的一点是,获取index值的时候,需要用this,而不是stars[i]。

 

分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript给事件委托批量添加事件监听详细流程.docx

    2. **动态元素处理**:对于那些可能会动态添加或删除的子元素来说,事件委托可以确保新添加的元素也能正确地触发事件处理函数,而无需重新绑定事件。 3. **代码简洁性**:只需要在一个地方设置事件处理逻辑,使得...

    layui动态绑定事件的方法

    对于动态添加的元素,我们同样可以使用.on()方法进行事件委托,将事件监听设置在静态的父级元素上,从而实现对动态添加元素的事件监听。 在实现的过程中,我们也可以利用ES6的模板字符串(`)来拼接要动态创建的...

    JS实现为动态创建的元素添加事件操作示例

    本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考,具体如下: html中直接生成的元素,添加事件,我们都知道,但是如何为一个动态生成的元素添加事件呢,jquery中的live方法可以做到这一点 ...

    读Ext之十五(操作批量元素)

    - 执行这些方法会同时作用于所有包含的元素,例如,`elements.addCls('highlight')`会给所有元素添加'highlight'类。 3. **遍历元素**: - 可以使用`each`方法迭代CompositeElementLite中的每一个元素,执行...

    globally.js:批量添加javascript全局事件监听器

    `globally.js` 提供了一种简洁的方法来批量添加全局事件监听器,而不是逐个为每个元素或事件类型设置监听器。这提高了代码的可维护性和效率,减少了重复的工作。 首先,让我们理解什么是全局事件监听器。在...

    JavaScript实现的全选效果与批量删除效果

    2. 在JavaScript中,我们可以通过`getElementById`方法获取这个复选框,然后为它添加事件监听器: ```javascript var selectAllCheckbox = document.getElementById('selectAll'); selectAllCheckbox....

    批量搜索百科(js脚本).rar

    6. **事件监听**:如果脚本提供了交互功能,如开始/停止批量搜索,那么可能用到了事件监听,如点击事件,来触发相应的功能。 7. **延迟执行与节流**:为了防止短时间内大量请求导致服务器压力过大,可能采用了`...

    upload(批量上传加水印功能)

    1. 图像处理库:如Python的PIL,JavaScript的sharp等,它们提供了添加文本水印和图像水印的功能,可以调整水印的位置、大小、透明度等属性。 2. CSS3:对于网页中的图片,可以通过CSS3的filter属性应用模糊、灰度等...

    JavaScriptDOM编程艺术

    `addEventListener`和`removeEventListener`用于添加和移除事件监听器,`dispatchEvent`用来触发事件。同时,理解事件冒泡和事件捕获的概念也很重要。 9. **CSS操作**:通过DOM可以动态改变元素的样式。`style`属性...

    非常小且简单的工具类用于将事件侦听器绑定到元素

    在这个假设的`EventTools`类中,`addEventListenerToMultipleElements`方法接收元素的ID数组、事件类型以及事件处理函数,然后批量为这些元素添加事件侦听器,节省了编码时间。 此外,考虑到"其它杂项"的标签,这个...

    JQuery给元素绑定click事件多次执行的解决方法

    然而,在编程过程中,我们可能会遇到一个问题,即元素的`click`事件被多次绑定,导致点击时事件处理函数被执行多次,这通常是由于多次调用事件绑定代码或动态添加元素时没有正确处理事件引起的。本文将深入探讨这个...

    JavaScript程序设计-DOM操作元素样式.docx

    4. **增加CSS类别**:`addClass(class)`方法用于向元素添加CSS类,例如`$('div').addClass('red')`会给所有`div`元素添加`red`类。同时添加多个类可以使用`addClass(class1 class2 class3...)`。 5. **删除CSS类别*...

    photoshop-cc-javascript-ref-2015.pdf

    Photoshop的JavaScript支持还包含了一系列事件处理,比如文件打开、保存、关闭时触发的事件。这使得开发响应用户行为的脚本成为可能。例如,你可以编写一个脚本,在每次保存文件时自动添加水印或者调整图像尺寸。 ...

    icaro智能和高效的JavaScript对象观察器适合批量DOM更新1kb

    在JavaScript中,对象是动态的数据结构,其属性可以随时添加、删除或修改。icaro作为一个对象观察器,能够监听这些变化,并在对象状态发生变化时执行相应的回调函数。这对于实现数据绑定和响应式系统非常关键,因为...

    JavaScript_特效 JavaScript 网页特效 网页编程必备

    例如,通过getElementById、getElementsByClassName或querySelector等方法获取元素,然后修改其样式、添加事件监听器或插入新内容,实现动态更新网页的效果。 三、事件处理 JavaScript的事件处理机制允许开发者响应...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十三:HTML DOM-文档元素的操作(一)

    总的来说,本手册将为你提供一个关于HTML DOM元素操作的基础教程,帮助你掌握基本的元素选取、属性操作、元素添加与删除以及事件处理。通过学习,你将能够运用JavaScript实现对HTML页面的动态控制,提升Web应用的...

    web页面批量打印

    2. `page-break-after/before` 属性:这些属性可以用来指定元素之后或之前添加分页符,确保元素在新的页面开始。 3. `break-inside/avoid` 属性:防止元素跨越多页,保证内容完整性。 4. 使用CSS Flexbox或Grid布局...

    Photoshop-CS6-JavaScript.zip

    4. **事件处理**:JavaScript可以监听Photoshop中的事件,如打开文件、保存文件或用户交互,然后根据这些事件触发相应的脚本动作。 5. **脚本编写实践**:手册可能会包含一些示例脚本,展示如何实现特定的任务,如...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版

    掌握如何通过DOM查找特定元素、添加或删除元素,以及更新元素内容,是开发交互式Web应用的关键技能。 书里还会详细讨论事件处理,这是JavaScript与用户交互的重要手段。通过绑定事件监听器,开发者可以响应用户的...

    javascriptDOM

    在JavaScript中,DOM主要用于创建、修改和操纵网页元素,从而实现动态网页效果。 在学习JavaScript DOM时,你需要掌握以下几个核心知识点: 1. **DOM基本概念**:理解DOM是一个标准,用于表示和操作HTML和XML文档...

Global site tag (gtag.js) - Google Analytics