绑定事件的区别：
addEventListener（）
attachEvent()
相同点：都可以为元素绑定事件
不同点：
1、方法名不一样
2、参数个数不一样：addEventListener:三个参数；attachEvent：两个参数
3.addEventListener：谷歌火狐支持，IE11支持，IE8不支持；
attachEvent：谷歌火狐不支持，IE11不支持，IE8支持；
4.this不同，addEventListener：中的this是当前绑定事件的对象；
attachEvent：中的this是window；
5.addEventListener：中事件的类型（事件的名字）没有on；
attachEvent：中的事件类型（事件名字）有on
为元素解绑事件：
<body>
<input type="button" name="" value="显示" id="btn">
<input type="button" name="" value="干掉第一个按钮" id="btn2">
<div id="dv"></div>
</body>
<script src="xiec.js"></script>
<script>
//1.对象.on事件名字=事件处理函数-----绑定事件
my$('btn').onclick=function(){
console.log("hh");
};
my$('btn').onclick=function(){
//解绑事件
my$('btn').onclick=null;
};
//----------------------------------------------------
//方法二：
function f1(){
console.log("jjj");
}
function f2(){
console.log("jiebang ");
}
my$('btn').addEventListener("click",f1,false);
my$('btn').addEventListener("click",f2,false);
//点击第二个按钮把第一个解决掉
my$('btn2').onclick=function(){
//解绑事件的时候，需要在绑定事件的时候，使用命名函数
my$('btn').removeEventListener("click",function(){
console.log('jjj');
},false)
};
//解绑事件：
/*
注意：用什么方式绑定事件，就应该用对应的的方式解绑事件
1.解绑事件
对象.on事件名字=事件处理函数---绑定事件
对象.on事件名字=null；
2.方法二
</script>
事件的兼容：
<script>
//绑定事件的兼容：
function addEventListener(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
//解绑事件的兼容：
function removeEventListener(element,type,fnName){
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
</script>
事件冒泡：
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 携程</title>
<style >
#div1{
width: 300px;
height: 200px;
border:1px solid red;
background-color: red;
}
#div2{
width: 250px;
height: 150px;
border:1px solid red;
background-color: green;
}
#div3{
width: 200px;
height: 100px;
border:1px solid red;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
<script src="xiec.js"></script>
<script>
//事件冒泡：多个元素嵌套，有层次关系，这些元素都注册 了相同的事件，如果里面元素的事件被触发，外面的元素的该事件自动的触发了
my$("div1").onclick=function(){
console.log(this.id);
};
my$("div2").onclick=function(){
console.log(this.id);
};
my$("div3").onclick=function(){
console.log(this.id);
};
document.body.onclick=function(){
console.log("asdibfi");
};
</script>
</html>
阻止事件冒泡：
window.event.cancelBubble=true；IE特有的，谷歌支持，火狐不支持
e.stopPropagation（）；谷歌和火狐支持
事件阶段：（三个）
1.事件捕获阶段
2.事件目标阶段
3.事件冒泡阶段
QQ图片20190723153642.png
为同一个元素注册多个不同的事件
<body>
<input type="button" name="" value="xiaohas" id="btn">
</body>
<script src="xiec.js"></script>
<script>
//为同一个元素绑定多个不同的事件，指向相同的事件处理函数
my$('btn').onclick=f1;
my$('btn').onmouseover=f1;
my$('btn').onmouseout=f1;
function f1(e){
switch (e.type){
case "click":
alert("haoshau");
break;
case "mouseover":
this.style.backgroundColor="red";
break;
case "mouseout":
this.style.backgroundColor="green";
break;
}
}
</script>
案例：模拟百度搜索框：
<style >
*{
padding: 0%;
margin:0%;
}
#txt{
width: 400px;
height: 30px;
border:1px solid gray;
position: absolute;
top: 50%;
left: 500px;
}
#btn{
width: 100px;
height: 32px;
position: absolute;
top: 50%;
left: 905px;
border:0;
}
</style>
</head>
<body>
<input type="text" name="" id="txt">
<input type="button" name="" value="搜索" id="btn">
</body>
<script src="xiec.js"></script>
<script>
var keywords=["小样是最棒的"，"小样是最帅的","小美是最可爱的 ","小花是笑话","传播真善美","苹果好贵啊","我想吃西瓜"];
my$('txt').onkeyup=function(){
//每一次的键盘抬起都判断页面中有没有这个div
if(my$('dv')){
//删除一次
my$('box').removeChild(my$('dv'));
}
//获取文本框输入的内容
var text=this.value;
var tempArr=[];//临时数组，存放对应上的数据
//把文本框的输入 的内容和数组中的每个数据对比；
for (var i = 0; i < keywords.length; i++) {
//是否是最开始出现的
if(keywords[i].indexOf(text)==0){
tempArr.push(keywords[i]);//追加
}
}
//如果文本框是空的，临时数组也是空的 ，就不用创建div
if(this.value.length==0||tempArr.length==0){
//如果页面中有这个div，删除这个div
if (my$('dv')){
my$('box').removeChild(my$('dv'));
}
return;
}
//创建div，，把div加入id为box的div中
var dvobj=document.creatElement('div');
my$('box').appendChild(dvobj);
dvobj.id="dv";
dvobj.style.width="400px";
dvobj.style.border="1px solid gray";
//循环遍历临时数组，创建对应的p标签
for (var i = 0; i < tempArr.length; i++) {
//创建p标签
var pobj=document.creatElement('p');
//把p加到div中
dvobj.appendChild(pobj);
setInnerText(pobj,tempArr[i]);
pobj.style.margin=0;
pobj.style.padding=0;
pobj.style.cursor="pointer";
pobj.style.marginLeft="5px";
pobj.style.marginTop="5px";
//鼠标进入
pobj.onmouseover=function(){
this.style.backgroundColor="yellow";
};
//鼠标离开
pobj.onmouseout=function(){
this.style.backgroundColor="";
};
}
}；
</script>
</html>
BOM介绍
页面加载事件：
QQ图片20190723201556.png
QQ图片20190723201836.png
location对象
属性：
QQ图片20190723202913.png
方法：
QQ图片20190723203207.png
history对象：
<body>
<input type="button" name="" value="前进" id="btn1">
<input type="button" name="" value="后退" id="btn2">
</body>
<script src="xiec.js"></script>
<script>
my$('btn1').onclick=function(){
window.location.href="suiji.html";
};
my$('btn2').onclick=function(){
window.history.forward();
};
</script>
navigator对象：
QQ图片20190723204657.png
定时器：
QQ图片20190723204948.png
QQ图片20190723211419.png
亮晶晶案例：
QQ图片20190723211930.png
美女时钟案例：
<body>
<img src="" alt="" id="im">
</body>
<script src="xiec.js"></script>
<script>
function f1(){
//获取当期那时间
var dt=new Date();
//获取小时
var hour=dt.getHours();
//获取秒
var second =dt.getSecond();
hour=hour<10?"0"+hour:hour;
second=second<10?"0"+second:second;
my$('im').src="meinv/"+hour+"_"+second+".jpg";
}
f1();
//页面加载完毕后，过了1s才执行函数的代码
setInterval(f1,1000);
</script>
网友评论