这个方法保证所有的W3C推荐的事件模型,addEventListener和IE的遗留attachEvent都正常执行
var addEvent = (function () {
var filter = function(el, type, fn) {
for ( var i = 0, len = el.length; i < len; i++ ) {
addEvent(el[i], type, fn);
}
};
if ( document.addEventListener ) {
return function (el, type, fn) {
if ( el && el.nodeName || el === window ) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
filter(el, type, fn);
}
};
}
return function (el, type, fn) {
if ( el && el.nodeName || el === window ) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if ( el && el.length ) {
filter(el, type, fn);
}
};
})();
// usage
addEvent( document.getElementsByTagName('a'), 'click', fn);
分享到:
相关推荐
事件上报addEvent.vue
该集合包含了核心的几个函数:addEvent()、removeEvent()、handleEvent()和fixEvent(),用以添加、移除、处理事件以及修正不同浏览器间的事件对象差异。 addEvent()函数是一个跨浏览器的事件监听器,其作用是在元素...
### 驱动事件的addEvent.js代码解析 #### 一、概述 在现代Web开发中,事件处理是实现交互式用户体验的关键技术之一。不同浏览器对DOM(文档对象模型)事件的支持有所不同,为了确保跨浏览器的兼容性,开发者通常会...
本文将深入探讨如何实现最佳的`addEvent`事件绑定方法,以及如何解决与之相关的内存泄漏和兼容性问题。 首先,让我们回顾一下传统事件绑定的方式,例如在给定的代码示例中,通过循环将`openClose`函数直接赋值给`H3...
事件监听器 如果您需要支持旧版IE,则addEventListener()与addEvent()简单函数。安装npm install event-listener用法var listen = require ( 'event-listener' )// Returns an object with a .remove() methodvar ...
2. **事件绑定**:MooTools 使用 `addEvent` 方法来绑定事件,例如,我们可以将点击事件绑定到抽奖按钮上,当用户点击时触发抽奖逻辑。 3. **随机数生成**:抽奖的关键在于生成随机数,MooTools 通过 `Math.random...
本文将详细介绍十个最常用的自定义函数之一:`addEvent` 函数及其变体。 #### 二、`addEvent` 函数概述 `addEvent` 函数主要用于向 DOM 元素添加事件监听器。由于不同的浏览器对于事件绑定的支持存在差异,因此需要...
在这段代码中,我们定义了一个名为 `addEvent` 的通用函数,它接受三个参数:`obj` 表示要绑定事件的 DOM 元素,`type` 表示事件类型(如 click、mouseover 等),`fn` 表示事件处理函数。该函数首先检查目标对象...
jQuery的事件系统,特别是1.9.1版本,它在很大程度上受到了DeanEdwards的跨浏览器AddEvent()设计的影响。DeanEdwards的AddEvent()设计是一个早期尝试解决浏览器之间事件处理不兼容问题的方法。为了深入理解jQuery...
$('tween_button').addEvent('click', function() { $('tweener').tween('width', '300px'); }); }); ``` 在这个例子中,当用户点击按钮时,div的宽度会从当前值平滑地变为300像素。 除了`.tween()`,Mootools...
selector: 'app-addevent', templateUrl: './addevent.component.html', }) export class addeventComponent { ngOnInit() { } } 4. *.component.html引用 <input id="file" type="file" (change)=...
Mootools中的事件绑定非常直观且高效,其`addEvent`方法与jQuery中的`bind`或`on`类似,用于将事件监听器附加到DOM元素上。例如,以下代码演示了如何使用`addEvent`方法为`<a>`元素绑定点击事件: ```javascript $...
然后,讨论了一个通用的、跨浏览器的绑定方法,包括 John Resig 和 Dean Edward 所写的 addEvent() 函数。 绑定大事监听函数的通用方法是 JavaScript 编程中非常重要的一部分。一个好的 addEvent() 方法应当达到...
- `DOMReady`: 为了确保代码在DOM加载完成后再执行,通常将代码包裹在`window.addEvent('domready', function() {...})`中。 - 将代码封装在函数内:避免全局变量污染,提高代码可维护性。例如,`function init() {....
addEvent(element, ‘click’, getBeerById); function getBeerById(e) { var id = this.id; asyncRequest(‘GET’, ‘beer.uri?id=’ + id, function(resp) { // Callback response. console.log(‘Requested Beer:...
$('morph_start').addEvent('click', morphStart.bind(morphObject)); $('morph_reset').addEvent('click', morphReset.bind(morphObject)); }); ``` 此外,`Fx`类提供了一系列可配置的选项以控制动画行为。例如...
var addEvent = function (el, type, callback) { // ... }; // 移除事件 var removeEvent = function (el, type, callback) { // ... }; // 拖动管理器 var dragManager = { clientY: 0, dragObj: null, ...