Javascript: Event Binding Model Introduction

最新推荐文章于 2024-08-01 10:58:35 发布

原创最新推荐文章于 2024-08-01 10:58:35 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript #Event Handler #Event Binding Model #ViewUI

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了将方法绑定到HTML元素事件的两种主要方式：使用标签绑定和通过回调函数分配。并详细讨论了每种方法的优势及应用场景，同时提供了多个示例来展示如何在不同情况下正确地使用这些技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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***();".