常用事件
- onclick:点击操作
document.getElementById("bnt1").onclick=function(){
document.getElementById("p1").innerHTML="ddd";
};
- onchange:对象发生变化时
onchange属性可以使用于:<input>,<select>和<textare>
document.getElementById("input1").onchange=function(){
this.value=this.value.toUpperCase();
}
toUpperCase() 方法用于把字符串转换为大写。
- onmouseover,onmouseleave:当鼠标移入和移除节点时操作
- conmousemove 事件在鼠标移动到 div 元素上时触发。
- mouseenter 事件中有在鼠标指针进入 div 元素时触发。
- onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。
var myname = document.getElementById("name");
myname.onmouseover = function(e){
this.style.color = "red";
}
- onmousedown、onmouseup:鼠标点下不松手时是mousedown，松开手后是mouseup。点击是按下和松开的两个过程之和，mousedown+mouseup=click
document.getElementById('div2').onmousedown=function(){
this.innerHTML="鼠标按下了";
};
document.getElementById('div2').onmouseup=function(){
this.innerHTML="鼠标松开了";
}
this简单使用
在匿名函数内，this代表绑定事件的元素（自己）
document.getElementById("btn1").onclick=function(){
this.style.backgroundColor = "red";
}
查看事件对象
document.getElementById("btn5").onclick=function(e){
console.log(e); // 事件对象
console.log(e.target);//发出事件的元素
console.log(e.x); //事件的位置
console.log(e.type);//事件的类型
}
事件绑定和解除
addEventListener 和removeEventLister
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的时间名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。（下一条即事件的冒泡和捕获）
addEventListener的参数一共有三个，语法为：
element.addEventListener(type,listener,useCapture)
详解
- element是要绑定函数的对象。
- type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
- listener当然就是绑定的函数了，记住不要跟括号
- 最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
例
- 要在按钮上为click事件添加事件处理程序，可以使用下列代码：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
- 使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.addEventListener("click", function () {
alert("Hello World");
}, false);
注意:addEventListener() 方法添加的事件处理函数不会覆盖已存在的事件处理函数。你可以向一个元素添加多个事件处理函数。比如对一个元素添加两个 "click" 事件。
- 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
alert(this.id);
}, false);
在这个例子中，我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener()是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同，如下面的例子所示：
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中用相同的函数。
事件冒泡和捕获
事件传递有两种方式：冒泡与捕获。
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件
addEventListener(event, function, useCapture); useCapture默认值为 false, 是冒泡传递。当useCapture值为 true 时, 事件使用捕获传递。
事件冒泡：
document.getElementById('div7').addEventListener('click', function(){
alert('div7 click');
}, false);
document.getElementById('btn7').addEventListener('click', function(){
alert('btn7 click');
}, false);
事件捕获：
document.getElementById('div7').addEventListener('click', function(){
alert('div7 click');
}, true);
document.getElementById('btn7').addEventListener('click', function(){
alert('btn7 click');
}, true);
