js操作DOM动态添加和移除事件
非IE下，注意事件名不带on，如onclick为click
添加事件：DOM对象.addEventListener('事件名',函数名,true/false);
删除事件：DOM对象.removeEventListener('事件名',函数名,true/false);
第三个参数是useCapture，如果为true，浏览器采用capture截获处理事件顺序；如果为false，浏览器采用bubbing冒泡方式处理事件顺序
一般为false
给个例子，可以自己修改true或false来看效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="div_test">div_test
<input type="button" id="btn_test" value="btn_test"/>
</div>
<script type="text/javascript">
window.onload = function () {
document.getElementById("div_test").addEventListener("click", test1, false);
document.getElementById("btn_test").addEventListener("click", test2, false);
}
function test1() {
alert("外层div触发")
}
function test2() {
alert("内层input触发")
}
</script>
</body>
</html>
例子
IE下，事件名不能去on了，正常写
添加事件：DOM对象.attachEvent('事件名',函数名);
删除事件：DOM对象.detachEvent('事件名',函数名);
注意，绑定事件和删除事件的函数名必须一致，而且不能使用匿名函数，匿名函数不能指定函数名
常用代码如下：
//绑定事件
if (typeof document.addEventListener != "undefined") {
document.addEventListener("mousedown",_lhlclick,true);
} else {
document.attachEvent("onmousedown",_lhlclick);
} //解除绑定事件
if (typeof document.addEventListener != "undefined") {
document.removeEventListener("mousedown",_lhlclick,true);
} else {
document.detachEvent("onmousedown",_lhlclick);
}
绑定和解除事件
js操作DOM动态添加和移除事件的更多相关文章
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加option操作 （三级联动） （搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）
[JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
随机推荐
- java保留两位小数
java保留两位小数问题: 方式一: 四舍五入 double f = 111231.5585; BigDecimal b = new BigDecimal(f); d ...
- iOS开发小技巧-修改SliderBar指针的样式(牢记这个方法,只能通过代码来修改)
代码: // 修改进度条的指针图片 [self.progressSlider setThumbImage:[UIImage imageNamed:@"player_slider_playba ...
- Entity Framework Code First （五）Fluent API - 配置关系
上一篇文章我们讲解了如何用 Fluent API 来配置/映射属性和类型,本文将把重点放在其是如何配置关系的. 文中所使用代码如下 public class Student { public int ...
- url中#号的作用
url中#号的作用就是本页面位置跳转 比如这个url地址:http://www.aaaaa.com/index.html?ad=34&m=c#red red就是index.html页面的依哥位 ...
- spring spel
•Spring 表达式语言(简称SpEL):是一个支持运行时查询和操作对象图的强大的表达式语言. •语法类似于 EL:SpEL 使用 #{…} 作为定界符,所有在大框号中的字符都将被认为是 SpE ...
- js 刷新windows.open另一个窗口页面或window.open的页面如何刷新(父页面)上层页面
一.js完整代码如下: //js打开新窗口 functionopenWin() {window.open('addInfo.jsp', '_blank','width=300,height=400,t ...
- Python 学习笔记9（装饰器，decorator）
31 装饰器 装饰器可以对一个函数.方法或者类进行加工,是一种高级的python语法. 装饰函数 接收一个可调用对象作为输入参数,并返回一个新的可调用对象. 把函数传递给装饰器,然后增加新的功能,返回 ...
- 【SDOI2010题集整合】BZOJ1922~1927&1941&1951&1952&1972&1974&1975
BZOJ1922大陆争霸 思路:带限制的单源最短路 限制每个点的条件有二,路程和最早能进入的时间,那么对两个值一起限制跑最短路,显然想要访问一个点最少满足max(dis,time) 那么每次把相连的点 ...
- 大规模图的存储（前向星、next数组）
大规模图的储存 在信息学中,经常会遇到比较大规模图,使用指针固然是很好的方法,不过一有指针速度不如数组之说,二有指针不如数组稳定之说,三有,也是最重要的,指针不如数组来得方便,这也便是大多数Oier不 ...
- 【poj3468】 A Simple Problem with Integers
http://poj.org/problem?id=3468 (题目链接) 题意 给出一个序列,要求维护区间修改与区间求和操作. Solution 多年以前学习的树状数组区间修改又忘记了→_→. 其实 ...