Javascript高级——6.自定义绑定和触发事件

最新推荐文章于 2022-07-08 00:11:00 发布

原创最新推荐文章于 2022-07-08 00:11:00 发布 · 624 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #javascript

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了JavaScript中自定义事件的用途，强调其在设计模式中使代码更优雅的应用。介绍了自定义事件的绑定（on）和触发（trigger）过程，并详细讲解了两种触发方式：分开触发与一次性触发多个事件。通过示例代码进行阐述。

用途：主要用在设计模式，能让代码看起来优雅

自定义绑定事件写法过程：on-->trigger

触发事件分为两种：1.分开触发；2.一次性触发多个

如下代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义事件</title>
<script src="jquery.js"></script>
</head>

<body>
    <input type="button" id="myipt" value="开门">
    <p id="doorState"></p>
    <p id="tempState"></p>
<script>
var myipt=$("#myipt");
myipt.on("click",function(){
	if(this.value=="开门"){
		doorState.trigger("openTheDoor");
		tempState.trigger("openTheDoor");
		this.value="关门";
		}
	else{
		doorState.trigger("closeTheDoor");
		tempState.trigger("closeTheDoor");
		this.value="开门";
		}	
	});//以上是绑定事件on,以下是触发事件trigger
var doorState=$("#doorState");
doorState.on("openTheDoor",function(){
	$(this).html("门是开着的");
	});
doorState.on("closeTheDoor",function(){
	$(this).html("门是关着的");
	});//这个是分开触发事件
var tempState=$("#tempState");
tempState.on({
	openTheDoor:function(){
		$(this).html("现在温度-1°");
		},
	closeTheDoor:function(){
		$(this).html("现在温度3°");
		}	
	});//这个是一次性触发多个事件
	
	
</script>
</body>
</html>