在寫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;
};
