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 节点 ...
随机推荐
- android开发------响应用户事件
今天的内容有点简单,不难,就是为按钮添加onClick事件. 新知识点: Intent类的简单使用 startActivity方法 一般事件都由按钮触发,现在我们要实现的是当用户点击按钮的时候,启动 ...
- PHP 文件创建/写入
<?php /* PHP 文件创建/写入 fopen() 函数也用于创建文件.也许有点混乱, 但是在 PHP 中,创建文件所用的函数与打开文件的相同. 如果您用 fopen() 打开并不存在的文 ...
- 延时程序执行Qt
有时候为了让程序暂停一下,不让它一直跑下去,可以使它进入循环结构中! 例如: #include <QCoreApplication> #include <qdebug.h> # ...
- zabbix 用 LLD 完全自动化监控 Oracle
文章转载自:http://mp.weixin.qq.com/s?__biz=MzA3MzYwNjQ3NA==&mid=2651296856&idx=1&sn=2bdf78071 ...
- LightOJ 1341 唯一分解定理
Aladdin and the Flying Carpet Time Limit:3000MS Memory Limit:32768KB 64bit IO Format:%lld &a ...
- 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法！
原因1:给定目录下jvm.dll不存在. 对策:(1)重新安装jre或者jdk并配置好环境变量.(2)copy一个jvm.dll放在该目录下. 原因2:eclipse的版本与jre或者jdk版本不一致 ...
- js-格式化数字保留两位小数-带千分符
很多时候发现有时候js会提示自带函数不能使用,所以自己找了很多资料实现了个 html <input type="text" class="input_text in ...
- editplus-查找替换的正则表达式应用
editplus查找替换的正则表达式应用 表达式 说明 \t 制表符. \n 新行. . 匹配任意字符. | 匹配表达式左边和右边的字符. 例如, "ab|bc" 匹配 " ...
- pycharm实用快捷键
提示 CTRL Q: 在参数列表位置,显示可以输入的所有参数. CTRL Q: 查看选中方法的文档字符串 阅读 CTRL -: 折叠当前代码 CTRL +: 展开当前代码 CTRL SHIFT -: ...
- Java多线程与并发库高级应用-传统线程同步通信技术
面试题: 子线程循环10次,接着主线程循环100次,接着又回到子线程循环10次,接着又 主线程循环100次,如此循环50次,请写出程序 /** * 子线程循环10次,接着主线程循环100次,接着又回到 ...