在写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指向当前元素
<body>
<input type="button">
</body>
var btn = querySelect('button');
btn.onclick=function(){
console.log(this); //<input type="button">
};
移除方法
对象.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;
};
