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 节点 ...
随机推荐
- python环境搭建-设置PyCharm软件的配色方案和Python解释器
设置PyCharm软件的配色方案 设置Python解释器(用于Python2 or 3 的切换)
- strut2的拦截器之对request和session的封装
本文主要内容是对 implements Interceptor 这种方式的探索 前提是需要了解:责任链模式 对下面这句代码的理解: Map<String, Object> session ...
- Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法
首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是 --阿里巴巴矢量图标库 -网 ...
- Shell脚本_位置参数和预定义参数
一.位置参数变量 1.输出两个输入参数之和 l1.sh 1 2 3 4 5 6 7 8 9 #!/bin/bash num1=$1 num2=$2 sum=$((num1+num2)) # ...
- 【POJ 1228】Grandpa's Estate 凸包
找到凸包后暴力枚举边进行$check$,注意凸包是一条线(或者说两条线)的情况要输出$NO$ #include<cmath> #include<cstdio> #include ...
- mac下搭建java开发环境：eclipse+tomcat+maven
一.安装eclipse 直接下载 二.安装JDK 下载mac版专用的jdk1.7,地址如下:http://jdk7.java.net/macportpreview/, 确认java使用的版本:开一个终 ...
- 实在没想到系列——HashMap实现底层细节之keySet,values,entrySet的一个底层实现细节
我在看HashMap源码的时候发现了一个没思考过的问题,在这之前可以说是完全没有思考过这个问题,在一开始对这个点有疑问的时候也没有想到居然有这么个语法细节存在,弄得我百思不得其解,直到自己动手做实验改 ...
- iOS 蓝牙开发（三）app作为外设被连接的实现(转)
转载自:www.cocoachina.com/ios/20151105/14071.html 原作者:刘彦玮 再上一节说了app作为central连接peripheral的情况,这一节介绍如何使用ap ...
- bzoj4358: permu
莫队算法,用线段树维护最长连续1,复杂度O(nsqrt(m)logn) 刚开始TLE了,看了claris大爷的blog说是kd-tree,然而并不会kd-tree…… 然后就打算弃疗了...弃疗之前加 ...
- css-关于absolute和relative的一些笔记
根据张鑫旭老师的博客,一些笔记留作备忘 1.position:absolute 具有包裹性--包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被 ...