js常用事件

js

常用事件

• 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);