`

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

    JavaScript给事件委托批量添加事件监听详细流程  1.什么是事件委托 事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找...

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

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

    JavaScript完全自学宝典 源代码

    示例描述:学习JavaScript的事件处理。 7.1.html 双击某行变换背景色。 7.2.html 获取鼠标的位置。 7.3.html div中显示选中文本。 7.4.html 检测onkeydown事件与onkeypress事件执行的先后顺序。 ...

    trender:批量 css 过渡结束事件

    安装npm install trender 用法向您的元素添加过渡属性并提供一个类选择器,您的过渡将在该选择器下运行。 # the-trender { width : 80 px ; height : 80 px ; background-color : tomato; -webkit-transform : ...

    批量上传图片jsp,c#,php版本

    1.在过去一年,小编写过一个批量上传图片的例子,那个例子是基于百度编辑器改造的,用起来必须依赖百度编辑器,所以小编就又弄了一个,就是今天要介绍的了,uploadify上传的了前端用flash,javascript编写,后端兼容...

    Ext Js权威指南(.zip.001

    8.3.1 为元素添加阴影:ext.shadow与ext.shadowpool / 418 8.3.2 为组件提供阴影和shim功能:ext.layer / 419 8.3.3 让组件实现浮动功能:ext.util.floating / 420 8.3.4 记录组件状态:ext.state.stateful / ...

    Ajax 四级导航菜单ASP+Access动态版

    网页上的收藏夹及分享功能代码 带当前时间显示的js日历 JavaScript适时监听输入框值的即时变化 自定义QQ在线状态图片 多种拖放元素功能的Js演示代码 - Ajax四级导航菜单ASP+Access动态版 所属分类:ASP源码 | Ajax...

    PHP开发实战1200例源码

    实例126 向数组中添加元素 156 实例127 将数组中指定索引位置的元素替换 157 实例128 获取数组中最后一个元素 158 实例129 去除数组中的重复元素 158 实例130 字符串与数组的转换 159 实例131 对数组元素进行随机...

    vue-mapboxgl-components:基于 Vue 和 mapbox-gl 的地理信息可视化组件库

    基于 和 的地理信息可视...-- 引入组件CSS文件,如果没有CSS,Popups和Markers等元素将无效。 --&gt; import 'vue-mapboxgl-components/lib/vue-mapboxgl-components.css' import App from './App.vue' Vue.config.prod

    DWR.xml配置文件说明书(含源码)

    从java中传递null值到javascript是没有任何危险性的,所以DWR将这个作为默认的converter,所以你自己不用再把这个converter添加到配置文件的部分中去. 基本类型的converter转换int,boolean,double等.当然还包括对应的...

    接口测试工具-postman使用笔记

    postman是一款强大的接口测试工具,操作非常简单、方便!有Chrome插件、客户端两种形式...2.2.2批量执行选择要批量执行的文件夹---&gt;点击小三角---&gt;点击「Run」2.2.3结果校验使用JavaScript写结果校验脚本,右侧有

    ASP.NET2.0高级编程(第4版)1/6

     20.5.1 给页面添加多个表702  20.5.2 给SQL Server 高速缓存依赖性和 Request对象建立关联702  20.5.3 给SQL Server 高速缓存依赖性 和Cache对象建立关联703 20.6 小结706 第21章 调试和错误处理技术709 21.1 ...

    react-drag-and-select:React组件以使用鼠标光标选择多个项目

    一个轻量级的,经过全面测试的(单元和e2e测试),TypeScript'd,React库(1个组件和1个挂钩!...添加 原料药 拖动选择 这是 ,用于创建拖动并将拖动层绘制到屏幕上。 它没有道具/配置。 例子 &lt; DragSelection&gt;

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例126 向数组中添加元素 156 实例127 将数组中指定索引位置的元素替换 157 实例128 获取数组中最后一个元素 158 实例129 去除数组中的重复元素 158 实例130 字符串与数组的转换 159 实例131 对数组元素进行随机...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例126 向数组中添加元素 156 实例127 将数组中指定索引位置的元素替换 157 实例128 获取数组中最后一个元素 158 实例129 去除数组中的重复元素 158 实例130 字符串与数组的转换 159 实例131 对数组元素进行随机...

    element-annotator:Web代理元素注释器界面

    html.py :批量清理网页该脚本删除了危险标签( script , iframe等) 该脚本还为每个标签添加了唯一的data-xid属性tools/page-filter :查看页面并删除不良页面启动服务器tools/page-filter/server.py ,指定一个...

    史上最全韩顺平传智播客PHP就业班视频,10月份全集

    9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向...

    史上最全传智播客PHP就业班视频课,8月份视频

    9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向...

Global site tag (gtag.js) - Google Analytics