具体可参考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实现动态的行添加与删除功能，尤其关注在特定条件下的按钮显示逻辑。这个功能通常应用于表格或者列表的管理，比如在线表单、任务列表等。 首先，我们需要创建一个基础的HTML结构...
下面小编就为大家带来一篇原生js封装添加class,删除class的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望对大家有所帮助
- 封装DOM选择和操作：如获取元素、添加/删除类名、事件绑定等，使代码更简洁，减少对原生API的直接调用。 - 动画效果：封装CSS动画和JavaScript动画，实现平滑过渡和响应式行为。 6. **错误处理** - 错误捕获：...
在JavaScript（JS）中，对HTML表格进行操作是常见的需求，包括添加新的行或删除现有的行。这在网页动态交互中非常有用，比如用户输入数据的管理或者展示数据的增删改查功能。以下我们将详细讲解如何使用JavaScript来...
在本文中，我们将深入探讨如何使用原生JavaScript封装一个AJAX（Asynchronous JavaScript and XML）函数，并且这个函数会兼容JSONP（JSON with Padding）模式。AJAX是一种在不刷新整个页面的情况下与服务器交换数据...
本文将对比原生JavaScript和jQuery两种方式在DOM操作上的差异和优劣。 ### 一、创建元素节点 **原生JavaScript** 使用`document.createElement()`方法创建元素节点，例如创建一个`<p>`元素： ```javascript var ...
"Js高人自编的JavaScript小型工具库" 是一个由资深JavaScript开发者编写的代码集合，旨在提供一系列实用的功能，以简化常见的编程任务，提高开发效率。 这个工具库可能包含了各种常用的函数和方法，如： 1. **数组...
这包括创建元素、修改元素内容、添加和删除类名以改变样式，以及监听用户事件。 - `document.createElement()`：创建新的HTML元素。 - `element.innerHTML`：获取或设置元素的HTML内容。 - `element.classList....
- **扩展JavaScript**：JQuery是JavaScript的一个库，它封装了许多JavaScript的原生功能，提供更友好的API，减少代码量。 - **兼容性**：JQuery解决了不同浏览器间的JavaScript实现差异，使得开发者无需担心跨...
此外，对于DOM操作，框架可能提供了一套统一的API，如添加、删除和查找DOM元素，以及修改元素属性和样式，这样开发者无需直接操作原生DOM，降低了代码的复杂性。 四、模块化与加载机制 现代前端开发强调模块化，...
用JavaScript原生封装的一个jQuery库，可供大家学习底层封装原理。有addClass 添加类，removeClass 删除类，toggleClass 切换类，each 遍历函数，show() 显示， hide() 隐藏，toggle() 切换， html() 获取或设置html...
8. **jQuery库**：虽然现在原生JS已足够强大，但jQuery仍然是很多开发者喜爱的库，因为它简化了DOM操作、事件处理和动画制作。如果你看到使用jQuery的特效，可以了解其API和它如何使代码更简洁。 9. **模块化**：...
虽然原生JavaScript足够强大，但jQuery等库简化了DOM操作和事件处理，让特效实现更为便捷。jQuery的动画API和插件生态提供了丰富的特效选项。此外，像React、Vue、Angular这样的前端框架也提供了强大的组件化和虚拟...
通过DOM，我们可以动态修改页面元素，如改变文本、样式或添加删除元素，从而响应用户的操作。 3. **表单验证**：JavaScript可以实时验证用户在表单中输入的数据，提供即时反馈，避免提交无效数据。例如，使用`event...
JavaScript是一种广泛用于网页开发的脚本语言，它可以为网站添加交互性，包括创建各种类型的游戏。在这里，我们将分析这两个版本的游戏可能包含的关键知识点。 首先，我们从`easy.htm`开始。这个版本可能是一个初级...
这可以通过处理鼠标滚轮、触摸事件和键盘事件来实现。 8. **库和框架的支持**： 有一些现成的库，如`Perfect Scrollbar`、`SimpleBar`等，提供了封装好的解决方案，可以直接引入并快速实现自定义滚动条功能，减少...