scss 活动学习

Posted 2021-05-18

event learn
-----------


A [Pen](https://codepen.io/ellipse/pen/EmJjYv) by [Lusai](http://codepen.io/ellipse) on [CodePen](http://codepen.io/).

[License](https://codepen.io/ellipse/pen/EmJjYv/license).

<div id="b0" class="box">
	<div id="b1"  class="box">
		<div id="b2" class="box">
			<div id="b3" class="box">
				<div id="b4" class="box inner">
				</div>
			</div>
		</div>
	</div>
</div>

<table class="empty">
	<thead>
		<tr>
			<th>target</th>
			<th>phase</th>
			<th>currentTarget</th>
			<th>this</th>
			<th>listener</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5">Click on the boxes!</td>
		</tr>
	</tbody>
</table>

<a id='baidu' href="https://www.baidu.com">baidu</a>

var table = document.querySelector("table"),
  tbody = table.querySelector("tbody");

addEventListeners();

function addEventListeners() {
  window.addEventListener("click", clearLog, true);

  var innerBox = document.querySelector(".box.inner");

  var n = innerBox;
  while (n) {
    n.addEventListener("click", listener("c1"), true);
    n.addEventListener("click", listener("c2"), true);
    n.addEventListener("click", listener("b1"));
    n.addEventListener("click", listener("b2"));

    n = n.parentNode;
  }
  /* 阻止事件 */
  // window.addEventListener('click', e => { e.stopPropagation(); }, true);
  window.addEventListener("click", listener("c1"), true);
  window.addEventListener("click", listener("c2"), true);
  window.addEventListener("click", listener("b1"));
  window.addEventListener("click", listener("b2"));
  /* 阻止默认事件 */
  window.addEventListener("click", e => { e.preventDefault(); }, true);
}



function listener(id) {
  return function(e) {
    log(e.eventPhase, e.currentTarget, this, e.target, id);
  };
}

function log(phase, currentTarget, _this, target, id) {
  var row = document.createElement("tr");

  td = document.createElement("td");
  td.innerHTML = formatNode(target);
  row.appendChild(td);

  switch (phase) {
    case Event.CAPTURING_PHASE:
      phase = "capturing";
      break;
    case Event.AT_TARGET:
      phase = "at target";
      break;
    case Event.BUBBLING_PHASE:
      phase = "bubbling";
      break;
  }
  var td = document.createElement("td");
  td.innerHTML = phase;
  row.appendChild(td);

  td = document.createElement("td");
  td.innerHTML = formatNode(currentTarget);
  row.appendChild(td);

  td = document.createElement("td");
  td.innerHTML = formatNode(_this);
  row.appendChild(td);

  td = document.createElement("td");
  td.innerHTML = id;
  row.appendChild(td);

  tbody.appendChild(row);
}

function formatNode(n) {
  var out;

  if (n == window) out = "window";
  else {
    out = n.nodeName.toLowerCase();
    if (n.id) out += "#" + n.id;
  }

  return out;
}

function clearLog() {
  tbody.innerHTML = "";
  table.classList.remove("empty");
}

$col-bg: #f3f3f3;
$col-outer-box: #bbb;
$sp: 40px;

html {
	//pointer-events: none;
}
body {
	margin: 20px 0 0;
	background-color: $col-bg;
	color: #9a9796;
	//pointer-events: none;
	
	display: flex;
	> * {
		flex: 0 0 auto;
		&:first-child {
			margin-right: 20px;
		}
	}
	justify-content: center;
	align-items: flex-start;
	
	font-family: monospace;
	font-size: 13px;
}

.box {
	display: inline-block;
	font-size: 0;
	padding: $sp;
	
	.inner {
		padding: 0;
		width: $sp;
		height: $sp;
	}
	
	transition: background-color 0.3s;
	cursor: pointer;
	
	position: relative;
	&::after {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		width: $sp;
		line-height: $sp;
		text-align: center;
		
		font-size: 14px;
		//font-family: monospace;
		
		color: #000;
		
		opacity: 0;
		transition: opacity 0.3s;
	}
}

body > .box {
	background-color: $col-outer-box;
	&::after {
		content: 'b0';
		opacity: 1;
	}
	> .box:hover {
		background-color: lighten($col-outer-box, 5%);
		&::after {
			content: 'b1';
			opacity: 1;
		}
		> .box:hover {
			background-color: lighten($col-outer-box, 10%);
				&::after {
				content: 'b2';
				opacity: 1;
			}
			> .box:hover {
				background-color: lighten($col-outer-box, 15%);
				&::after {
					content: 'b3';
					opacity: 1;
				}
				> .box:hover {
					background-color: lighten($col-outer-box, 20%);
					&::after {
						content: 'b4';
						opacity: 1;
					}
				}
			}
		}
	}
}

table {
	border-collapse: collapse;
	th, td {
		padding: 5px;
	}
	th {
		padding-top: 0;
		text-align: left;
	}
	&.empty tbody > tr:first-child {
		text-align: center;
	}
}