前端（十五）—— JavaScript事件：繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件
阿新 • • 發佈：2018-11-11
JS事件：繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件
一、事件的兩種繫結方式 *******
1、on事件繫結方式
document.onclick = function() {
console.log("文件點選");
}
// on事件只能繫結一個方法，重複繫結保留最後一次繫結的方法
// .onclick = function (){}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事件可以同時繫結多個方法，被繫結的方法依次被執行
// addEventListener第三個引數(true|false)決定冒泡的方式
// addEventListener('事件',fn,冒泡方式)function fn () {} document.addEventListener('click', fn); // 事件的移除 document.removeEventListener('click', fn);
二、事件引數event *********
- 存放事件資訊的回撥引數
三、事件的冒泡與預設事件 *********
- 事件的冒泡：父子都具有點選事件，不處理的話，點選子級也會出發父級的點選事件
- 處理冒泡：（ev是onclick傳出來的資料，回撥函式獲取並處理）
方法一. ev.cancelBubble()
方法二. ev.stopprppagation()<body id="body"> <div id="sup"> <div id="sub"></div> </div> </body> <script> sub.onclick = function (ev) { // 方式一：ev.stopPropagation(); ev.stopPropagation(); console.log("sub click"); } sup.onclick = function (ev) { // 方式二：ev.cancelBubble = true; ev.cancelBubble = true; console.log("sup click"); } </script>
- 預設事件：取消預設的事件動作，如滑鼠右鍵會彈出選單
- 取消預設事件：
方法一. return false()
方法二. ev.preventDefault()<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.oncontextmenu = function (ev) {
// 方式一：ev.preventDefault();
ev.preventDefault();
console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
console.log("sup menu click");
// 方式二：return false;
return false;
}
</script>四、滑鼠事件 *********
- 滑鼠事件
onclick：滑鼠點選
ondblclick：滑鼠雙擊
onmousedown：滑鼠按下
onmousemove：滑鼠移動
onmouseup：滑鼠擡起
onmouseover：滑鼠懸浮
onmouseout：滑鼠移開
oncontextmenu：滑鼠右鍵- 事件引數ev
ev.clientX：點選點X座標
ev.clientY：點選點Y座標div.onmousemove = function (ev) {
// 滑鼠在頁面中的位置
console.log("x的座標:", ev.clientX);
console.log("y的座標:", ev.clientY);
console.log("移動");
}五、鍵盤事件 *******
1. 操作一般標籤,鍵盤事件繫結給document
2. 表單標籤(可以錄入文字),鍵盤事件繫結給表單標籤- 鍵盤事件
onkeydown：鍵盤按下
onkeyup：鍵盤擡起- 事件引數ev
ev.keyCode：按鍵編號，鍵盤上每個按鍵都有唯一的編號
ev.altKey：alt特殊按鍵
ev.ctrlKey：ctrl特殊按鍵
ev.shiftKey：shift特殊按鍵// 案例，鍵盤控制上下左右移動
var div = document.querySelector('.div');
document.onkeydown = function (ev) {
// console.log(ev.keyCode);
switch(ev.keyCode) {
case 37:
console.log("左");
// offsetLeft 獲取移動錢左端所在位置
div.style.left = div.offsetLeft - 3 + "px";
break;
case 38:
console.log("上");
// offsetTop 獲取移動錢上端所在位置
div.style.top = div.offsetTop - 3 + "px";
break;
case 39:
console.log("右");
div.style.left = div.offsetLeft + 3 + "px";
break;
case 40:
console.log("下");
div.style.top = div.offsetTop + 3 + "px";
break;
}
}<script type="text/javascript">
// 平滑的移動
var div = document.querySelector('.div');
// 能否向左|右|上|下運動
var l_able = false;
var t_able = false;
var r_able = false;
var b_able = false;
setInterval(function () {
// l_able為假,則後者短路,可以實現if的簡寫
l_able && (div.style.left = div.offsetLeft - 3 + 'px'); // 左
t_able && (div.style.top = div.offsetTop - 3 + 'px'); // 上
if (r_able == true) {
div.style.left = div.offsetLeft + 3 + 'px'; // 右
}
b_able && (div.style.top = div.offsetTop + 3 + 'px'); // 下
}, 16);
document.onkeydown = function (ev) {
switch(ev.keyCode) {
case 37: l_able = true; break;
case 38: t_able = true; break;
case 39: r_able = true; break;
case 40: b_able = true; break;
}
}
document.onkeyup = function (ev) {
console.log(ev);
switch(ev.keyCode) {
case 37: l_able = false; break;
case 38: t_able = false; break;
case 39: r_able = false; break;
case 40: b_able = false; break;
}
}
</script>六、表單事件 *******
onfocus：獲取焦點
onblur：失去焦點
onselect：文字被選中
oninput：值改變
onchange：值改變，且需要在失去焦點後才能觸發
onsubmit：表單預設提交事件，form表單專有的事件 var form = document.querySelector('form');
var ipt = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
ipt.onselect = function () {
console.log("文字被選中了");
}
// 值改變就觸發
ipt.oninput = function () {
console.log("值在改變");
div.innerText = this.value;
}
// 鍵盤擡起觸發
ipt.onkeyup = function () {
console.log("值在改變");
div.innerText = this.value;
}
// 值改變，並且在失去焦點時觸發
ipt.onchange = function () {
console.log("值在改變");
div.innerText = this.value;
}
// form的專有事件
form.onsubmit = function () {
console.log("提交");
return false; // 取消預設事件
}七、文件事件 *
- 文件事件由window呼叫
onload：頁面載入成功
onbeforeunload：頁面退出或重新整理警告，需要設定回撥函式返回值，返回值隨意<script type="text/javascript">
// 文件載入完畢,觸發
window.onload = function () {
var div = document.querySelector('div');
console.log(div);
}
</script>
<script type="text/javascript">
// 退出頁面
window.onbeforeunload = function () {
return false;
}
</script>八、圖片事件 *
onerror：圖片載入失敗九、頁面事件 *********
- 由window來呼叫
onscroll：頁面滾動
onresize：頁面尺寸調整window.scrollY：頁面下滾距離<script type="text/javascript">
window.onload = function () {
window.onscroll = function () {
console.log(window.scrollY);
}
</script>