目录
oBtn.οnclick=function(){.....};
obj.addEventListener("type",fn,false);
obj.removeEventListener("type",fn,false);
后面的内容为querystring查询字符串,一般用于数据库查询
事件进阶
事件处理器
oBtn.οnclick=function(){.....};
事件处理器没法为一个元素添加多个相同事件
事件监听器
为一个元素添加多个相同事件
obj.addEventListener("type",fn,false);
type:事件类型
fn:函数名
1.函数名
2.匿名函数
false:事件冒泡阶段调用
布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。默认为false
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
1.函数名
oBtn.addEventListener("click",alertMes,false);
2.匿名函数
oBtn.addEventListener("click",function(){
alert("JavaScript");
},false);
多次调用window.onload
直接写多个window.onload只会执行最后一次
1.只需将每个window.onlad改成
addEventListener("load",fucntion(){.....},false);
2.使用addLoadEvent()函数
<script>
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != "function")
{
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(function(){
...
}));
</script>
解绑事件
obj.removeEventListener("type",fn,false);
fn必须为函数名,而不能是一个函数
只能解绑“”事件监听器”添加的添加的事件,不能解除“事件处理器”添加的事件
不能解绑事件监听器添加的匿名函数事件
可以用obj.事件名=null
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload=function(){
var oP =document.getElementById("content");
var oBtn = document.getElementById("btn");
oP.onclick=changeColor;
function changeColor(){
this.style.color = "hotpink";
}
oBtn.addEventListener("click",function(){oP.onclick=null;},false);
};
</script>
<body>
<p id="content">绿叶学习网</p>
<input id="btn" type="button" value="解除"/>
</body>
</html>
oP.οnclick=changeColor;
限制按钮只可以执行一次点击事件
在点击事件函数后面添加解除事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload=function(){
var oBtn = document.getElementById("btn");
oBtn.addEventListener("click",alertMes,false);
function alertMes(){
alert("我是一个弹窗~");
oBtn.removeEventListener("click",alertMes,false);
}
}
</script>
<body>
<input type="button" name="btn" id="btn" value="弹出" />
</body>
</html>
event对象
当一个事件发生的时候,这个事件有关的信息会保存到event对象中
event对象的属性
type
keyCode
shiftKey
ctrlKey
altKey
oBtn.οnclick=function(e)
每次调用一个事件时候就是默认给事件添加一个隐藏参数event对象并存储于变量名e中
KeyCode
获取键盘中按下的哪一个键
this
哪个DOM对象调用了this所在的函数,那么this就指向哪个对象
{
oLi[i].style.color="hotpink"; X
this.style.color="hotpink";
}
必须用this为典型的闭包问题
window对象
每一个浏览器就是一个window对象
window子对象
window方法
document.write()往空白窗口输出文本
var opener = window.open();
opener.document.write("这是一个新窗口");
opener.document.body.style.backgroundColor="lightskyblue";
var opener = null
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oBtn1 = document.getElementById("open");
var oBtn2 = document.getElementById("operate");
var opener = null;
oBtn1.onclick=function(){
opener = window.open();
var strHTML = '<!DOCTYPE html>\
<html>\
<head>\
<title></title>\
</head>\
<body>\
<div>"月亮代表我的心"</div>\
</body>\
</html>';
opener.document.write(strHTML);
};
oBtn2.onclick=function(){
var oDiv = opener.document.getElementsByTagName("div")[0];
oDiv.style.fontweight = "bold";
oDiv.style.color = "hotpink";
};
};
</script>
<body>
<input type="button" name="open" id="open" value="打开新窗口" />
<input type="button" name="operate" id="operate" value="操作新窗口" />
</body>
</html>
setTimeout(code,time)
code:可以为函数和函数名
time:毫秒
var timer = setTimeout(alertMes.2000);
function alertMes(){
'欢迎光临';
}
clearTimeout(timer);
setInterval(code,time)
每一次重复定时都会叠加,所以需要清除clearInterval()
document对象
属性
方法
获取和创建元素的所有方法
documen.write()
document.writeln()
writeln会在输出内容后面加\n,会有间隔,在pre内显示换行
Location对象
href
当前页面地址
window.loaction.href
search ?
后面的内容为querystring查询字符串,一般用于数据库查询
当前页面地址?后面的内容
window.loaction.search
hash #
锚点链接
当前页面地址#后面的内容
window.loaction.hash
navigator对象
userAgent
window.navigator.userAgent