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">& ...
随机推荐
- ci 在阿里云访问的时候404
最近想把ci 弄到阿里云去,结果发现,本地好好的,到了阿里云就404了.网上查了下 原来是 配置文件的问题. 配置文件就是 vhost下面的 **.conf文件 要有这个才行 location / ...
- 修改PostgreSQL数据库的默认用户postgres的密码
有时候,忘记了postgresql 安装时默认用户postgres 的密码,怎么办呢? linux shell命令下面输入: sudo -u postgres psql (这样就可以直接登录进pos ...
- Python3基础（十） 类的初印象
Python是一种面向对象的脚本语言,所以它也提供了面向对象编程的所有基本特征:允许多继承的类继承机制.派生类可以重写它父类的任何方法.一个方法可以调用父类中同名的方法.对象可以包含任意数量和类型的数 ...
- HDU 1255 覆盖的面积（线段树+扫描线）
题目地址:HDU 1255 这题跟面积并的方法非常像,仅仅只是须要再加一个变量. 刚開始我以为直接用那个变量即可,仅仅只是推断是否大于0改成推断是否大于1.可是后来发现了个问题,由于这个没有下放,没延 ...
- 字节数组byte[]和整型,浮点型数据的转换——Java代码
近期在写C++ socket和java socket之间的通信程序,涉及到整数浮点数的传输.须要从字节数组还原数据,查了一些资料.总结例如以下 1. 整数和浮点数的机器表示 在机器内部.不 ...
- LeetCode总结--二分查找篇
二分查找算法尽管简单,但面试中也比較常见.经经常使用来在有序的数列查找某个特定的位置.在LeetCode用到此算法的主要题目有: Search Insert Position Search for a ...
- linux系统下用到的小知识点积累
preface:在ubuntu下做事情,在终端下执行一些命令.或者在vim里面做一些操作.自然而然须要用到一些小知识点,没有怎么系统地看<鸟哥的菜>,基本上是遇到了什么问题想要实现什么功能 ...
- java分页之页面分页
import java.util.ArrayList; import java.util.List; /** * * @author cheney * * @date Aug 31, 2012 */ ...
- Java中去除字符串中的空格
1.去掉首尾的空格 String.trim() trim()是去掉首尾空格 2.去掉所有的空格 str.replace(" ", ""); 去掉所有空格,包括 ...
- linux C函数之strdup函数分析【转】
本文转载自:http://blog.csdn.net/tigerjibo/article/details/12784823 linux C函数之strdup函数分析 一.函数分析 1.函数原型: #i ...