事件监测，顺便说一下超级牛逼的CSS平滑效果【转】

以前我们会用mouseover|mouseout事件来暗挫挫的实现hover效果，而现在用CSS伪选择器的:hover和:focus什么的就直接搞定了。想到这里，内心止不住的伤感啊……魔法师们坚持住！咳咳，当然，CSS也并不是万能的，有些事情还是要跟事件配合完成，比如下面这个例子，对鼠标指针进行定位。这是相当简单的了是不，我们先搞个绝对定位的小球元素，下面是它的HTML：

<div class="plot"></div>

这是它的CSS：

.plot {
  position:absolute;
  background:rgb(175,50,50);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: block;
  top:0;
  left:0;
}

我们监听并处理doucment的click事件，利用<a target="_blank" href="https://www.ancii.com/link/v1/7DZIIP7vza1Pnnr0kWwZDv5er6XiYcNn0bCTiOkQG8oGff3T6dSAiXiWG7biKYldlaBRAFbxx5cB3OO1RFCXBg/" rel="nofollow" title="PageX">PageX</a>和pageY对小球进行定位。注意啊这里，我们需要减去球的半径，以让球的中心在鼠标指针上：

var plot = document.querySelector('.plot'),
    offset = plot.offsetWidth / 2;
document.addEventListener('click', function(ev) {
  plot.style.left = (ev.pageX - offset) + 'px';
  plot.style.top = (ev.pageY - offset) + 'px';
}, false);

随便点击屏幕的任意位置，小球都会随之闪现到那。不过它并不是平滑过去的，但如果你勾选这个示例的复选框，你会发现小球就会很圆润的滑过来了。这个效果呢，过去的话可能只能用JS库来完成，但现在啊，时代不同了……我们只需要用CSS写个过渡效果的类，而剩下的事情就让浏览器去处理。为至于此，我们写个类名为smooth的样式，在复选框被选中之后，将其应用到小球上：

.smooth {
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

添加JavaScript：

var cb = document.querySelector('input[type=checkbox]');
cb.addEventListener('click', function(ev) {
  plot.classList.toggle('smooth');
}, false);

随着新世界的来临，CSS和JavaScript双剑合璧，谁与争锋！嘛顺便说下，在JS中也有跟CSS过渡和动画效果有关的事件噢。