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">& ...
随机推荐
- [51Nod1089] 最长回文子串 V2（Manacher算法）
1089 最长回文子串 V2(Manacher算法) 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 回文串是指aba.abba.cccbccc.aaaa这种左右对称 ...
- A - 不容易系列之(3)―― LELE的RPG难题 简单递推
人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即"可乐"),经过多方打探,某资深Cole终于知道了原因,原来,LELE最近研 ...
- Android GIS开发系列-- 入门季（2） MapView与图层介绍
一.MapView MapView是Arcgis中的最基本的类,与高德地图SDK的MapView的重要性一样.MapView的创建有两种方法,一种是在Layout文件中直接写控件.一种是实例化,Map ...
- 简单解决 WIN10更新后 远程桌面提示 CredSSP加密Oracle修正的问题
更新WIN10后,打开远程桌面,提示: 以 管理员身份打开 cmd或者PowerShell,贴入: REG ADD HKLM\Software\Microsoft\Windows\CurrentVer ...
- 设计模式：浅析 抽象工厂、工厂方法、简单(静态)工厂 java实现
----简单工厂 (也叫静态工厂模式):一个抽象产品抽象出多个详细产品类.一个详细工厂类 代码: //抽象产品角色 public interface Car{ public void drive(); ...
- 46.Android 自己定义Dialog
46.Android 自己定义Dialog Android 自己定义Dialog 前言 提示Dialog 提示Dialog 效果图 菜单Dialog 菜单Dialog 效果图 DialogActivi ...
- 最全Pycharm教程（37）——Pycharm版本号控制之基础篇
1.主题 介绍Pycharm的版本号控制系统 2.准备工作 (1)Pycharm版本号为2.7或者更高 (2)已经创建一个project.參见Getting Started tutorial (3)安 ...
- 转 C# 将字符串转换为计算公式,并计算结果
根据总结,大概分为以下三种: 第一种: 用DataTable中的Compute方法. 例如:" 1*2*3 " 代码如下: var a = new System.Data.Data ...
- c++ 编译器会绕过拷贝构造函数
C++ primer P442 P447:在拷贝初始化过程中,编译器可以跳过拷贝构造函数,直接创建对象.即,编译器允许将下面的代码 "; //1 改写为 "); //2 由于str ...
- .NET下WebBrowser的一个BUG以及其替代品——geckofx
今天研究一个小问题,在C#的WebBrowser下打开奇艺网的视频,经常整个FLASH就偏了,进度条控制条什么的都没有. 要全屏一下然后还原才能解决这个问题. 如下,图1为webbrowser打开,图 ...