<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

普通情况下:通过循环绑定所有

    var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].addEventListener("click",function(e){
console.log(e.target.innerHTML);
})
}

使用代理:通过父层绑定,那就不用给每个子元素绑定了

var box=document.getElementById("box");
box.addEventListener("click",function(e){
console.log(e.target.innerHTML);
});

注意:addEventListener 在IE不支持,需要使用attachEvent,事件名称,含“on”

var box=document.getElementById("box");
box.attachEvent("onclick",function(e){
alert(e.srcElement.innerHTML);
});

javascript:使用代理绑定事件的更多相关文章

  1. JavaScript三种绑定事件的方式

    JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...

  2. JavaScript跨浏览器绑定事件函数的优化

    JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...

  3. 【JavaScript】jQuery绑定事件

    jquery中直接绑定事件:只能用在程序中一开始就存在的html代码 目标元素.click(function(){ }) jquery中间接绑定事件: 如果目标元素是js生成的,则需要间接绑定事件,用 ...

  4. javascript为元素绑定事件响应函数

    javascript中为元素设置响应时间有两种方法. (1):object.onclick=functionName; 这种方法不可以传递参数. (2):object.onclick=function ...

  5. JavaScript绑定事件的方法[3种]

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HT ...

  6. JavaScript中,有三种常用的绑定事件的方法

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...

  7. javascript事件有哪些?javascript的监听事件

    事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...

  8. JavaScript 三种绑定事件方式之间的区别

    JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...

  9. JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数

    下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...

随机推荐

  1. HIT 1917 2—SAT

    题目大意:一国有n个党派,每个党派在议会中都有2个代表, 现要组建和平委员会,要从每个党派在议会的代表中选出1人,一共n人组成和平委员会. 已知有一些代表之间存在仇恨,也就是说他们不能同时被选为和平委 ...

  2. codeforces739C - Skills &&金中市队儿童节常数赛

    http://codeforces.com/problemset/problem/739/C 先上链接 这道题 对于蒟蒻的我来说还是很有难度的 调了很久 对于我的代码 mx2是答案 mx1代表单调 m ...

  3. [bzoj1486][HNOI2009]最小圈——分数规划+spfa+负环

    题目 传送门 题解 这个题是一个经典的分数规划问题. 把题目形式化地表示,就是 \[Minimize\ \lambda = \frac{\sum W_{i, i+1}}{k}\] 整理一下,就是 \[ ...

  4. 数据安全之MD5、SHA-1、CRC32区别

    crc32 — 计算一个字符串的 crc32 多项式 生成 string 参数的 32 位循环冗余校验码多项式……:这句话从英文翻译过来的,不正确,准确的说应该是这么理解: 以32位循环冗余校验多项式 ...

  5. Buildroot自动化交叉编译工具:其一【转】

    转自:http://blog.csdn.net/youyudehexie/article/details/7583657 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] Bui ...

  6. 智联招聘的python岗位数据词云制作

    # 根据传入的背景图片路径和词频字典.字体文件,生成指定名称的词云图片 def generate_word_cloud(img_bg_path, top_words_with_freq, font_p ...

  7. 表单重置 jQuery

    //重置 $('.reset-bottom').click(function(){ $('.mui-input-clear').attr('value','');//text类型 $('input[n ...

  8. Selenium2+python自动化71-多个浏览器之间的切换【转载】

    前言 有时候一些业务的功能涉及到多个系统,需要在web系统1打开造一些数据,然后用到某些参数是动态生成的,需要调用web系统2里面的参数. 举个简单例子:在做某些业务的时候,需要手机短信验证码,我不可 ...

  9. 好的web前端是如何拿到30万年薪的?

    2018年前端开发不再像过去几年里新技术框架层出不穷,而是各种组件,模块,很多东西都有痕迹可寻,技术都在原来的基础上有了革新和沉淀. 前端招聘方面也在紧跟技术发展,大量“滥竽充数”的速成开发者开始失去 ...

  10. Codeforces 608 B. Hamming Distance Sum-前缀和

      B. Hamming Distance Sum   time limit per test 2 seconds memory limit per test 256 megabytes input ...