标签：function console log javascript list 事件 day12 小圆点 你好
1）BOM
window BOM的根元素 使用window的方法时可以不用加window window.open(); window.alert(); open(); alert(); 视口宽高innerWidth innerHeight 浏览器宽高 outerWidth outerHeight // 只能获取，不能设置 // console.log(screenLeft,screenTop);//这两个是相同的，都是指当前窗口相对屏幕的坐标 // console.log(screenX,screenY); location 本地 location.reload();重载 location.href():跳转页面 也可以获取当前页面 location.assign();跳转页面 location.replace(): 替换新页面 // screen 屏幕 // console.log(screen.width,screen.height); //全屏幕宽高 // console.log(screen.availWidth,screen.availHeight);//不带任务栏的屏幕宽高 // navigator 浏览器信息 // 用户浏览器信息 // console.log(navigator.userAgent); 2)事件基础 IE8以上支持 给DOM元素添加一个事件侦听（监听）,只能收到对应事件类型的消息， 当收到这个消息，执行事件回调函数 DOM.addEventListener(事件类型,事件回调函数); click这个消息是系统消息 document.addEventListener("click",clickHandler);
/*
事件回调函数
e 有且仅有一个参数e
e 是一个事件对象,侦听事件收到消息时获得的事件对象
*/
function clickHandler(e){
console.log(e);
}
3）事件原理
div0.addEventListener(事件类型,事件回调函数,是否捕获时执行); 事件类型 必须是字符串，可以设置为任意字符串，但是部分字符串是系统事件类型 事件回调函数 指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数 是否捕获时执行 默认值是false，在冒泡时执行，捕获时不执行， 如果设置为true，在捕获时执行div0.addEventListener("click",clickHandler0,true);
div1.addEventListener("click",clickHandler1);
div2.addEventListener("click",clickHandler2,true);
function clickHandler0(e){
console.log("点击div0")
}
function clickHandler1(e){
console.log("点击div1")
}
function clickHandler2(e){
console.log("点击div2")
// console.log(e);
// 停止冒泡
e.stopPropagation();
// 仅适用在IE8及以下
// e.cancelBubble=true;
}
4）事件委托
</style>
</head>
<body>
<ul id="menu">
<li>北京
<ul>
<li>海淀</li>
<li>昌平
<ul>
<li>沙河</li>
<li>回龙观</li>
<li>龙泽</li>
<li>定福皇庄</li>
<li>天通苑</li>
</ul>
</li>
<li>朝阳</li>
<li>东城</li>
<li>西城</li>
</ul>
</li>
<li>河北</li>
<li>陕西</li>
<li>河南</li>
<li>山西</li>
</ul>
<script>
// 将子元素的侦听事件全部委托给最外层的父元素,这种情况叫做事件委托
/* var list;
init();
function init(){
list=Array.from(document.getElementsByTagName("li"));
list.forEach(function(item){
item.addEventListener("click",clickHandler);
})
}
function clickHandler(e){
e.stopPropagation();
// this 是被点击的元素
if(this.firstElementChild){
if(!this.bool){
this.firstElementChild.style.display="none";
}else{
this.firstElementChild.style.display="block";
}
this.bool=!this.bool;
}
} */
// _______________________2
init();
function init(){
var menu=document.querySelector("#menu");
menu.addEventListener("click",clickHandler)
}
function clickHandler(e){
// console.log(this,e.target);//this在事件函数中是被点击的对象(暂时),
// 实际上this是侦听事件的对象,也就是外面执行addEventListener方法的对象menu
// e.target 事件的目标 真实点击到最终得目标对象
// e.currentTarget 和this相同,都是事件侦听的对象
e.stopPropagation();
// this 是被点击的元素
if(e.target.nodeName!=="LI") return;
if(e.target.firstElementChild){
if(!e.target.bool){
e.target.firstElementChild.style.display="none";
}else{
e.target.firstElementChild.style.display="block";
}
e.target.bool=!e.target.bool;
}
}
</script>
5）轮播图
<style>
.crousel
{
width:1500px;
height: 500px;
margin: auto;
position: relative;
overflow: hidden;
}
.imgCon{
width:7500px;
height: 500px;
position: absolute;
font-size: 0;
transition: all 0.5s;
left:0;
}
.imgCon>img{
width:1500px;
height: 500px;
}
.leftBn,.rightBn{
position: absolute;
top:220px;
}
.leftBn{
left:50px;
}
.rightBn{
right: 50px;
}
ul{
list-style: none;
position: absolute;
margin: 0;
padding: 0;
bottom: 50px;
left:640px;
}
li{
width: 28px;
height: 28px;
border: 2px solid #FF0000;
float: left;
border-radius: 50%;
margin-left: 20px;
}
li:nth-child(1){
margin-left: 0;
}
.clear::after
{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clear{
zoom: 1;
}
</style>
</head>
<body>
<div class="crousel">
<div class="imgCon">
<img src="./img/a.jpeg">
<img src="./img/b.jpeg">
<img src="./img/c.jpeg">
<img src="./img/d.jpeg">
<img src="./img/e.jpeg">
</div>
<img src="./img/left.png" class="leftBn">
<img src="./img/right.png" class="rightBn">
<ul class="clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var imgCon,leftBn,rightBn,list,prevDot;
var pos=0;
init();
function init(){
// 获取所有图片容器，左右按钮
imgCon=document.querySelector(".imgCon");
leftBn=document.querySelector(".leftBn");
rightBn=document.querySelector(".rightBn");
// 将所有li获取并且转换为数组
list=Array.from(document.querySelectorAll("li"));
// 给左右按钮增加点击事件
leftBn.onclick=clickHandler;
rightBn.onclick=clickHandler;
// list是所有小圆点的数组，遍历这个数组
list.forEach(function(item){
// 给每个小圆点增加点击事件
item.onclick=dotClickHandler;
});
changeDot();
}
function clickHandler(){
// 如果点击左边的按钮
if(this===leftBn){
pos--;
if(pos<0) pos=0;
}else{
// 如果点击了右边的按钮
pos++;
if(pos>4) pos=4;
}
imgCon.style.left=pos*-1500+"px";
changeDot();
}
function dotClickHandler(){
// this就是被点击的元素，list是所有小圆点的数组
// 查找当前点击小圆点是数组中第几个，这个第几个正好就是我们要显示第几张图片
pos=list.indexOf(this);
imgCon.style.left=pos*-1500+"px";
changeDot();
}
function changeDot(){
// 如果上一个小圆点变量存在时
if(prevDot){
// 设置上一个小圆点的背景色透明
prevDot.style.backgroundColor="rgba(255,0,0,0)";
}
// list是小圆点的数组，pos是当前应该显示第几张图
// 将上一个小圆点变量设置为当前这个小圆点数组中对应的那个小圆点
prevDot=list[pos];
// 并且设置当前这个小圆点背景色为红色
prevDot.style.backgroundColor="rgba(255,0,0)";
}
</script>
标签：function,console,log,javascript,list,事件,day12,小圆点,你好 来源： https://www.cnblogs.com/zqm0924/p/12983820.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。