java毕业设计网站建设/互联网营销师在哪里报名
事件监听器事件处理器:通过操作HTML属性来给元素添加事件这种方式的缺陷:不能对同一个元素多次添加相同的事件要移除事件处理器的事件可以通过obj.事件名=null实现事件监听器:1.绑定事件使用addEventListener()为一个元素添加事件语法: obj.addEventListener(type,fn,false)type->字符串,指的是事件类型,如click,此处不加onfn->函数名,或者一个匿名函数false->事件冒泡阶段调用2.解绑事件使用removeEventListener()解绑事件语法:obj.removeEventListener(type,fn,false)这个方法只能解除事件监听器绑定的事件,不能解除事件处理器添加的事件一般情况下,添加了事件没必要去解除事件,但在有的时候需要用到如:一次性事件,在事件处理中再移除事件在实际开发中,拖拽的效果,在onmouseup事件中就必须移除onmousemove事件.event对象:保存事件的详细信息每次调用一个事件的时候都会默认给事件处理函数添加一个默认的参数event 属性:type:类型keycode:键码值shiftkey:是否按下shiftctrlkey: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:是否按下shiftctrlkey: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 bodyforms images linkslocation 地址对象,操作URL地址href search hash navigator 浏览器对象,获取浏览器版本等信息userAgenthistory 历史对象 用于操作浏览历史framesscreen 屏幕对象,用于操作屏幕宽高等
一个窗口就是一个window对象,窗口中的html文档就是一个document对象,它是window的子对象window对象下的子对象 location\navigate\等是用于操作浏览器窗口的,所以也称为BOM(Browser Object Module)浏览器对象模型window对象的常用方法alert() 提示对话框在alert()实现换行需要使用'\n'confirm() 判断对话框confirm('提示文字') 可以提供确认如果用户点击确定返回true否则返回falseprompt() 输入对话框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对象: 操作urlhref:当前页面的地址search:url中'?'后面的内容 主要用于数据库查询hash:url中'#'后面的内容 主要用于锚点链接navigatewindow.navigator.userAgent:浏览器版本信息示例:
01打开新窗口
02confirm举例
03用户输入
04定时器演示
05倒计时效果
06跑马灯效果
07当前页面的url01打开新窗口
<!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是否大于0if (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 = 0oBtn[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 文档的cookieURL 当前文档的url和window.location.href的区别:document.URL只能获取,不能设置referrer 返回浏览者到达当前文档的url方法:document.writeln() 输出内容并换行getElementBy...getElementsBy...createElement()createTextNode()
***学习让我痛苦,但我生来就不是为了快乐***
以下附件来自:莫振杰<<从0到1 javascript快速入门>>
时间对象的方法
数学对象的方法
数组的方法
字符串的方法
常用随机数
