JS事件 *********
一、事件的兩種綁定方式 *******
1、on事件綁定方式
document.onclick = function() {
console.log("文檔點擊");
}
// on事件只能綁定一個方法，重復(fù)綁定保留最后一次綁定的方法
document.onclick = function() {
console.log("文檔點擊");
}
// 事件的移除
document.onclick = null;
2、非on事件綁定方式
document.addEventListener('click', function() {
console.log("點擊1");
})
document.addEventListener('click', function() {
console.log("點擊2");
})
// 非on事件可以同時綁定多個方法，被綁定的方法依次被執(zhí)行
// addEventListener第三個參數(shù)(true|false)決定冒泡的方式
function fn () {}
document.addEventListener('click', fn);
// 事件的移除
document.removeEventListener('click', fn);
二、事件參數(shù)event *********
三、事件的冒泡與默認事件 *********
- 事件的冒泡：父子都具有點擊事件，不處理的話，點擊子級也會出發(fā)父級的點擊事件
<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.onclick = function (ev) {
// 方式一
ev.stopPropagation();
console.log("sub click");
}
sup.onclick = function (ev) {
// 方式二
ev.cancelBubble = true;
console.log("sup click");
}
body.onclick = function (ev) {
console.log("body click");
}
</script>
- 默認事件：取消默認的事件動作，如鼠標(biāo)右鍵菜單
<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.oncontextmenu = function (ev) {
// 方式一
ev.preventDefault();
console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
console.log("sup menu click");
// 方式二
return false;
}
body.oncontextmenu = function (ev) {
console.log("body menu click");
}
</script>
四、鼠標(biāo)事件 *********
onclick：鼠標(biāo)點擊
ondblclick：鼠標(biāo)雙擊
onmousedown：鼠標(biāo)按下
onmousemove：鼠標(biāo)移動
onmouseup：鼠標(biāo)抬起
onmouseover：鼠標(biāo)懸浮
onmouseout：鼠標(biāo)移開
oncontextmenu：鼠標(biāo)右鍵
ev.clientX：點擊點X坐標(biāo)
ev.clientY：點擊點Y坐標(biāo)
五、鍵盤事件 *******
onkeydown：鍵盤按下
onkeyup：鍵盤抬起
ev.keyCode：按鍵編號
ev.altKey：alt特殊按鍵
ev.ctrlKey：ctrl特殊按鍵
ev.shiftKey：shift特殊按鍵
六、表單事件 *******
onfocus：獲取焦點
onblur：失去焦點
onselect：文本被選中
oninput：值改變
onchange：值改變，且需要在失去焦點后才能觸發(fā)
onsubmit：表單默認提交事件
七、文檔事件 *
onload：頁面加載成功
onbeforeunload：頁面退出或刷新警告，需要設(shè)置回調(diào)函數(shù)返回值，返回值隨意
八、圖片事件 *
onerror：圖片加載失敗
九、頁面事件 *********
onscroll：頁面滾動
onresize：頁面尺寸調(diào)整
window.scrollY：頁面下滾距離
