1.1. 常用鼠標(biāo)事件
1.1.1 案例：禁止選中文字和禁止右鍵菜單
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 我們可以禁用右鍵菜單
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止選中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
1.1.2 鼠標(biāo)事件對(duì)象
1.1.3 獲取鼠標(biāo)在頁面的坐標(biāo)
<script>
// 鼠標(biāo)事件對(duì)象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠標(biāo)在可視區(qū)的x和y坐標(biāo)
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠標(biāo)在頁面文檔的x和y坐標(biāo)
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠標(biāo)在電腦屏幕的x和y坐標(biāo)
console.log(e.screenX);
console.log(e.screenY);
})
</script>
1.1.4 案例：跟隨鼠標(biāo)的天使
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// 1. mousemove只要我們鼠標(biāo)移動(dòng)1px 就會(huì)觸發(fā)這個(gè)事件
// 2.核心原理： 每次鼠標(biāo)移動(dòng)，我們都會(huì)獲得最新的鼠標(biāo)坐標(biāo)伞梯，
// 把這個(gè)x和y坐標(biāo)做為圖片的top和left 值就可以移動(dòng)圖片
var x = e.pageX;
var y = e.pageY;
console.log('x坐標(biāo)是' + x, 'y坐標(biāo)是' + y);
//3 . 千萬不要忘記給left 和top 添加px 單位
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
});
</script>
1.2. 常用的鍵盤事件
1.2.1 鍵盤事件
<script>
// 常用的鍵盤事件
//1. keyup 按鍵彈起的時(shí)候觸發(fā)
document.addEventListener('keyup', function() {
console.log('我彈起了');
})
//3. keypress 按鍵按下的時(shí)候觸發(fā) 不能識(shí)別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按鍵按下的時(shí)候觸發(fā) 能識(shí)別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三個(gè)事件的執(zhí)行順序 keydown -- keypress -- keyup
</script>
1.2.2 鍵盤事件對(duì)象
使用keyCode屬性判斷用戶按下哪個(gè)鍵
<script>
// 鍵盤事件對(duì)象中的keyCode屬性可以得到相應(yīng)鍵的ASCII碼值
// 1. 我們的keyup 和keydown事件不區(qū)分字母大小寫 a 和 A 得到的都是65
// 2. 我們的keypress 事件 區(qū)分字母大小寫 a 97 和 A 得到的是65
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我們可以利用keycode返回的ASCII碼值來判斷用戶按下了那個(gè)鍵
if (e.keyCode === 65) {
alert('您按下的a鍵');
} else {
alert('您沒有按下a鍵')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
</script>
1.2.3 案例：模擬京東按鍵輸入內(nèi)容
當(dāng)我們按下 s 鍵玫氢， 光標(biāo)就定位到搜索框（文本框獲得焦點(diǎn)）。
注意：觸發(fā)獲得焦點(diǎn)事件壮锻，可以使用 元素對(duì)象.focus()
<input type="text">
<script>
// 獲取輸入框
var search = document.querySelector('input');
// 給document注冊(cè)keyup事件
document.addEventListener('keyup', function(e) {
// 判斷keyCode的值
if (e.keyCode === 83) {
// 觸發(fā)輸入框的獲得焦點(diǎn)事件
search.focus();
}
})
</script>
1.2.4 案例：模擬京東快遞單號(hào)查詢
要求：當(dāng)我們?cè)谖谋究蛑休斎雰?nèi)容時(shí)琐旁，文本框上面自動(dòng)顯示大字號(hào)的內(nèi)容。
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="請(qǐng)輸入您的快遞單號(hào)" class="jd">
</div>
<script>
// 獲取要操作的元素
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
// 給輸入框注冊(cè)keyup事件
jd_input.addEventListener('keyup', function() {
// 判斷輸入框內(nèi)容是否為空
if (this.value == '') {
// 為空猜绣，隱藏放大提示盒子
con.style.display = 'none';
} else {
// 不為空灰殴，顯示放大提示盒子，設(shè)置盒子的內(nèi)容
con.style.display = 'block';
con.innerText = this.value;
}
})
// 給輸入框注冊(cè)失去焦點(diǎn)事件掰邢，隱藏放大提示盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 給輸入框注冊(cè)獲得焦點(diǎn)事件
jd_input.addEventListener('focus', function() {
// 判斷輸入框內(nèi)容是否為空
if (this.value !== '') {
// 不為空則顯示提示盒子
con.style.display = 'block';
}
})
</script>
