笔记

最新推荐文章于 2025-01-16 13:26:55 发布

原创最新推荐文章于 2025-01-16 13:26:55 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了JavaScript中的事件对象(event)及其属性，如event.srcElement和event.target，并详细讲解了事件委托的概念及其实现方法。

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

event表示的是事件对象，当事件发生的时候，用来记录事件相关信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
	>
<script>
	window.onload = function() {
		var list = document.getElementById('list');
		var lis = list.children;
		var timer;
		//删除节点
		function removeNode(node) {
			node.parentNode.removeChild(node);
		}
		//赞分享
		function praiseBox(box,el) {
			var praiseElement = box.getElementsByClassName('praise-total');
			var oldTotal = parseInt(praiseElement.getAttribute('total'));
			var txt = el.innerHTML;
			var newTotal;
			if(txt == '赞'){
				newTotal = oldTotal + 1;
				praiseElement.innerHTML = (newTotal == 1) ? '我觉得很赞' : '我和' + oldTotal + '个人觉得很赞'；
				el.innerHTML = '取消赞'；
			}else {
				newTotal = oldTotal + 1;
				praiseElement.innerHTML = (newTtal == 0) ? '' : oldTotal + '个人觉得很赞'
				el.innerHTML = '赞'；
			}
			praiseElement.setAttribut('total',newTotal);
			praiseElement.style.display = (newTotal == 0) ? 'none' : 'block';

		}
		for(var i = 0,len = list.length; i < len; i++) {
			lis[i].onclick = function (e){
				var e = e || window.event;
				var el = e.srcElement;
				switch(el.className) {
					case 'close':
						removeNode(el.parentNode);
						break;
					case 'praise':
						praiseBox(el.parentNode.parentNode.parentNode,el);
					case 'btn btn-off'
						clearTimeout(timer)	
				}	
			}
			var textarea = lis[i].getElementsByTagName('textarea');
			textarea.onfocus = function(){
				this.parentNode.className = 'text-box text-box-on'
				this.value = (this.value == '评论') ？ '' : 'this.value'
			}
			textarea.onblur = function(){
				var me = this;

				if(this.value == ''){
					time = setTimeout(function (){
						me.parenNode.className = 'text-box';
						me.value = '评论'
					}，400)
					
				}
			}
			textarea.onkeyup = function(){
				var len = this.value.length;
				var p =this.parentNode;
				var btn = p.children[1];
				var word = p.children[2];
				if(len == 0 || len > 140) {
					btn.className = 'btn btn-off';

				}else {
					btn.className = 'btn';
				}
				word.innerHTML = len/140;
			}









		}
	}
</script>

</body>
</html>

event.srcElement返回触发事件的元素。

event.target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。