事件监听器
事件处理器:
通过操作HTML属性来给元素添加事件
这种方式的缺陷:不能对同一个元素多次添加相同的事件
要移除事件处理器的事件可以通过obj.事件名=null实现
事件监听器:
1.绑定事件
使用addEventListener()为一个元素添加事件
语法: obj.addEventListener(type,fn,false)
type->字符串,指的是事件类型,如click,此处不加on
fn->函数名,或者一个匿名函数
false->事件冒泡阶段调用
2.解绑事件
使用removeEventListener()解绑事件
语法:obj.removeEventListener(type,fn,false)
这个方法只能解除事件监听器绑定的事件,不能解除事件处理器添加的事件
一般情况下,添加了事件没必要去解除事件,但在有的时候需要用到
如:一次性事件,在事件处理中再移除事件
在实际开发中,拖拽的效果,在onmouseup事件中就必须移除onmousemove事件.
event对象:
保存事件的详细信息
每次调用一个事件的时候都会默认给事件处理函数添加一个默认的参数event
属性:
type:类型
keycode:键码值
shiftkey:是否按下shift
ctrlkey:
altkey:
this:
哪个DOM对象调用了this所在的函数,那么this就指向这个DOM对象
示例:
01事件处理器的缺陷
02事件绑定
03多次调用window点onload
04解除事件
05event对象
06.禁用shift_ctrl_alt
07获取方向键
08this举例
09this用于闭包
示例:
01事件处理器的缺陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
alert("第一次点击")
}
oBtn.onclick=function(){
alert("第二次点击")
}
// 对同一个元素添加多次相同的事件,只有最后依次生效
oBtn.onclick=function(){
alert("第三次点击")
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="点击" />
</body>
</html>
02事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.addEventListener('click',function(){
alert("JavaScipt")
},false);
oBtn.addEventListener('click',function(){
alert("第二次JavaScipt")
},false);
oBtn.addEventListener('click',function(){
alert("第三次JavaScipt")
},false);
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="按钮" />
</body>
</html>
03多次调用window点onload
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 这种方式只执行了第三次window.onload
/*
window.οnlοad=function(){
var oBtn1=document.getElementById("btn1");
oBtn1.οnclick=function(){
alert("第一次调用window.onload")
};
};
window.οnlοad=function(){
var oBtn2=document.getElementById("btn2");
oBtn2.οnclick=function(){
alert("第二次调用window.onload")
};
};
window.οnlοad=function(){
var oBtn3=document.getElementById("btn3");
oBtn3.οnclick=function(){
alert("第三次调用window.onload")
};
}
*/
window.addEventListener('load',function(){
var oBtn1=document.getElementById("btn1");
oBtn1.onclick=function(){
alert("第一次调用window.onload")
}
},false)
window.addEventListener('load',function(){
var oBtn2=document.getElementById("btn2");
oBtn2.onclick=function(){
alert("第二次调用window.onload")
}
},false)
window.addEventListener('load',function(){
var oBtn3=document.getElementById("btn3");
oBtn3.onclick=function(){
alert("第三次调用window.onload")
}
},false)
/*
// 还可以通过自定义一个装饰器函数来完成这个任务
function addLoadEvent(func){
var oldοnlοad=window.onload;
if (typeof window.onload != "function"){
window.οnlοad=func;
}else{
window.οnlοad=function(){
oldonload();
func();
}
}
}
// 调用:
addLoadEvent(function(){
.....
})
*/
</script>
</head>
<body>
<input type="button" name="" id="btn1" value="按钮1" />
<input type="button" name="" id="btn2" value="按钮2" />
<input type="button" name="" id="btn3" value="按钮3" />
</body>
</html>
04解除事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oP=document.getElementById("content");
var oBtn=document.getElementById("btn");
// 为p添加事件
oP.addEventListener('click',changeColor,false);
// 点击按钮为p解除事件
oBtn.onclick=function(){
oP.removeEventListener('click',changeColor,false);
}
function changeColor(){
this.style.backgroundColor='yellow';
}
}
</script>
</head>
<body>
<p id="content">改变背景颜色</p>
<input type="button" name="" id="btn" value="解除" />
</body>
</html>
05event对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById("btn");
var oTxt=document.getElementById("txt");
var oLab=document.getElementById('tt');
oBtn.onclick=function(e){
alert(e.type)
}
oTxt.onkeyup=function(e){
oLab.value=e.keyCode;
}
}
</script>
</head>
<body>
<input type="text" name="" id="txt" value="" />
<label >键码:</label>
<input type="text" id='tt' />
<input type="button" name="" id="btn" value="按钮" />
</body>
</html>
06.禁用shift_ctrl_alt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
document.onkeydown=function(e){
if (e.shiftKey || e.altKey || e.ctrlKey){
alert("禁止使用shift/ctrl/alt键")
}
}
}
</script>
</head>
<body>
<p>
保存事件的详细信息
每次调用一个事件的时候都会默认给事件处理函数添加一个默认的参数event
属性:
type:类型
keycode:键码值
shiftkey:是否按下shift
ctrlkey:
altkey:
</p>
</body>
</html>
07获取方向键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oSpan=document.getElementsByTagName("span")[0];
window.addEventListener("keydown",function(e){
if (e.keyCode==38 || e.keyCode==87){
oSpan.innerHTML='上';
}else if(e.keyCode==39 || e.keyCode==68){
oSpan.innerHTML='右';
}else if(e.keyCode==40 || e.keyCode==83){
oSpan.innerHTML='下';
}else if(e.keyCode==37 || e.keyCode==65){
oSpan.innerHTML='左';
}else{
oSpan.innerHTML='';
}
},false)
}
</script>
</head>
<body>
<div id="">
你控制的方向是:<span style="font-weight:bold;color:hotpink;">
</span>
</div>
</body>
</html>
08this举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 哪个DOM对象调用了this所在的函数,那么this就指向这个DOM对象
window.onload=function(){
var oDiv=document.getElementsByTagName("div")[0];
var oP = document.getElementsByTagName('p')[0];
oDiv.onclick=changeColor;
oP.onclick=changeColor;
function changeColor(){
this.style.color='red';
}
}
</script>
</head>
<body>
<div id="">
这是点击div时的文字内容,此时this指代div
</div>
<p>这是点击p标签时的文字内容,此时this指代p</p>
</body>
</html>
09this用于闭包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oUl = document.getElementById('list');
var oLi=document.getElementsByTagName('li');
for (var i=0;i<oLi.length;i++){
oLi[i].onclick=function(){
// oLi[i].style.color='hotpink';
this.style.color='hotpink';
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
window对象`
一个浏览器窗口就是一个window对象
我们可以用对象的属性和方法来操作这个对象
window的结构:
document 文档对象
title
body
forms
images
links
location 地址对象,操作URL地址
href
search
hash
navigator 浏览器对象,获取浏览器版本等信息
userAgent
history 历史对象 用于操作浏览历史
frames
screen 屏幕对象,用于操作屏幕宽高等
一个窗口就是一个window对象,窗口中的html文档就是一个document对象,它是window的子对象
window对象下的子对象 location\navigate\等是用于操作浏览器窗口的,所以也称为BOM(Browser Object Module)浏览器对象模型
window对象的常用方法
alert() 提示对话框
在alert()实现换行需要使用'\n'
confirm() 判断对话框
confirm('提示文字') 可以提供确认
如果用户点击确定返回true
否则返回false
prompt() 输入对话框
prompt('提示')
返回一个用户输入的字符串
open() 打开窗口
close() 关闭窗口
setTimeOut() 开启一次性定时器
clearTimeout() 关闭一次性定时器
setInterval() 开启重复性定时器
clearInterval() 关闭重复性定时器
使用window的属性和方法时可以省略前缀window
打开窗口:
window.open(url,target)
如果url为空,则打开空白窗口
关闭窗口:
window.close() 没有参数
定时器:
每隔一段时间就执行一次代码
setTimeOut() 开启一次性定时器
setTimeOut(code,time)
code可以是一段代码或者函数或者函数名
time是时间,单位毫秒
clearTimeout() 关闭一次性定时器
timer=setTimeOut(...)
clearTimeout(timer)则可以移除这个定时器
setInterval() 开启重复性定时器
setInterval(code,time)
code可以是一段代码或者函数或者函数名
time是时间,单位毫秒
clearInterval() 关闭重复性定时器
location对象: 操作url
href:当前页面的地址
search:url中'?'后面的内容 主要用于数据库查询
hash:url中'#'后面的内容 主要用于锚点链接
navigate
window.navigator.userAgent:浏览器版本信息
示例:
01打开新窗口
02confirm举例
03用户输入
04定时器演示
05倒计时效果
06跑马灯效果
07当前页面的url
01打开新窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById("btn");
var oBtn2=document.getElementById("btn2");
oBtn.onclick=function(){
open("http://www.baidu.com");
}
oBtn2.onclick=function(){
var opener = open("");
opener.document.body.style.backgroundColor="lightcyan";
opener.document.write("这是一个新建的空白页面")
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="打开百度" />
<input type="button" name="" id="btn2" value="打开空白窗口" />
</body>
</html>
02confirm举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
if (confirm("确定要跳转到百度首页吗?")){
location.href="http://www.baidu.com";
}else{
document.write('你取消了跳转');
}
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="跳转" />
</body>
</html>
03用户输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
name = prompt('请输入你的名字');
document.write("欢迎<strong>"+name+"</strong>来到本网站")
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="输入" />
</body>
</html>
04定时器演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
setTimeout(function(){
alert('你好啊,朋友')
},3000)
}
</script>
</head>
<body>
<p>三秒后出现提示语</p>
</body>
</html>
05倒计时效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var n=5 //全局变量,记录秒数
setInterval(countDown,1000);
function countDown(){
//判断n是否大于0
if (n>0){
n--;
document.getElementById('num').innerHTML=n;
}
}
</script>
</head>
<body>
<p>倒计时:<span id="num">
</span></p>
</body>
</html>
06跑马灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
border:2px solid #2F4F4F;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementsByTagName("input");
var oDiv=document.getElementsByTagName('div');
var colors = ['purple','black','red','white','orange','green','cyan'];
var timer = null;
var i = 0
oBtn[0].onclick=function(){
// 为防止添加多个定时器先清除一次
clearInterval(timer);
//每隔一秒切换一次背景色
timer=setInterval(function(){
oDiv[0].style.backgroundColor=colors[i];
i++;
i=i % colors.length;
},1000);
}
oBtn[1].onclick=function(){
clearInterval(timer);
}
}
</script>
</head>
<body>
<input type="button" name="" id="" value="开始" />
<input type="button" name="" id="" value="暂停" />
<div id="">
文字变色
</div>
</body>
</html>
07当前页面的url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
// var url=window.location.href;
// document.write(url);
// msg = window.location.search;
// document.write(msg);
// info = window.location.hash;
// document.write(info);
//两秒后跳转百度
// setTimeout(function(){
// window.location.href="http://ww.baidu.com"
// },2000);
var ms=window.navigator.userAgent;
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
alert(ms)
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn" value="显示版本" />
</body>
</html>
document对象
document对象
属性:
title 标题
body 身体
forms 所有的form元素
iamges 所有的img元素
links 所有的a元素
cookie 文档的cookie
URL 当前文档的url
和window.location.href的区别:
document.URL只能获取,不能设置
referrer 返回浏览者到达当前文档的url
方法:
document.writeln() 输出内容并换行
getElementBy...
getElementsBy...
createElement()
createTextNode()
***学习让我痛苦,但我生来就不是为了快乐***
以下附件来自:莫振杰<<从0到1 javascript快速入门>>
时间对象的方法
数学对象的方法
数组的方法
字符串的方法
常用随机数