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">& ...
随机推荐
- 统计单词个数（codevs 1040）
题目描述 Description 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<= ...
- Linux基本命令总结(初学者可以借鉴学习)
Linux基本常用命令 个人在平时项目中用到的一些常规命令总结下 删除文件夹命令:rm -rf 目录名字 添加模式:按i 退出编辑模式:ese左上角键 首先先按esc退出进入一个模式然后再输入wq或者 ...
- Linux中W与Who命令的使用
踢掉一个从某个终端连上的用户pkill -kill -t pts/0 ---------------------------------------------------------------- ...
- LINQ体验(11)——LINQ to SQL语句之Null语义和String/DateTime方法
在本系列中.主要介绍LINQ to SQL基础的东西,由于LINQ太强大了,它对我们寻常使用不同的数据源有着不同的内容,其包含对于SQL Server 数据库的LINQ to SQL:对于XML 文档 ...
- protobuf-net precompile
之前游戏为了解决在ios自动更新的问题,想到使用了将游戏代码打包成dll,使用反射加载执行的办法.办法想好了以后,一直没有做测试.上周不知道什么原因,终于有人去测试了,结果发现报错了.我当时觉得有点意 ...
- 装饰者模式的学习（c#） EF SaveChanges() 报错（转载） C# 四舍五入 保留两位小数（转载） DataGridView样式生成器使用说明 MSSQL如何将查询结果拼接成字符串 快递查询 C# 通过smtp直接发送邮件 C# 带参访问接口，WebClient方式 C# 发送手机短信 文件 日志 写入 与读取
装饰者模式的学习(c#) 案例转自https://www.cnblogs.com/stonefeng/p/5679638.html //主体基类 using System;using System.C ...
- 运行Java -jar somefile.jar时发生了什么（二）
(6)Java.c中的LoadMainClass 位置jdk/src/share/bin/java.c 该方法负责载入main函数所在的类. 该方法首先载入sun.launcher.LauncherH ...
- leetCode 60.Permutation Sequence （排列序列） 解题思路和方法
The set [1,2,3,-,n] contains a total of n! unique permutations. By listing and labeling all of the p ...
- Cache-control no-transform Robots Exclusion Protocol
蜘蛛协议 <今日头条>支持蜘蛛协议(Robots Exclusion Protocol)"ToutiaoSpider",同时,我们尊重所有的网络媒体,如媒体不希望内容被 ...
- 不仅开源，而且对企业应用完全免费！ExtAspNet弃用GPL v2，拥抱Apache License 2.0（转）
不仅开源,而且对企业应用完全免费!ExtAspNet弃用GPL v2,拥抱Apache License 2.0(转) 提出问题 ExtAspNet开源以来,一直坚持开源免费的原则,但是其GPL v2的 ...