JS事件

获取事件对象

document.onmouseover = function  (e) {
    var ev = e || window.event;
    console.log(ev);
}

获取鼠标当前的坐标:clientX\clientY

event.clientX 在可视区中,鼠标点击的x坐标
event.clientY 在可视区中,鼠标点击的y坐标

鼠标事件

鼠标按下(onmousedown)
鼠标抬起(onmouseup)
鼠标双击事件:ondblclick
右击事件:oncontextmenu

键盘事件

按下后抬起按键:keyup
按下按键:keydown

keydown携带的一个参数是:keyCode,这个参数里的是每个按键的编码,我们可以通 过编码来判断用户按的是哪个按键
其他参数
ctrlKey 返回boolean值,按下时为true
shiftKey 返回boolean值,按下时为true
altKey 返回boolean值,按下时为true

表单事件

在表单中,通过点击submit按钮可以将表单中的额内容提交到指定的URL中,我们也可 以指定submit触发的事件,进行自定义操作。
var form1 = document.querySelector(“#form1”);
form1.onsubmit = function (){
alert(‘a’);
}

输入框焦点事件

输入框在被激活时,会触发 onfocus 事件,我们可以利用这个方法做一些简单的业务 处理:如使用正则来验证用户输入的文本是否正确等。
onblur 是和onfocus相对的，失去焦点的时候

阻止默认事件

除了返回一个false值,我们还可以使用 preventDefault 来拦截,只是 preventDefault 对ie6–ie8不兼容
ev.preventDefault();// ie6-8不兼容

事件冒泡

子标签发生事件后,向父级发送该事件,一直追溯到document。如:点击一个嵌套在 body中的button,则该button的onclick事件也会传递给body、document中,触发他们 的onclick里触发的函数。

取消事件冒泡

由于事件冒泡会触发绑定在父标签上的同类型事件,会给我们的开发带来很多麻烦, 所以我们需要取消事件冒泡。
取消事件冒泡的方法:把 cancelBubble 的值设置为 true

事件绑定

给事件绑定一个方法,除了上边讲过的以外,还可以使用 addEventListener 来给标签 对应的事件添加方法,使用之前的那种方式,只能给事件绑定一个方法,而使用
addEventListener 则可以给一个事件添加多个方法。
非IE浏览器
target.addEventListener(type,listener,useCapture)
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。
document.getElementById(“div”).addEventListener(“keydown”, function (event) { alert(event.keyCode); }, false);
IE浏览器下的语法:
target.attachEvent(type, listener);
target :文档节点、document、window 或 XMLHttpRequest。
type :字符串,事件名称,含“on”,比 如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
document.getElementById(“div”).attachEvent(“keydown”, function (event) { alert(event.keyCode); });

移除事件

非IE浏览器: target.removeEventListener(type,listener,useCapture);
target :文档节点、document、window 或 XMLHttpRequest。
type :字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false。
最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。
IE浏览器 target.detachEvent(type, listener);
target :文档节点、document、window 或 XMLHttpRequest。
type :字符串,事件名称,含“on”,比 如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除

useCapture详解

指的是捕获子事件，父事件和后添加的事件先执行
•true 的触发顺序总是在 false 之前；
•如果多个均为 true，则外层的触发先于内层；
•如果多个均为 false，则内层的触发先于外层。