Let's analyze the five major JavaScript events together

This article brings you relevant knowledge about javascript, which mainly introduces some common events in JavaScript, including mouse events, keyboard events, page events, focus events, etc. I hope Helpful to everyone.

Related recommendations: javascript tutorial

Page events

Thinking : In what order are HTML pages loaded?

Answer: The page is loaded from top to bottom in the order in which the code is written.

Problems that may occur: If you use JavaScript to operate DOM elements before the page is loaded, a syntax error will occur.

Solution: Page events can change the execution timing of JavaScript code.

• load event: It is triggered after all tags in the body have been loaded. Since there is no need to consider the page loading order, it is often added when developing specific functions.
• unload event: Triggered when the page is closed, often used to clear references to avoid memory leaks.

Focus event

In web development, focus events are mostly used for form validation functions and are the most commonly used events. one.

For example, the text box gets focus to change the style of the text box, and when the text box loses focus, the data entered in the text box is verified, etc.

In order to let everyone better understand how to use focus events, the following is a demonstration to verify whether the user name and password are empty.

Code implementation

	nbsp;html>
	
	<meta>
	<title>验证用户名和密码是否为空</title>
	<style>
	body{background:#ddd;}
	.box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
	.btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;}
	.ipt{width:260px;padding:4px 2px;}
	.tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font-size:13px;}
	</style>
	
	
	<p></p>
	<p>
	</p><p><label>用户名：<input></label></p>
	<p><label>密　码：<input></label></p>
	<p><button>登录</button></p>
	
	<script>
	window.onload = function() {
	addBlur($(&#39;user&#39;)); // 检测id为user的元素失去焦点后，value值是否为空
	addBlur($(&#39;pass&#39;)); // 检测id为pass的元素失去焦点后，value值是否为空
	};
	function $(obj) { // 根据id获取指定元素
	return document.getElementById(obj);
	}
	function addBlur(obj) { // 为指定元素添加失去焦点事件
	obj.onblur = function() {
	isEmpty(this);
	};
	}
	function isEmpty(obj) { // 检测表单是否为空
	if (obj.value === &#39;&#39;) {
	$(&#39;tips&#39;).style.display = &#39;block&#39;;
	$(&#39;tips&#39;).innerHTML = &#39;注意：输入内容不能为空! &#39;;
	} else {
	$(&#39;tips&#39;).style.display = &#39;none&#39;;
	}
	}
	</script>
	
	

The above is the detailed content of Let's analyze the five major JavaScript events together. For more information, please follow other related articles on the PHP Chinese website!