您的位置：首页 > Web前端 > JavaScript

Javascript之自定义事件

2015-06-18 17:06 766 查看

　　1、JS自定义事件

　　js自定义事件基本思路：定义一个数组，当添加事件的时候，push进去这个事件的处理函数；当执行的时候，从头遍历这个数组中每个事件处理函数，并执行。

　　当多个事件以及对应数据处理函数添加后，最终会得到一个类似下面的数据结构的对象：

listener = {
'click': [fun1, fun2],
'dbclick': [fun3, fun4],
'myevent': [fun5]
}

　　因此，如果脱离了DOM，纯粹在数据层自定义事件的话，我们只要构建、遍历和删除 listener 对象即可。

　　1.1 函数式实现

　　函数式实现就是定义添加事件、触发事件和删除事件的三个方法，在需要的地方直接调用这些方法。

var listener = {};
var addEvent = function(type, fn) {
// 添加
};
var fireEvent = function(type) {
// 触发
};
var removeEvent = function(type, fn) {
// 删除
};

　　这种实现方式的缺点是：过多使用全局变量，方法无级联。

　　1.2 字面量实现

　　为了减少全局变量，我们可以采用对象字面量的方式。

　　完整的字面量实现方式的代码如下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<button id="mybutton">Click</button>
<div style="background-color: darkgray; width:500px;height: 400px;" id="result"></div>

<p>
<input type="button" id="button1" value="触发alert事件" />
<input type="button" id="button2" value="清除第一个alert" />
<input type="button" id="button3" value="清除所有alert" />
</p>

<p>
<input type="button" id="button4" value="触发基于原型的自定义事件"/>
<input type="button" id="button5" value="触发基于[伪]DOM的自定义事件"/>
<input type="button" id="button6" value="删除基于[伪]DOM的自定义事件"/>
</p>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript">
var btn = document.getElementById('mybutton'),
result = document.getElementById('result');
function triggerDiv1() {
result.innerHTML += '触发了一次插件方式自定义事件' + '<br/>';
}

function triggerDiv2() {
result.innerHTML += '再次触发了插件方式自定义事件' + '<br/>';
}

//封装
div = $(btn);

//绑定两次回调，支持链式
div.add('customTrigger', triggerDiv1).add('customTrigger',  triggerDiv2);

btn.onclick = function() {
div.trigger('customTrigger');
}

var btn1 = document.getElementById('button1'),
btn2 = document.getElementById('button2'),
btn3 = document.getElementById('button3'),
fun1, fun2;
//添加自定义事件
Event.addEvent('objEvent', fun1 = function() {
result.innerHTML += '触发了一次字面量方式的自定义事件' + '<br/>';
}).addEvent('objEvent', fun2 = function() {
result.innerHTML += '再次触发了字面量方式的自定义事件' + '<br/>';
});

btn1.onclick = function() {
Event.triggerEvent('objEvent');
}

btn2.onclick = function() {
Event.removeEvent('objEvent', fun1);
result.innerHTML += '移除了字面量方式的自定义事件fun1' + '<br/>';
}

btn3.onclick = function() {
Event.removeEvent('objEvent');
result.innerHTML += '移除了所有字面量方式的自定义事件' + '<br/>';
}

var btn4 = document.getElementById('button4'),
proEvt = new EventTarget(),
onceFun;
proEvt.addEvents({
'once': function() {
result.innerHTML += 'once自定义事件只会触发一次' + '<br/>';
this.removeEvent('once');
},
'every': function() {
result.innerHTML += 'every自定义事件每次都会触发' + '<br/>';
}
});
btn4.onclick = function() {
proEvt.triggerEvents(['once', 'every']);
}

var fnClick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeType === 1) {
result.innerHTML += '点击类型：' + e.type + '<br/>';
$$(target).triggerEvent('show_result');
};
},
domFun1 = function() {
result.innerHTML += 'DOM自定义事件<br/>';
},
domFun2 = function() {
result.innerHTML += 'DOM自定义事件Again<br/>';
}

var btn5 = document.getElementById('button5');
$$(btn5).addEvent('click', fnClick).addEvent('show_result', domFun1).addEvent('show_result', domFun2);

var btn6 = document.getElementById('button6');
$$(btn6).addEvent('click', function() {
$$(btn5).removeEvent('show_result', domFun1).removeEvent('show_result', domFun2);
result.innerHTML += 'DOM自定义事件清除完成<br/>';
});
</script>
</body>

js自定义事件测试
参考文章：http://www.zhangxinxu.com/wordpress/?p=2330

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航