JS——动态添加事件和移除事件（有待补充...）
动态的添加事件：利用 attachEvent 和 addEventListener
IE 支持 attachEvent：
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("测试");
}
或者：
obj.attachEvent("onclick", function(){alert("测试");});
其它浏览器支持 addEventListener：
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("测试");
}
或者：
obj.addEventListener("click", function(){alert("测试");}, false);
注意： attachEvent 的事件带 on，如 onclick，而 addEventListener 不带 on，如 click。
综合应用：
if (window.attachEvent)
{
//IE 的事件代码
}
else
{
//其它浏览器的事件代码
}
下面说下addEventListener第三个参数以及应用。TRUE：事件捕获阶段，事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。FALSE：事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function regEvent() {
document.getElementById('id1').addEventListener('click', function () { changeRed(); }, true);
document.getElementById('id2').addEventListener('click', function () { changeYellow(); }, true);
}
function changeRed() {
document.getElementById("p1").style.color = 'red';
}
function changeYellow() {
document.getElementById("p2").style.color = 'yellow';
}
</script>
</head>
<body>
<p id="p1">会变成红色</p>
<p id="p2">会变成黄色</p>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:red; z-index:4">
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:yellow; z-index:1"></div>
</div>
<button type="button" onclick="regEvent()">点击</button>
</body>
</html>
注释：虽然利用addEventListener进行了事件的注册，但是有个问题就是在注册事件完成后，点击子div会触发触发父div的事件。下面是解救办法：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function regEvent() {
document.getElementById('id1').addEventListener('click', function () { changeRed(); }, false);//必须设为false
document.getElementById('id2').addEventListener('click', function () { changeYellow(this, event); }, false);//必须设为false
}
function changeRed() {
document.getElementById("p1").style.color = 'red';
}
function changeYellow(obj, evt) {
document.getElementById("p2").style.color = 'yellow';
if (window.event) {
evt.cancelBubble = true;//ie浏览器下阻止冒泡。cancelBubble不是w3c标准，只支持ie，stopPropagation现在也支持ie
} else {
evt.stopPropagation();//其它浏览器下阻止冒泡
}
}
</script>
</head>
<body>
<p id="p1">会变成红色</p>
<p id="p2">会变成黄色</p>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:red; z-index:4">
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:yellow; z-index:1"></div>
</div>
<button type="button" onclick="regEvent()">点击</button>
</body>
</html>
stopPropagation() 方法：不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
注释：上例中addEventListener方法第三个参数必须设为false（冒泡状态）。
preventDefault() 方法：取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。下面是例子，取消了a标签的跳转功能。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function myself(e) {
alert('1');
e.preventDefault();
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="a1" onclick="myself(event)">百度</a>
</body>
参考：stopPropagation() 方法、js 事件冒泡、事件捕获、stopPropagation、preventDefault、事件的canceBubble属性
JS——动态添加事件和移除事件（有待补充...）的更多相关文章
- 【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
- JS动态添加的标签无法绑定事件解决方案~~~
今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...
- Js 动态添加的数据,监听事件监听不到
在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...
- js动态添加的元素不能绑定事件
动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})
- js动态添加onload、onresize、onscroll事件(另类方法)
js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...
- js动态替换数据的点击事件
做项目时遇到的,具体是界面如下图:当点击X号时,出现删除.取消按钮,当点击删除时,这一行删除,当点击取消时又恢复到初始状态. 需要关注的问题是,js动态添加的删除.取消按钮的点击事件.当点击取消时恢复 ...
- 动态添加的html元素绑定事件的方法
避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个: 1.动态添加的时候加行内事件,比如onclick="funcName()" 在js中写好方法名对应 ...
- jquery给动态添加的dom元素绑定事件
$('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...
- 原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
- 11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件
jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...
随机推荐
- 测试出来了第一版代码--可以得到用户token啦
一版一版往前走啦... 先安装vs2010的学习版, 然后用codeblock来搞. 有一个msvcr100.dll这个文件需要和代码同级目录. 这样的好处是合规,然后,codeblock也可以用vs ...
- BAT经典面试题，深入理解Java内存模型JMM
Java 内存模型 Java 内存模型(JMM)是一种抽象的概念,并不真实存在,它描述了一组规则或规范,通过这组规范定义了程序中各个变量(包括实例字段.静态字段和构成数组对象的元素)的访问方式.试图屏 ...
- 常见的HTTP状态码(HTTP Status Code)
HTTP状态码 当使用浏览器访问一个网页时,浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览 ...
- Hadoop2.0安装之非HA版
主要步骤跟Hadoop1.0(1.0安装地址)一致,主要在配置这块有更改 安装 下载地址:http://archive.apache.org/dist/hadoop/core/hadoop-2.6.5 ...
- 用 Arduino Uno 给 Arduino Mini（Pro）烧录程序
用 Arduino Uno 给 Arduino Mini(Pro)烧录程序 准备 Arduino Uno Arduino Mini(Pro) 杜邦线若干 接线 首先去掉 Arduino 上的芯片ATM ...
- go语言中log包的使用
package main import ( "github.com/robertkrimen/otto" "log" ) func main() { log.P ...
- [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js
A Promise invokes a function which stores a value that will be passed to a callback. So when you wra ...
- Cannot update identity column 'XXX'
Sqlserver -- 怎样改动设置主键的id能够手动更新? #1 打开表的设计界面 #2 将主键id的is Identity的属性改成No 这样就能够通过Update语句来更新表的主键id了. 怎 ...
- ConfigurationManager.AppSettings Property
在app.config文件中添加如下配置 <appSettings> <add key="Server" value="127.0.0.1"/ ...
- 解决无线网卡 RTL8723BE ubuntu环境下不稳定情况
jiqing@ThinkPad:~$ lspci | grep -i net 00:19.0 Ethernet controller: Intel Corporation Ethernet Conne ...