一、事件
事件是编程时系统内部发生的动作或者发生的事情，比如单击按钮。
1、事件监听
谁触发了，什么方式触发，要做什么事情。
<input type="button" value="点击">
<img src="images/1.webp">
<script type="text/javascript">
// 获取元素：
let btn = document.querySelector('input');
// 监听事件：注册事件
// 元素.addEventListener('事件', 函数);
// click：单击事件
// dblclick：双击事件
btn.addEventListener('click', function () {
console.log('哇哈哈');
});
let img = document.querySelector('img');
img.addEventListener('dblclick', function () {
console.log('图片asdasd');
})
// 事件源：当前添加事件的元素
// 事件类型：什么事件
// 事件处理程序：函数、当事件触发才会执行
// 语法：事件源.addEventListener('事件类型', 函数);
// 点击div添加背景颜色
// 获取元素
let div = document.querySelector('div');
// 添加事件
div.addEventListener('click', function () {
// 写代码
div.style.background = 'red';
});
</script>
2、发展历程
3、事件类型
(1)焦点事件
//小米搜索框案例 焦点事件
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
}
.mi .search {
border: 1px solid #ff6700;
}
.result-list {
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
display: none;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本">
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
// 获取元素：
let inp = document.querySelector('input');
let ul = document.querySelector('ul');
// 监听事件
inp.addEventListener('focus', function () {
ul.style.display = 'block';
});
inp.addEventListener('blur', function () {
ul.style.display = 'none';
});
</script>
(2)文本事件
<div class="w">
<div class="controls">
<img src="images/tip.png" alt=""><br>
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
<script>
// 用户在textarea中输入内容，输入内容的时候吧内容的长度放到span中
// input：事件
// 获取元素：
let area = document.querySelector('#area');
let useCount = document.querySelector('.useCount');
// 添加事件
area.addEventListener('input', function () {
// 内容的长度放到span里面
// console.log( area.value.length );
useCount.innerText = area.value.length;
});
</script>
(3)全选案例
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 获取元素：
let checkAll = document.querySelector('#checkAll');
let all = document.querySelector('.all');
let cks = document.querySelectorAll('.ck');
// 点击全选控制小按钮选中不选中
checkAll.addEventListener('click', function () {
// 如果全选选中所有小的都选中，全选不选中所有小的都不选中
// 获取全选的checked
let flag = checkAll.checked;
for ( let i = 0; i < cks.length; i++ ) {
cks[i].checked = flag;
}
if ( flag ) {
all.innerHTML = '取消';
} else {
all.innerHTML = '全选';
}
});
// 点击小按钮如果都选中那么全选也得选中否则不选中
// 给所有小按钮添加上事件
for ( let i = 0; i < cks.length; i++ ) {
cks[i].addEventListener('click', function () {
// 单击小按钮之后要判断判断是否让大按钮选中
// 如果小按钮总个数和被选中的小按钮的个数相同，说明全部都选啦
// 小按钮的个数
let len1 = cks.length;
// 被选中的小按钮的个数
//:checked 匹配被选中的小按钮
let len2 = document.querySelectorAll('.ck:checked').length;
checkAll.checked = (len1 === len2);
});
}
</script>
二、函数
1、函数表达式
<script type="text/javascript">
// 具名函数、命名函数
// function fn () {
// console.log(123);
// }
// fn();
// 匿名函数：
// 函數也是一种数据类型，也是一种
// 函数表达式
// let fun = function () {
// console.log(123456);
// }
// fun();
// 自执行函数、自调用函数、立即执行函数
// (function () {
// console.log(123);
// })();
// (function () {
// console.log(123456789);
// }());
// let num = 1
// ;(function () {
// console.log(123);
// })()
</script>
2、回调函数
<script type="text/javascript">
// 函数表达式
// let n = function () {console.log(123);}
// 高阶函数：
// 回调函数：给其他函数当参数的函数称为回调函数
function fun (a) {
// 函数不调用不执行
// a = function () {console.log('abcd123');};
// console.log(a);
a();
}
fun( function () {console.log('abcd123');} );
</script>
三、环境对象this
<script type="text/javascript">
// console.log( this );window
// 普通函数
// function fn () {
// console.log(this)
// }
// window.fn();
// setInterval(function () {
// console.log(this);
// }, 1000)
// 事件处理函数中的this==>事件源
let btn = document.querySelector('input');
btn.addEventListener('click', function () {
// 事件处理函数中的this==>btn
console.log(this);
});
let div = document.querySelector('div');
div.addEventListener('click', function () {
console.log(this);// div
});
document.addEventListener('click', function () {
console.log(this)
});
</script>
四、排它思想
<input type="button" value="点击">
<input type="button" value="点击">
<input type="button" value="点击">
<input type="button" value="点击">
<input type="button" value="点击">
<input type="button" value="点击">
<input type="button" value="点击">
<input type="button" value="点击">
<script type="text/javascript">
let btns = document.querySelectorAll('input');
// 循环添加事件
// 点击谁谁有背景颜色，其他的不准有背景颜色
// 排他思想：
// 先吧所有的背景色清除，
// 最后再给当前这个设置
for ( let i = 0; i < btns.length; i++ ) {// 点击事件
btns[i].addEventListener('click', function () {
// 先把所有的清除了
for (let j = 0; j < btns.length; j++) {
btns[j].style.background = '';
}
// 再给当前元素设置
this.style.background = 'blue';
})
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script type="text/javascript">
// 功能：点击切换
// 解构：查看
// 思路:点击li添加类名（active）让下面对应的div显示（active）
// 获取元素
let lis = document.querySelectorAll('.tab li');
let divs = document.querySelectorAll('.products div');
// 添加事件
// 遍历添加事件
for ( let i = 0; i < lis.length; i++ ) {// i就是li的索引值
lis[i].addEventListener('click', function () {
// 清除所有类名
// for ( let j = 0; j < lis.length; j++ ) {
// lis[j].classList.remove('active');
// }
// 在给当前li添加类名之前，找到前一个active移除
// 每次加active之前，找到上一个active删除类名即可
document.querySelector('.tab .active').classList.remove('active')
// 当前li
this.classList.add('active');
// 排他
document.querySelector('.products .active').classList.remove('active');
// 显示div
divs[i].classList.add('active');
});
}
</script>
\
