1、解绑事件
(1)用什么方式绑定事件,就应该用对应的方式解绑事件
对象.on事件名字=事件处理函数-----绑定事件
对象.on事件名字=null;
(2)对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
对象.removeEventListener("没有on的事件类型",命名函数,false);---解绑事件
(3)对象.attachEvent("on事件类型",命名函数);---绑定事件
对象.detachEvent("没有on事件类型",命名函数);---解绑事件
2、解绑事件兼容代码
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;
}
}
3、冒泡事件
事件捕获1:从外向里 事件目标2:最开始选择的哪个 事件冒泡3:从里像外
阻止事件冒泡:
window.event.cancleBubble=true; 谷歌、IE支持,火狐不支持
事件参数对象(e).stopPropagation(); 谷歌、火狐支持
window.event和e都是事件参数对象
4、为同一个元素绑定多个不同事件,指向同一个事件处理函数
my$("btn").οnclick=f1;
my$("btn").mouseover=f1;
my$("btn").mouseout=f1;
function f1(e){
switch (e.type){
case "click":alert("哈哈");break;
case "mouseover":this.style.backgroundColor="red";break;
case "mouseout":this.style.backgroundColor="";break;
}
}
5、 百度大项目
<div id="box">
<input type="text" id="txt" value="">
<input typr="button" value="搜索" id="btn">
</div>
<script src="common.js"></script>
<script>
var keyWords=["哈哈","嘿嘿"];
my$("txt").οnkeyup=function(){
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]);//追加
}
}
if(this.value.length==0||tempArr.length==0){
if(my$("dv")){
my$("box").removeChild(my$("dv"));
}
return;
}
var dvObj=document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.style.width="350px";
dvObj.style.border="1px solid green";
for(var i=0;i<tempArr.length;i++){
var pObj=document.createElement("p");
dvObj.appendchild(pObj);
setInnerText(pObj,tempArr[i]);
pObj.style.margin=0;
pObj.style.padding=0;
pObj.style.cursor="pointer";
pObj.style.marginTop="5px";
pObj.style.marginLeft="5px";
pObj.οnmοuseοver=function(){
this.style.backgroundColor="yellow";
};
pObj.οnmοuseοver=function(){
this.style.backgroundColor="";
};
}
};
</script>
6、BOM(操作浏览器)
(1)onload---加载完毕执行
(2)onunload--页面关闭后才触发 onbeforeunload---页面关闭之前触发的
7、location
(1)属性
window.location.hash 地址栏上#及后面的内容
window.location.host 主机名及端口号
window.location.hostname 主机名
window.location.pathname 文件路径---相对路径
window.location.port 端口号
window.location.protocol 协议
window.location.search 搜索的内容
window.location.href 设置跳转的页面地址
(2)方法
location.assign
location.reload 重新加载--刷新
location.replace 没有历史记录
8、history
back()---后退 forword()---前进 go()---正数前进负数后退
9、navigator
navigator.platform---判断浏览器所在系统平台类型
navigator.userAgent---判断用户浏览器类型
10、定时器
参数1:函数 参数2:时间---毫秒
var timeId=setInterval(function(){
alert("hello");
},1000);
document.getElementById("btn").οnclick=function(){
window.clearInterval(timeId)
};
11、图片晃动
<input type="button" value="摇起来" id="btn1"/>
<input type="button" value="停止" id="btn2"/>
<div id="dv">
<img src=""/>
<img src=""/>
</div>
<script src="common.js"></script>
<script>
my$("btn1").οnclick=function(){
timeId=setInterval(function(){
var x=parseInt(Math.random()*100+1);
var y=parseInt(Math.random()*100+1);
my$("dv").style.left=x+"px";
my$("dv").style.top=y+"px";
},10);
};
my$("btn2").οnclick=function(){
clearInterval(timeId);
};
</script>
12、星星亮起来
<input type="button" value="亮起来" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").οnclick=function(){
setInterval(function(
my$("dv").innerHTML=<span>*</span>;
var x=parseInt(Math.random()*600+1);
var y=parseInt(Math.random()*600+1);
my$("dv").firstElementChild.style.left=x+"px";
my$("dv").firstElementChild.style.ltop=y+"px";
),10);
};
</script>
13、美女时钟
<img src="meimei/00-00.jpg" id="im"/>
<script src="common.js"></script>
<script>
function f1(){
function(){
var dt=new Date();
var hour=dt.getHour();
var second=dt.Seconds();
hour=hour<10?"0"+hour:hour;
hour=second<10?"0"+second:second;
my$("im").src="meimei/"+hour+"-"+second".jpg";
}
}
f1();
//页面加载完毕后,过了1秒执行函数
setInterval(f1,1000);
</script>