HTML事件处理

这里只讲如何获取触发的是什么事件以及获取触发该事件的节点。

获取触发的事件类型:

1	<button onmouseover="console.log(event.type)" name="Hey">Test</button>

该按钮在鼠标移至其上时会在控制台打印: “mouseover”，此时的event类型为:MouseEvent。

然后就是获取该节点了。
代码如下:

1	<button onmouseover="console.log(this)" name="Hey">Test</button>

当鼠标移动到该按钮时，会在控制台打印如下内容:

1	<button onmouseover="console.log(this)" name="Hey">Test</button>

这里的this代表了该节点本身，其nodeType == Node.ELMENT_NODE，即其为一个元素节点。
如果想要在函数里使用event，可以直接调用。
如果想要在函数里用this，可以将this做为参数传递给函数(要不然函数里直接用this得到的结果是window):

<button onmouseover="even_test(this)" name="Hey">Test</button>
<script>
    function even_test(ev)
    {
        // 使用event
        console.log(event.type);
        // 使用该节点
        console.log(ev);
        console.log(ev.nodeType === Node.ELEMENT_NODE);
    }
</script>

有一种方法可以在js里给节点添加事件处理:

<button name="Hey">Test</button>

<script>
    let ts_b = document.getElementsByName("Hey")[0];
    // 这里的this引用了元素本身
    ts_b.onclick = function(){console.log(this.name);console.log(event)};
</script>

本篇完。