看代码， 如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// inner的响应函数
var clickInner = function(e){
alert(1.1);
};
// banner的响应函数
var clickBanner = function(e){
alert(2.1);
}
// body的响应行数
var clickBody = function(e){
alert(3.1);
}
// 注册事件响应
var addEventHandler = function(){
var inner = document.getElementById('inner');
var banner = document.getElementById('banner');
var cancelEvevntBtn = document.getElementById('cancelEvevnt');
if(inner.addEventListener){
inner.addEventListener('click',clickInner,true);
banner.addEventListener('click',clickBanner,true);
document.body.addEventListener('click',clickBody,true);
}else if(inner.attachEvent){
inner.attachEvent('onclick',clickInner);
}
}
// 删除事件响应
var removeEventHandler = function(){
var inner = document.getElementById('inner');
var banner = document.getElementById('banner');
var cancelEvevntBtn = document.getElementById('cancelEvevnt');
if(inner.removeEventListener){
inner.removeEventListener('click',clickInner,true);
banner.removeEventListener('click',clickBanner,true);
document.body.removeEventListener('click',clickBody,true);
}else if(inner.detachEvent){
inner.detachEvent('onclick',clickInner);
}
}
// 删除捕获事件响应，IE不知捕获事件流，所以IE下无效
var removeCapEventHandler = function(){
var banner = document.getElementById('banner');
if(banner.removeEventListener){
banner.removeEventListener('click',clickBanner,true);
banner.addEventListener('click',function(e){
alert(2.1);
e.stopPropagation();
},true);
}
}
// 删除冒泡的事件响应
var removeBubEventHandler = function(){
window.clickHandlerOnDiv = function(e){
alert(2);
var ev = e || event;
if(ev.stopPropagation){
ev.stopPropagation();
}else {
ev.cancelBubble = true;
}
}
}
// 给按钮增加响应事件
document.onreadystatechange = function () {
if(document.readyState=="complete") {
var addBtn = document.getElementById('addEvent');
var removeBtn = document.getElementById('removeEvent');
var removeCaptureEvent = document.getElementById('removeCaptureEvent');
var removeBubbleEvent = document.getElementById('removeBubbleEvent');
if(addBtn.addEventListener){
addBtn.addEventListener('click',addEventHandler,false);
removeBtn.addEventListener('click',removeEventHandler,false);
removeCaptureEvent.addEventListener('click',removeCapEventHandler,false);
removeBubbleEvent.addEventListener('click',removeBubEventHandler,false);
}else if(addBtn.attachEvent){
addBtn.attachEvent('onclick',addEventHandler);
removeBtn.attachEvent('onclick',removeEventHandler);
removeBubbleEvent.attachEvent('onclick',removeBubEventHandler);
}
}
}
clickHandlerOnBody = function(e){
alert(3);
}
clickHandlerOnDiv = function(e){
alert(2);
}
clickHandlerOnInner = function(e){
alert(1);
}
</script>
<title>Demo System</title>
</head>
<body id="body" onclick="clickHandlerOnBody()">
body
<div id='banner' style="width:100px;height:100px;background-color:red;"
onclick="clickHandlerOnDiv(event)">
banner
<div id='inner' style="width:50px;height:50px;background-color:yellow;"
onclick="clickHandlerOnInner()">inner</div>
</div>
<br>
<input id="addEvent" value="添加事件监听" type="button"/>
<input id="removeEvent" value="取消事件监听" type="button"/>
<input id="removeCaptureEvent" value="停止捕获事件流" type="button"/>
<input id="removeBubbleEvent" value="停止冒泡事件流" type="button"/>
</body>
</html>
对部分代码进行说明：
1.var ev = e || event;
firefox将消息对象作为参数传递到响应函数（e），而IE则定义为全局变量event（window下）。
2.window.clickHandlerOnDiv
全局方法可用通过这种方式进行重写。
3.clickHandlerOnDiv(event)
通过HTML注册事件响应也是可以传递参数的。
分享到：
相关推荐
使用原型 prototype 机制或 apply 和 call 方法去实现较简单，建议使用构造函数与原型混合方式。 This 对象： this 总是指向函数的直接调用者（而非间接调用者）。如果有 new 关键字，这指向 new 出来的那个对象。...
2. **线程生命周期**：需手动终止不再使用的Worker，以节省资源。 3. **性能优化**：大计算量的任务适合放在Worker中，小任务或频繁通信可能增加开销。 ### 五、最佳实践 1. **合理拆分任务**：避免一次性发送大量...
3. 函数传递对象：理解值传递和引用传递的概念，以及对象作为参数传递的机制。 4. 构造方法和析构方法：学习类的初始化和清理过程。 5. static关键字：了解静态变量和静态方法的用法，以及类静态成员的特性。 五、...
3. 防抖（debounce）和节流（throttle）的区别及实现： 防抖指的是在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流指的是规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多...
函数是JavaScript中的第一等公民，可以作为参数传递，也可以作为返回值。函数表达式和函数声明有区别，函数内部的变量只在函数内部可见，这就是作用域。ES6引入了块级作用域，通过`let`和`const`关键字实现。 四、...
JQuery的核心优势在于它的易用性，它通过提供一套简洁的API，让开发者可以快速实现常见的DOM操作、事件处理和动画效果。JQuery的使用大大减少了代码量，提高了开发效率，是现代Web开发的必备技能之一。 二、JQuery...
创建Web Worker主要通过`new Worker()`构造函数实现。你需要提供一个JavaScript脚本的URL作为参数，这个脚本将在Worker线程中运行。例如： ```javascript var worker = new Worker('worker.js'); ``` 2. **通信机制*...
3.6.2 使用asort()函数和ksort()函数对相关数组排序 3.6.3 反向排序 3.7 多维数组的排序 3.7.1 用户定义排序 3.7.2 反向用户排序 3.8 对数组进行重新排序 3.8.1 使用shuffle()函数 3.8.2 使用array_reverse()...
3.6.2 使用asort()函数和ksort()函数对相关数组排序 3.6.3 反向排序 3.7 多维数组的排序 3.7.1 用户定义排序 3.7.2 反向用户排序 3.8 对数组进行重新排序 3.8.1 使用shuffle()函数 3.8.2 使用array_reverse()...
3.6.2 使用asort()函数和ksort()函数对相关数组排序 3.6.3 反向排序 3.7 多维数组的排序 3.7.1 用户定义排序 3.7.2 反向用户排序 3.8 对数组进行重新排序 3.8.1 使用shuffle()函数 3.8.2 使用array_reverse()函数 ...
1.3.4 使用print()函数 7 1.3.5 理解不同的引号 8 1.4 串联两个字符串 10 1.5 用不同的方法串联字符串 11 1.6 本章小结 12 1.7 习题 13 第2章 数值与运算符 15 2.1 不同类型的数值 15 2.2 程序文件 17 2.2.1 使用...
在JavaScript中，我们可以使用原生DOM API或者第三方库如jQuery、React、Vue等来创建自定义弹窗。这里我们主要讨论使用纯JavaScript实现的方式。 1. **创建HTML结构**：首先，你需要在页面中创建一个隐藏的弹窗元素...
负责响应该事件的句柄函数可以有2个返回值（true 或 false）当返回值为false时，整个上传将被取消；当返回值为true时上传过程继续进行。而如果返回值为false，则通常是由一个uploadError事件所导致的。 注：官方...
**事件捕获**：与事件冒泡相反，事件首先触发顶层元素，然后向内传递直到到达最内层元素。 ### 原型链 原型链是JavaScript中用于实现继承的核心机制之一。每个对象都有一个指向其原型对象的内部指针。当试图访问一...
1. **独立作用域**：WebWorker的JavaScript执行环境与主线程完全隔离，它们不共享作用域，因此不能直接访问DOM节点，也无法访问全局变量和函数。 2. **异步脚本加载**：Worker的全局作用域提供`importScripts()`方法...
- **方法**：如`open()`用于建立请求，`send()`用于发送数据，`abort()`用于终止请求，`setRequestHeader()`设置请求头，`getResponseHeader()`获取响应头，`getAllResponseHeaders()`获取所有响应头。 - **属性**...
HTML5中的Web Workers是Web应用程序的一个重要特性，它允许在后台线程中执行脚本，以实现长时间运行的计算任务，而不会阻塞主线程，从而保持用户界面的响应性。这一特性对于处理大量数据、复杂的计算或者实时更新的...