Javascript: Event Binding Model Introduction

DavyJones2010

浏览: 154233 次
性别:
来自: 杭州

最近访客更多访客>>

zhihaoma

xiaoji123pt

dingdaxin

vv404725784

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

Javascript Event Handler Event Binding Model

1. Two ways to bind a method to an event.

1. Using tag binding:

<html>
	<head>
		<script type="text/javascript">
		function display(){
			var str = "hello world";
			alert(str);
		}
		</script>
	</head>
	<body onmousedown="display();">
	</body>
</html>

2. Using callback function assignment:

<html>
	<head>
		<script type="text/javascript">
		function display(){
			var str = "hello world";
			alert(str);
		}
		document.onmousedown = display;
		</script>
	</head>
	<body>
	</body>
</html>

Comments;

1. The first approach is more flexiable cause we can assign callbacks dynamically.

2. The second approach is more intuitive compared with the first.

Example:

1. Works fine.

<html>
	<head>
		<script type="text/javascript">
		function display(){
			var str = "hello world";
			alert(str);
		}
		</script>
	</head>
	<body>
		<button onclick="display();" value="CLICK ME" />
	</body>
</html>

2. Cannot find the object cause the html parse procedure is from front to end.

<html>
	<head>
		<script type="text/javascript">
		// function display(){
		// 	var str = "hello world";
		// 	alert(str);
		// }
		var btn = document.getElementById("button");
		alert(btn);
		</script>
	</head>
	<body>
		<input type="button" id="button" value="click me" />
	</body>
</html>

// Would alert NULL.
// Cause when we execute the script, the button hasn't been initialized yet.
// If we move the scriptlet to the end of <body> tag, it works fine.

3. A better solution for loading null.

<html>
	<head>
		<script type="text/javascript">
		function display(){
			var str = "hello world";
			alert(str);
		}
		function init(){
			var btn = document.getElementById("button");
			btn.onclick = display;  //Callbacks binding.
		}
		</script>
	</head>
	<body onload="init();">
		<input type="button" id="button" value="click me" />
	</body>
</html>

Below is using a anonymous function.

<html>
	<head>
		<script type="text/javascript">
		function init(){
			var btn = document.getElementById("button");
			btn.onclick = function(){
				var str = "hello world";
				alert(str);
			};
		}
		</script>
	</head>
	<body onload="init();">
		<input type="button" id="button" value="click me" />
	</body>
</html>

P.S.

1. For event handler, an event object will be passed into it.

For IE/Firefox, code below will both works fine. Cause there will be an inner event object named 'event' passed into the callbacks.

<html>
	<head>
		<script type="text/javascript">
		function init(){
			var btn = document.getElementById("button");
			btn.onclick = display;
		}
		function display(){
			var str = "hello world";
			alert(event.type + " " + str)
		}
		</script>
	</head>
	<body onload="init();">
		<input type="button" id="button" value="click me" />
	</body>
</html>

2. For Firefox, code below works fine but it is not the case when using IE

<html>
	<head>
		<script type="text/javascript">
		function init(){
			var btn = document.getElementById("button");
			btn.onclick = display;
		}
		function display(event){
			var str = "hello world";
			alert(event.type + " " + str)
		}
		</script>
	</head>
	<body onload="init();">
		<input type="button" id="button" value="click me" />
	</body>
</html>

<html>
	<head>
		<script type="text/javascript">
		function init(){
			var btn = document.getElementById("button");
			btn.onclick = display;
		}
		function display(event1){
			var str = "hello world";
			alert(event1.type + " " + str)
		}
		</script>
	</head>
	<body onload="init();">
		<input type="button" id="button" value="click me" />
	</body>
</html>

// click hello world

So we have to take the different implementation of JS into account when developing multi-browser app.

In IE, "event" is a pre-defined object like that of "document" that is instantiated by SYSTEM/Browser automatically.

In FIREFOX, an event object will be instantionlized and passed into the callback function.

3. BTW, what if we want to pass params into callbacks?

How can we handle the existance of "event" and self-defined param?

<html>
	<head>
		<script type="text/javascript">
		function init(){
			var btn = document.getElementById("button");
			btn.onclick = display;
		}
		function display(){
			var str = "hello world";
			alert(this.value + " " + str);
		}
		</script>
	</head>
	<body onload="init();">
		<input type="button" id="button" value="click me" />
	</body>
</html>

Comments: Here, "this" represents the object that called this function that is the button.

Result would be : "click me hello world".

So we don't have to pass param into the callbacks, cause it can get everything, every param it needs.

If it need get param that inbedded in button, just use key word "this".

If it need get param that of other controls, just use "document.get***By***();".

分享到：

Javascript: Object Model & Function Mode ... | DesignPattern : Observer

2013-08-10 11:52
浏览 810
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论