JavaScript 基础知识- 取消预设行为，了解元素所在位置

在某些情况下，我们会想取消元素的预设行为，例如 <a> 标籤的 href 属性的这个行为，此时 .preventDefault()
就是一个非常好用的方法

<a class="menu" href="https://www.google.com" style="display: block;">Menu</a>

照着上面的结构会有一个 a 连结，连到 google 去，此时我想取消他这种预设的行为的话：

var el = document.querySelector('.menu');el.addEventListener('click',function(e){    e.preventDefault();});

这个时候会发现无论怎么点击，都不会去到 google 了，因为 a 标籤的预设行为已经被我取消了

有时候我们也会想知道，我们目前点击的元素位置或者元素是什么，假设以下面的 HTML 结构:

<div class="header">    <ul>        <li>            <a href=""#>123</a>        </li>    </ul></div>

如果我们绑定一个点击事件:

var el = document.querySelector('.header');el.addEventListener('click',function(){});

这时候我们可以对 function 内一样带 e 这个参数，指的是事件本身，使用 .target 这个方法，我们可以知道元素以及内容:

el.addEventListener('click',function(e){    e.target    // 我们可以在 console 查看自己点击到的元素内容是什么    console.log(e.target);});

不妨可以再多加一点 css 把距离推开来就能知道其差异性，除了 .target 这个方法，我们还可以更準确的知道节点的元素，这时候可以在后面多加 .nodeName :

el.addEventListener('click',function(e){    console.log(e.target.nodeName);});

这时候我们就能抓出节点的位置了，不妨试试看吧