e是咱ㄟ宝贝

前面提到那个e，蕴含着我们与网页互动丰富的资讯。

例如：

• type：代表事件的类别。
• target：为触发事件的元素。
• screenX / screenY：代表事件触发时，滑鼠座标在萤幕解析度上的相对位置。
• pageX / pageY： 表示事件触发时，滑鼠座标在网页上的相对位置。
• clientX / clientY： 代表事件触发时，滑鼠座标在浏览器视窗内的相对位置。

我做了一个列表，里面放了倚天剑、屠龙刀还有碧血剑。

<ul id="box">
        <li class="sky">倚天剑</li>
        <li class="dragon">屠龙刀</li>
        <li class="blood">碧血剑</li>
</ul>
<h1>显示e的资讯</h1>
<ul>
        <li>target: <span class="target"></span></li>
        <li>tagName: <span class="tagName"></span></li>
        <li>className: <span class="className"></span></li>
        <li>textContent: <span class="textContent"></span></li>
        <li>screenX: <span class="screenX"></span></li>
        <li>screenY: <span class="screenY"></span></li>
        <li>pageX: <span class="pageX"></span></li>
        <li>pageY: <span class="pageY"></span></li>
        <li>clientX: <span class="clientX"></span></li>
        <li>clientY: <span class="clientY"></span></li>
 </ul>

然後从列表的ul标签来监听滑鼠的点击事件，让getInformation这个函式去捉「事件物件」(event)里面的资讯。

var el = document.getElementById('box');
var target = document.querySelector('.target')
var tagName = document.querySelector('.tagName');
var className = document.querySelector('.className');
var content = document.querySelector('.textContent');
var screenX = document.querySelector('.screenX');
var screenY = document.querySelector('.screenY');
var pageX = document.querySelector('.pageX');
var pageY = document.querySelector('.pageY');
var clientX = document.querySelector('.clientX');
var clientY = document.querySelector('.clientY');
function getInformation (e) {
    target.textContent = e.target;
    tagName.textContent = e.target.tagName;
    className.textContent = e.target.className;
    content.textContent = e.target.textContent;
    screenX.textContent = e.screenX;
    screenY.textContent = e.screenY;
    pageX.textContent = e.pageX;
    pageY.textContent = e.pageY;
    clientX.textContent = e.clientX;
    clientY.textContent = e.clientY;
}
el.addEventListener('click', getInformation, false);

https://codepen.io/popeye_ux/pen/VwbWrXL

可以到Codepen看看我做的范例，应该有进一步的体会。