D 04_JS事件的两种绑定方式,元素绑定和DOM绑定

最新推荐文章于 2024-09-22 11:17:00 发布

Code_My_Dream

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量557

点赞数 1

文章标签： javascript 标签 JavaScript中的变量 DOM绑定方式

本文链接：https://blog.csdn.net/Code_My_Dream/article/details/73348174

版权

JS事件的两种绑定方式

1,元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数。

示例1：【为事件绑定一个无参函数】

示例2：【为事件绑定一个有参函数】

示例3：【为事件绑定一个有参函数-this】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" value="1111" οnclick="run1()" />
		<input type="text" value="2222" οnclick="run2('2222')"/>
		<input type="text" value="3333" οnclick="run3(this)"/>
		
	</body>
	
	<script type="text/javascript">
		function run1(){
			alert("你好呀")
		}
		function run2(str){
			alert(str)
		}
		function run3(obj){
			alert(obj.value())
		}
	</script>
</html>

示例4：【为事件绑定多个函数】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--多重调用,同时调用几个方法 -->
		<input type="text" name="uname" οnclick="run1(),run2(),run3()" />
		<script>
			function run1(){
				alert("ffff1")
			}
			function run2(){
				alert("ffff2")
			}
			function run3(){
				alert("ffff3")
			}
			
		</script>
	</body>
</html>

事件句柄绑定方式-

优点：①开发快捷

②传参方便

③可以绑定多个函数

缺点：JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护

2,DOM绑定方式

使用DOM的属性方式绑定事件。

示例1：【将下述绑定转为DOM方式绑定】

示例2：【使用DOM绑定方式，为文本框onclick事件绑定run1方法】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			function run1(){
				alert("加载完毕");
			}
			//DOM绑定方式,对象,事件属性
			//window.οnlοad=run1;
			
			//DOM绑定方式,可以绑多次,绑定多个方法
			window.οnlοad=function(){
				run1();
			}
		</script>
	</body>
</html>

DOM绑定方式-

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
			 * 用DOM表单将js和html完全分开,提高了代码的可维护性
			 */
			function run1(){
				alert("run1被调用了");
			}
			function run2(){
				alert("run2被调用了");
			}
			window.οnlοad=function (){
				var t1=document.getElementById("t1")
				t1.οnclick=function (){
					run1();
					run2();
				}
			}
		</script>
	</head>

	<body>

		<input type="text" id="t1" />

	</body>

</html>

优点：使得HTML代码和JS代码完全分离

缺点：①不能传递参数。解决：匿名函数是可以的

②一个事件只能绑定一个函数解决：匿名函数内部是可以绑定多个哈数。