WEB前端第三十五课——事件绑定应用案例
1.放大镜案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 405px;
height: 270px;
background-image: url("Images/drink.jpg");
background-size: contain;
position: relative;
float: left;
}
.div2{
width: 81px;
height: 54px;
background-color: rgba(211,135,113,0.3);
position: absolute;
display: none;
}
.div3{
width: 405px;
height: 270px;
float: left;
overflow: hidden;
position: relative;
display: none;
}
.div3 img{
position: absolute;
}
.changeBtn{
outline: none;
position: absolute;
left: 0;
top: 270px;
}
</style>
</head>
<body>
<div class="div1" >
<div class="div2"></div>
</div>
<button class="changeBtn">切换图片</button>
<div class="div3">
<img src="Images/drink.jpg" alt="">
</div>
<script>
var lessenPic=document.querySelector('.div1');
var magnifier=document.querySelector('.div2');
var largePic=document.querySelector('img');
var enlargement=document.querySelector('.div3');
var changeBtn=document.querySelector('.changeBtn');
lessenPic.onmousemove=function (eve) {
var e=eve||window.event;
var moveLeft=e.clientX-40.5;
var moveTop=e.clientY-27;
switch (true){
case moveLeft<0:moveLeft=0;
break;
case moveLeft>324:moveLeft=324;
break;
case moveLeft>=0&&moveLeft<=324:magnifier.style.left=moveLeft+'px';
break;
}
switch (true){
case moveTop<0:moveTop=0;
break;
case moveTop>216:moveTop=216;
break;
case moveTop>=0&&moveTop<=216:magnifier.style.top=moveTop+'px';
break;
}
magnifier.style.display='block';
enlargement.style.display='block';
largePic.style.left=(-3.75)*moveLeft+'px';
largePic.style.top=(-3.75)*moveTop+'px';
};
lessenPic.onmouseleave=function () {
magnifier.style.display='none';
enlargement.style.display='none';
};
changeBtn.onclick=function () {
lessenPic.style.backgroundImage='url("Images/stairs.jpg")';
largePic.setAttribute('src','Images/stairs.jpg');
largePic.setAttribute('width','1620px');
largePic.setAttribute('height','1080px');
}
</script>
</body>
</html>
2.三级联动案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<style>
select{ width: 168px; height: 30px; outline: none;}
option{ text-align: center; }
span{ margin-left: 30px; }
</style>
</head>
<body>
<span>省：</span>
<select name="province" id="province">
<option value="makeChoice">--------选择省份--------</option>
</select>
<span>市：</span>
<select name="city" id="city"></select>
<span>区/县：</span>
<select name="county" id="county"></select>
<script>
var province=document.querySelector('#province')
var city=document.querySelector('#city')
var county=document.querySelector('#county')
var provinceArr=["北京市","天津市","上海市","重庆市","河北省","四川省"];
var cityArr=[
["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县"],
["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","蓟县","宁河县","静海县"],
["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县"],
["渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","万州区","涪陵区","黔江区","长寿区","合川市","永川市","江津市","南川市","綦江县","潼南县","铜梁县","大足县","荣昌县","璧山县","垫江县","武隆县","丰都县","城口县","梁平县","开县","巫溪县","巫山县","奉节县","云阳县","忠县","石柱土家族自治县","彭水苗族土家族自治县","酉阳土家族苗族自治县","秀山土家族苗族自治县"],
["石家庄市","张家口市","承德市","秦皇岛市","唐山市","廊坊市","保定市","衡水市","沧州市","邢台市","邯郸市"],
["成都市","广元市","绵阳市","德阳市","南充市","广安市","遂宁市","内江市","乐山市","自贡市","泸州市","宜宾市","攀枝花市","巴中市","达州市","资阳市","眉山市","雅安市","阿坝州","甘孜州","凉山州"]
];
var countyArr=[
[],
[],
[],
[],
[
["长安区","桥东区","桥西区","新华区","裕华区","井陉矿区","辛集市","藁城市","晋州市","新乐市","鹿泉市","井陉县","微水镇","正定县","正定镇","栾城县","栾城镇","行唐县","龙州镇","灵寿县","灵寿镇","高邑县","高邑镇","深泽县","深泽镇","赞皇县","赞皇镇","无极县","无极镇","平山县","平山镇","元氏县","槐阳镇","赵县"],
["桥西区","桥东区","宣化区","下花园区","宣化县","张家口市宣化区","张北县","张北镇","康保县","康保镇","沽源县","平定堡镇","尚义县","南壕堑镇","蔚县","蔚州镇","阳原县","西城镇","怀安县","柴沟堡镇","万全县","孔家庄镇","怀来县","沙城镇","涿鹿县","涿鹿镇","赤城县","赤城镇","崇礼县"],
["双桥区","双滦区","鹰手营子矿区","承德县","下板城镇","兴隆县","兴隆镇","平泉县","平泉镇","滦平县","滦平镇","隆化县","隆化镇","丰宁满族自治县","大阁镇","宽城满族自治县","宽城镇","围场满族蒙古族自治县"]
],
[
["青羊区","锦江区","金牛区","武侯区","成华区","龙泉驿区","青白江区","新都区","温江区","都江堰市","彭州市","邛崃市","崇州市","金堂县","赵镇","双流县","郫县","郫筒镇","大邑县","晋原镇","蒲江县","鹤山镇","新津县"],
["市中区","元坝区","朝天区","旺苍县","东河镇","青川县","乔庄镇","剑阁县","下寺镇","苍溪县"],
["涪城区","游仙区","江油市","三台县","潼川镇","盐亭县","云溪镇","安县","花荄镇","梓潼县","文昌镇","北川羌族自治县","曲山镇","平武县"]
]
];
for (var i=0;i<provinceArr.length;i++){
var provinceOption=new Option(provinceArr[i]); //创建省份选项内容
province.options.add(provinceOption); //将创建的省份添加到容器
}
var provinceIndex=0;
var cityIndex=0;
province.onchange=function (eve) { //通过 onchange事件实现联动（一）
var e=eve || window.event;
provinceIndex=e.target.selectedIndex-1; //通过“change”事件获取所选省份的Index
console.log(provinceIndex);
if (provinceIndex<0){ //为了实现省份编号与城市数组下标对应，获取provinceIndex时进行了“-1”处理，（四）
city.options.length=0; //导致省份第一个选项编号等于-1，为避免获取城市数组时的 for循环报错，增加 if判断
county.options.length=0;
}else{
city.options.length=0; //在选择或切换省份选项时，需要对城市option进行一次清空，否则后续省份的城市会直接追加在一起（三）
for (var j=0;j<cityArr[provinceIndex].length;j++){ //通过for循环按照省份编号获取对应的城市数组内容（二）
var cityOption=new Option(cityArr[provinceIndex][j]); //创建城市选项内容
city.options.add(cityOption); //将创建的城市添加到容器
}
//在省份option触发 onchange事件时，城市option会根据获取的省份编号默认省份中的第一个城市，但区县option无法获取
//城市的编号，所以此处不能使用 cityIndex，直接赋值[0]作为默认城市编号，将第一个市的区县添加到区县容器。
county.options.length=0;
if (provinceIndex<4){
county.options.add(new Option(cityArr[provinceIndex][0]));
}else{
for (var k=0;k<countyArr[provinceIndex][0].length;k++){
var countyOption=new Option(countyArr[provinceIndex][0][k]);
county.options.add(countyOption);
}
}
}
};
city.onchange=function () {
cityIndex = event.target.selectedIndex;
county.options.length = 0;
if (provinceIndex<4){
county.options.add(new Option(cityArr[provinceIndex][cityIndex]));
}else{
for (var m = 0; m < countyArr[provinceIndex][cityIndex].length; m++) {
var countyOption = new Option(countyArr[provinceIndex][cityIndex][m]);
county.options.add(countyOption);
}
}
}
</script>
</body>
</html>
3.知识碎片
① select元素（对象）用于创建HTML中的下拉列表，一个<select>标签就代表一个下拉框
通常 select需要与 option配合使用
在js中，select元素的 option创建方式：var newOpt= new Option(' selectObject ');
select元素添加 option的方式：selectOpts .options .add( newOpt );
select元素清空 option的方式：selectOpts .options .length = 0;
select内容改变时触发的事件：selectOpts .onchange = function(){ };
select当前选中 option的序号：var index = selectOpts .selectedIndex;（序号从0开始）
② <option>标签用于定义包含在<select>、<optgroup>或<datalist>元素中的项
在 js中，options 用于表示<select>元素中所有的<option>标签的一个“数组”
语法：var 变量名 = selectObject .options；
options属性：.length表示options数组的长度，.selectedIndex 返回已选择的option的索引值
Options方法：.options[index]，通过指定索引检索对应元素
.options. item(index)，返回指定索引的元素
.Options.add(' ')，向options中添加指定数组元素
③ <datalist>标签要与 input配合使用，用于为 input输入框创建可选列表
需要通过 <input>元素的 list属性绑定 datalist元素
语法示例：
<input list="fruits">
<datalist id="fruits">
<option value="apple">
<option value="peach">
<option value="purple">
</datalist>
4.事件委托案例
在 js中对获取的对象进行事件绑定，对于使用 js方法创建的相同对象，该事件无效
针对此种场景，借助冒泡事件的特性，将事件绑定在父元素上，用于监听子元素的冒泡事件，并定位相应子元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<div>
<ul>
<li>liOne</li>
<li>liTwo</li>
<li>liThree</li>
</ul>
<button>增加li</button>
</div>
<script>
var ul=document.querySelector('ul');
var lis=document.querySelectorAll('li');
for (var i=0;i<lis.length;i++){
lis[i].onclick=function () {
console.log(this.innerHTML);
}
}
var btn=document.querySelector('button');
btn.onclick=function () {
var newLi=document.createElement('li');
newLi.innerHTML='newLi';
ul.appendChild(newLi);
}
// 上述书写方式下，通过 js创建的 newLi元素无法调用 lis[i]绑定的 onclick事件
// 可以通过对 newLi再绑定一个与 lis[i]相同的 onclick事件解决，但会造成代码冗余
// 而使用<事件委托>的方式，可以很好的解决该问题，
// 即只需要在 li的父元素 ul上绑定一次onclick事件，书写方式如下：
ul.onclick = function () {
console.log(event.target.innerHTML);
}
</script>
</body>
</html>
5.全选、反选案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>勾选取消案例</title>
</head>
<body>
<button class="chkAll">全选</button>
<button class="cancelAll">取消</button>
<button class="chkRev">反选</button>
<div style="margin:10px 30px">
<input type="checkbox">手机 <br>
<input type="checkbox">手表 <br>
<input type="checkbox">项链 <br>
<input type="checkbox">外套 <br>
<input type="checkbox">帽子 <br>
<input type="checkbox">眼镜 <br>
<input type="checkbox">手枪 <br>
</div>
<script>
var checkAll=document.querySelector('.chkAll');
var cancelAll=document.querySelector('.cancelAll');
var chkReverse=document.querySelector('.chkRev');
var checkList=document.querySelectorAll('input');
checkAll.onclick=function () {
for (var i=0;i<checkList.length;i++){
checkList[i].checked=true;
}
};
cancelAll.onclick=function () {
for (var i=0;i<checkList.length;i++){
checkList[i].checked=false;
}
};
chkReverse.onclick=function () {
for (var i=0;i<checkList.length;i++){
if (checkList[i].checked==false){
checkList[i].checked=true;
}else{
checkList[i].checked=false;
}
}
};
</script>
</body>
</html>
浙公网安备 33010602011771号