接上一章
事件委托
<body>
<ul>
<li>知否知否，點我應有彈窗在手！</li>
<li>知否知否，點我應有彈窗在手！</li>
<li>知否知否，點我應有彈窗在手！</li>
<li>知否知否，點我應有彈窗在手！</li>
<li>知否知否，點我應有彈窗在手！</li>
</ul>
<script>
//事件委托的核心原理：給父節點添加偵聽器,利用冒泡事件影響每一個子節點
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
//alert('知否知否，點我應有彈窗在手');
//e.target 這個可以得到我們點選的對象
e.target.style.backgroundColor = 'pink';
})
</script>
</body> 常用的滑鼠事件
<body>
我是一段不願意分享的文字
<script>
//1.contexmenu 我們可以禁用右鍵菜單
document.addEventListener('contexmenu',function(e){
e.preventDefault();
})
//2.禁止選中文字selectstart
document.addEventListener('selectstart', function(e){
e.preventDefault();
})
</script>
</body> 滑鼠事件對象
<script>
//滑鼠事件對象 MouseEvent
document.addEventListener('click',function(e){
//1.client 滑鼠在可視區的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('--------------------');
//2.page 滑鼠在可視區的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('--------------------');
//3.screen 滑鼠在可視區的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('--------------------');
})
</script> 案例：跟随滑鼠的天使
這個天使圖檔一直跟随滑鼠移動
<style>
img{
position: absolute;
top:2px;
}
</style>
</head>
<body>
<img src="1.jpg" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
//1.mousemove 隻要我們滑鼠移動1px 就會觸發這個事件
//console.log(1);
//2.核心原理：每次滑鼠移動，我們都會獲得最新的滑鼠坐标，就可以移動圖檔
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x, 'y坐标是' + y);
//3.千萬不要忘記給left 和top
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
})
</script>
</body> 8.鍵盤燈常用事件
8.1常用鍵盤事件
<script>
//常用的鍵盤事件
//1.keyup 按鍵彈起的時候觸發
document.addEventListener('keyup',function(){
console.log('我彈起了');
})
//2.keydown按鍵按下的時候觸發 能識别功能鍵 如 ctrl shift 左右箭頭
document.addEventListener('keydown',function(){
console.log('我按下了down');
})
//3.keypress 按鍵按下的時候觸發 不能識别功能鍵 如 ctrl shift 左右箭頭
document.addEventListener('keypress',function(){
console.log('我按下了press');
})
//4.三個事件的執行順序 keydwon -- keypress -- keyup
</script> 案例：模拟京東按鍵輸入内容
- 當我們按下s鍵，光标就定位到搜尋框
案例分析：
<body>
<input type="text">
<script>
var search = document.querySelector('input');
document.addEventListener('keyup',function(e){
if(e.keyCode === 83){
search.focus();
}
})
</script>
</body> 案例：模拟京東快遞單号查詢
- 要求：當我們在文本框中輸入内容時，文本框上面自動顯示大字号的内容。
<style>
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
</style>
</head>
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="請輸入您的快遞單号" class="jd">
</div>
<script>
// 快遞單号輸入内容時， 上面的大号字型盒子（con）顯示(這裡面的字号更大）
// 表單檢測使用者輸入： 給表單添加鍵盤事件
// 同時把快遞單号裡面的值（value）擷取過來指派給 con盒子（innerText）做為内容
// 如果快遞單号裡面内容為空，則隐藏大号字型盒子(con)盒子
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
// console.log('輸入内容啦');
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerText = this.value;
}
})
// 當我們失去焦點，就隐藏這個con盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 當我們獲得焦點，就顯示這個con盒子
jd_input.addEventListener('focus', function() {
if (this.value !== '') {
con.style.display = 'block';
}
})
</script>
</body>