js自定义事件 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		// 核心代码
		function EventTarget () {
			this.handlers = {}
		}
		EventTarget.prototype = {
			constructor: EventTarget,
			// 自定义事件的名字，事件处理程序
			addEvent: function (type, handler) {
				// 初始化新创建的自定义事件
				if(typeof this.handlers[type] === 'undefined') {
					this.handlers[type] = []
				}
			  this.handlers[type].push(handler)
				console.log(this.handlers)
			},
			fireEvent: function (eventObject) {
				if(!eventObject.type) {
					eventObject.target = this
				}
				console.log(eventObject)
				
				if (this.handlers[eventObject.type] instanceof Array) {
					var handlers = this.handlers[eventObject.type]
					for (var i = 0; i < handlers.length; i++) {
						handlers[i](eventObject)
					}
				}
			},
			removeEvent: function(type, handler) {
				if(this.handlers[type] instanceof Array) {
					var handlers = this.handlers[type]
					for (var i = 0; i < handlers.length; i++) {
						if(handlers[i] === handler) {
							break
						}
					}
				  handlers.splice(i, 1)
				}
			}
		}

		// 定义事件处理程序
		function test (event) {
			alert('事件触发:'+ event.message)
		}
		function test2 (event) {
			console.log('事件触发:' + event.message)
		}
		var target = new EventTarget()
		// 定义test事件
		target.addEvent('test', test)
		// 触发test事件
		target.fireEvent({type: 'test', message: 'test meaasge hello'})
		target.fireEvent({type: 'test', message: 'test message world'})

		// test2事件
		target.addEvent('test2', test2)
		target.fireEvent({type: 'test2', message: 'test2 message'})

		// target.removeEvent('hello': handleHello)
	</script>
</body>
</html>
posted @ 2017-10-06 11:22  wmui  阅读(280)  评论(0)    收藏  举报