2.2事件绑定中的on

在写js代码的过程中，经常碰到onclick,onmouseover,onmouseout等，其实这些事件的名称是click,mouseover,mouseout，而on是添加这些事件的一个方法

语法

对象.on事件名称=function(){};

特性

• 事件处理函数是在事件的冒泡阶段发生的

• 既可以调用命名函数，也可以调用匿名函数

btn.onclick=function(){
    console.log('1');       //1
};

btn.onclick=fn1;
function fn1(){
    console.log('1');       //1
};

• 只能给元素添加一个事件，如果有多个on，那么后面的会覆盖前面的

btn.onclick=function(){
    console.log(1);
};
btn.onclick=function()|{
    console.log(2);
}
//这段代码最后只会在控制台输出2

• this指向当前元素

var btn = querySelect('button');
btn.onclick=function(){
    console.log(this);      //
};

移除方法

对象.on事件名称=null;

• 直接移除

btn.onclick=function(){
    console.log(1);    //事件绑定被移除，无论怎么点击按钮都无法在控制台输出内容
};
btn.onclick=null;

• 执行一次后移除

btn.onclick=function(){
    console.log(1);    //事件执行一次后被移除，只会输出一次1
    this.onclick=null;
};

阻止事件冒泡

采用事件对象.cancelBubble=true;方法

btn.onclick=function(ev){
    ev.cancelBubble=true;
};