JS事件基础（鼠标事件，键盘事件及默认行为)

JS 事件基础

Document是一个最顶级的父节点，两个子节点分别为和HTML。

window.onload = function()
{
alert(document.childNodes[0].tagName); [0]=undefined [1]=HTML
}

Event对象，因为存在兼容性问题，所以通常处理如下：

document.onmousemove = function(ev)
{
var oEvent = ev || event;
}

（clientX，clientY）返回点击处的X,Y坐标。

事件冒泡：

一个点击事件完成后，会相应的去触发它的父级的点击事件。
示例;

这样并不能达到点击按钮出现该div元素，点击空白网页div消失的效果。因为事件冒泡会导致两个事件再第一次点击按钮的同时都被触发。
那么，如何解决事件冒泡？
加入event.canclebubble= ‘true’;就可以解决事件冒泡。
如示例：

oBtn.onclick = function()
{
oDiv.style.display = 'block';
alert('按钮被点了');
event.cancelBubble = 'true'; //在需要解决事件冒泡的地方加入，可以停止事件冒泡触发父级事件。
}

鼠标事件

鼠标事件：
示例：跟随鼠标移动的div

因为clientX，clientY为可视区坐标定位，即根据可视区定位，而div根据整个页面（body）来定位，就会出现误差。
获取滚动条距离：

更改后的跟随鼠标移动的div

示例：炒鸡好玩的div跟随div跑：

键盘事件：

鼠标事件：keyCode
测出键盘每个键 keyCode的值：
示例;

键盘操作div移动：

明显第一次点击键盘会有卡顿，利用js定时器可以解决该问题；

默认行为：

默认行为：不是通过代码来实现的，而是浏览器自身具备的。
例如：表单在键盘输入a，b直接出来a，b，浏览器默认的。
阻止默认行为：
1，阻止右键菜单

2.阻止表单提交（表单验证方式）

3.阻止默认菜单，弹出自定义菜单

登录
刷新
提交
收藏
成为vip

只能输入数字的输入框：

示例：