笔记

最新推荐文章于 2021-04-15 13:40:41 发布

cico_new

最新推荐文章于 2021-04-15 13:40:41 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/cico_new/article/details/79157615

版权

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 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document

层次。也就是说。我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。

使用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序，

cico_new

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记

event表示的是事件对象，当事件发生的时候，用来记录事件相关信息。Examples > window.onload = function() { var list = document.getElementById('list'); var lis = list.children; var timer; //删除节点 function removeN
复制链接

扫一扫