具体可参考http://blog.csdn.net/myjlvzlp/article/details/8121696
在IE浏览器中添加或删除事件用attachEvent、detachEvent。
在其他标准浏览器中则用addEventListener、removeEventListener。
下面的对事件的添加和删除做了封装。直接看代码吧！
/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}
为HTML元素添加一个事件监听:
1.利用元素事件属性添加事件处理函数
2.利用attachEvent方法添加事件处理函数
这两种方法处理事件有很大区别的,事件属性只能赋值一种方法，即：
button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
这样后面的赋值语句就将前面的onclick属性覆盖了,而添加事件监听就可以并行。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript事件监听示例</title>
</head>
<body>
<button id="mybtn">测试</button>
<script type="text/javascript">
/// <summary>
/// 添加事件监听
/// </summary>
/// <param name="target">载体</param>
/// <param name="type">事件类型</param>
/// <param name="func">事件函数</param>
function addEventHandler(target, type, func) {
if (target.addEventListener){
target.addEventListener(type, func, false);
}else if (target.attachEvent){
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
/// <summary>
/// 移除事件监听
/// </summary>
/// <param name="target">载体</param>
/// <param name="type">事件类型</param>
/// <param name="func">事件函数</param>
function removeEventHandler(target, type, func) {
if (target.removeEventListener){
target.removeEventListener(type, func, false);
}else if (target.detachEvent){
target.detachEvent("on" + type, func);
}else{
delete target["on" + type];
}
}
var mybtn = document.getElementById("mybtn");
var mybtnClick = function() {
alert(1);
};
addEventHandler(mybtn, "click", mybtnClick);
addEventHandler(mybtn, "click", function() { alert(2); } );
addEventHandler(mybtn, "click", function() { alert(3); } );
removeEventHandler(mybtn, "click", function() { alert(2); } ); // 移不出(原因：此处为一个新的匿名对象，其实是移除了该匿名对象)
removeEventHandler(mybtn, "click", mybtnClick); // 能移除(原因：此处为对象引用，移除引用对象)
</script>
</body>
</html>
添加事件监听:不仅可以对同一事件添加多个处理函数对象，而且不会彼引覆盖，也不会覆盖通过属性添加的函数对象。
他们会按序运行，在IE中：先添加的后运行，而在FF中先添加的先运行。
经过测试IE(8)中先显示3再显示2，而firefox(3)中则先显示2再显示3
下面说一下，原生态事件监听的commonjs写法
添加事件监听的时候，返回处理的方法。
删除事件监听时，只能通过返回的方法才可以，代码如下
<!DOCTYPE HTML>
<html>
<head>
<title>timeline脚本</title>
<script type="text/javascript" src="scripts/lib/sea-2.2.3.js"></script>
<script type="text/javascript">
seajs.config({
base:'./scripts',
alias:{
'jQuery': 'lib/jquery-1.8.1.js',
'Raphael': 'lib/raphael-2.1.3.js',
'Buzz': 'lib/buzz-1.1.8.js'
}
});
seajs.use('main', function(main){
main.start();
});
</script>
</head>
<body>
<canvas id="myview">您的浏览器不支持，请更换现代浏览器</canvas>
<div id="extra"></div>
<div id="test" style="width: 200px; height: 200; background: red;">Test</div>
</body>
</html>
define(function(require, exports, module){
var Hous = require("lib/hous");
exports.start = function(){
var test = document.getElementById("test");
this.addEvent(test, "click", this.myclick);
//注意这里方法的返回值，这是重点哦
var my = this.addEvent(test, "mouseover", function(){
alert("1");
});
//只有通过这个返回方法，才可以进行事件的删除
this.delEvent(test, "mouseover", my);
};
exports.myclick = function(){
alert("添加事件");
};
exports.mymouseover = function(){
alert("鼠标经过事件");
};
exports.addEvent= function(target, name, fn){
var call = function(){
fn.apply(target, arguments);
};
if(target.dom){
target = target.dom;
}
if(window.attachEvent){
target.attachEvent("on" + name, call);
}else if(window.addEventListener){
target.addEventListener(name, call, false);
}else{
target["on" + name] = call;
}
return call;
};
exports.delEvent=function(target, name, fn){
if(window.detachEvent){
target.detachEvent("on" + name, fn);
}else if(window.removeEventListener){
target.removeEventListener(name, fn, false);
}else if(target["on" + name] == fn){
target["on" + name] = null;
}
};
});
相关推荐
event 添加事件，删除事件，以及冒泡的屏蔽，并都做了兼容性的处理，getByClass 对原生获取class的封装，鼠标拖拽事件的封装，键盘事件的封装
下面将详细解释如何使用原生JavaScript封装添加和删除class的实例。 一、添加class `addClass`函数用于向指定元素`ele`添加一个或多个class。函数的主要逻辑是： 1. 首先，通过`className.split(' ')`将元素当前...
【原生JS】.zip 文件包含了关于使用原生JavaScript开发的网易严选相关技术细节，主要聚焦于JavaScript语言的核心概念和应用。JavaScript是一种广泛应用于Web开发的脚本语言，尤其在网页交互、动态内容更新以及前后端...
本文将深入探讨如何使用纯JavaScript实现动态的行添加与删除功能，尤其关注在特定条件下的按钮显示逻辑。这个功能通常应用于表格或者列表的管理，比如在线表单、任务列表等。 首先，我们需要创建一个基础的HTML结构...
9. **图表库**：虽然题目要求是原生JS，但可以提一下，虽然没有使用预封装的库，JavaScript也可以自己实现简单的图表绘制，例如折线图、柱状图等，通过计算和绘图来展示数据。 10. **Web组件**：利用Web Components...
JavaScript提供了`document.createElement`，`appendChild`，`removeChild`等方法来动态创建、添加或删除HTML元素。为了构建对话框，我们需要用这些方法来构造对话框的结构，包括标题、内容区域、按钮等。 2. **CSS...
- `appendChild` 和 `removeChild`：动态地向页面添加或删除元素，如添加新商品到购物车或移除已选择的商品。 2. **事件监听与处理**： - `addEventListener`：为按钮或其他交互元素添加点击事件监听器，当用户...
6. **函数封装**：将重复的逻辑封装成函数，比如添加商品到购物车的函数、删除商品的函数，提高代码的可读性和复用性。 7. **错误处理**：良好的代码实践还包括错误处理，确保在出现异常情况时，程序能够给出适当的...
\n\n综上所述，这个“原生js写的一个轮播图”项目展示了JavaScript在前端组件开发中的强大能力，通过面向对象编程实现了可复用和易于维护的代码结构，结合动态加载、动画效果和用户交互，构建了一个功能完善的轮播图...
原生JavaScript开发能帮助我们更好地控制和美化这些表单，使其更具交互性和吸引力。本文将深入探讨如何利用JavaScript来提升表单的用户体验，使其“亮起来”。 一、表单事件处理 原生JavaScript允许我们直接对表单...
- 封装DOM选择和操作：如获取元素、添加/删除类名、事件绑定等，使代码更简洁，减少对原生API的直接调用。 - 动画效果：封装CSS动画和JavaScript动画，实现平滑过渡和响应式行为。 6. **错误处理** - 错误捕获：...
这里我们将深入探讨如何使用原生JavaScript封装一个兼容JSONP的Ajax函数。 首先，让我们分析提供的代码片段。这个封装的Ajax函数接受几个关键参数： 1. `opt.type`：定义HTTP请求类型，通常是POST或GET。 2. `opt....
通过学习这个“原生js轮播”项目，你可以深入了解如何使用JavaScript实现动态的网页效果，同时提升你的DOM操作、事件处理和函数封装等技能。在实践中，你可以根据需求对这个基础轮播图进行扩展，例如添加无限循环、...
8. **CSS样式**：虽然主要使用原生JS，但项目中也引用了Bootstrap的样式，以提升界面美观度。例如，弹幕的布局、动画效果等可能涉及CSS的使用。 9. **动画效果**：通过修改元素的CSS `transform`属性，配合`...
在JavaScript（JS）中，对HTML表格进行操作是常见的需求，包括添加新的行或删除现有的行。这在网页动态交互中非常有用，比如用户输入数据的管理或者展示数据的增删改查功能。以下我们将详细讲解如何使用JavaScript来...
为了使效果更接近真实的打字体验，我们可以添加删除光标（即闪烁的下划线）和回车延迟的效果。这里是一个改进版的实现： ```javascript function blinkCursor() { if (isTyping) { typingTextElement.style....