一. 事件类型 (1)事件的定义 指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可 以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执 行相应的代码。（可以理解为接受了指令才会去完成） （2）事件类型： 事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮， 按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论 的特定类型的事件。 （3）事件目标： 事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须 同时指定类型和目标。像 window 上的 load 事件或者链接的 click 事件。在客户 端 js 的应用程序中，Window、Document、和 Element 对象是最常见的事件目标， 但是某些事件也是由其它类型的对象触发的。 （4）事件处理程序或事件监听程序： 我们用户在页面中进行的点击这个动作， 鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即： click、mousemove、load 等都是事件的名称。响应某个事件的函数则称为事件 处理程序，或者叫做事件侦听器。 （5）事件对象： 事件对象是与特定事件相关且包含有关该事件详细信息的对象。事 件对象作为参数传递给事件处理程序函数。 所有的事件对象都有用来指定事件类 型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件对象定义一组属性。 （6）事件传播： 事件传播是浏览器决定那个对象触发其事件处理程序的过程。 二.事件模型 （1）.内联模型: 指的是行间的事件,写入html标签之中,这种写法不能保证内容和结构进行分离,所以不建议使用,要保证页面的简洁性,以及体验度. （2）.脚本模型: 由于内联模型违反了html和js的分离原则,为了解决这个问题,我们可以在JavaScript中处理事件,这种处理方式就是脚本模型. （3）.DOM2模型: 定义了两个方法,用于添加事件和删除事件处理程序的操作:addEventListener()和removerEventListenner().它们都接受3个参数:事件名,函数,冒泡或捕获的布尔值. 三.传统事件 1.鼠标事件： (1)onclick:用户点击某个对象时调用的事件. 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(1)onclick点击事件 //给获取到的div元素注册/添加一个点击事件 //或者可以理解为添加一个监听的处理程序 //然而这种添加事件的方式属于比较传统的方式 divElement.onclick=function(){ divElement.style.background='green'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(2).oncontextmenu:在用户点击鼠标右键打开上下文菜单时触发 (3)ondblclick:用户双击某一对象时调用的事件(鼠标左键) 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(3)ondblclick:用户双击某一对象时调用的事件 divElement.ondblclick=function(){ divElement.style.background='blue'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(4)onmousedown:鼠标按钮被按下调用的事件(鼠标左键/右键). 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(4)onmousedown:鼠标按钮被按下调用的事件(鼠标左键/右键) divElement.onmousedown=function(){ divElement.style.borderRadius=20+'px'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(5)onmouseenter:鼠标指针移动到某一对象上(悬浮). 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(5)onmouseenter:鼠标指针移动到某一对象上(悬浮) divElement.onmouseenter=function(){ divElement.style.background='pink'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(6)onmouseleave:鼠标离开对象时. 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(6)onmouseleave:鼠标离开对象时. divElement.onmouseleave=function(){ divElement.style.borderRadius=50+'%'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(7)onmousemove:鼠标被移动时 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(7)onmousemove:鼠标被移动时 divElement.onmousemove=function(){ divElement.style.borderRadius=50+'%'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(8)onmouseup:鼠标按键被松开. 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(8)onmouseup:鼠标按键被松开. divElement.onmouseup=function(){ divElement.style.borderRadius=50+'%'; divElement.style.background='aqua'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(9)onmousewheel:鼠标滑轮事件. 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(9)onmousewheel:鼠标滑轮事件. divElement.onmousewheel=function(){ divElement.style.background='yellow'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(10)onmouseover:鼠标移到某个元素之上. 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(10)onmouseover:鼠标移到某个元素之上. divElement.onmouseover=function(){ divElement.style.background='grey'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>(11)onmouseout:鼠标从某元素离开. 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload=function(){ var divElement=document.getElementsByClassName('div1')[0];//获取页面的div //(11)onmouseout:鼠标从某元素离开. divElement.onmouseout=function(){ divElement.style.background='grey'; } } </script> </head> <body> <div class="div1" style="border: 1px solid red;width: 200px;height: 200px;" ></div> </body> </html>2.键盘事件： (1)onkeydown:某个键盘按键被按下. 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ //获取页面元素 var text1=document.getElementById('txt1'); var span=document.getElementById('span1'); text1.onkeydown=function(){ //在键盘按下的时候 将信息(填入完整的内容) 写进span标签中 span.innerHTML='填入完整内容' } } </script> </head> <body> <input type="text" id="txt1" /> <span id="span1"></span> </body> </html>(2)onkeypress:某个键盘按键被按下并松开. 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ //获取页面元素 var text1=document.getElementById('txt1'); var span=document.getElementById('span1'); text1.onkeypress=function(){ span.innerHTML='填入完整的内容 按下并松开发生'; } } </script> </head> <body> <input type="text" id="txt1" /> <span id="span1"></span> </body> </html>(3)onkeyup:某个键盘按键被松开 例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ //获取页面元素 var text1=document.getElementById('txt1'); var span=document.getElementById('span1'); text1.onkeyup=function(){ span.innerHTML='填入完整的内容 松开发生'; } } </script> </head> <body> <input type="text" id="txt1" /> <span id="span1"></span> </body> </html>问题来了:我们如何如何获取到键盘的字符?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function myform(event){ //keyCode获取按下的键盘按键Unicode值,属性返回onkeypress事件触发的键的值得字符代码,或者onkeyup或onkeydown事件的键的代码. var code=event.keyCode; //如果需要将Unicode值转换为字符,可以使用formCharCode()方法 //formCharCode()方法可以接受一个指定的Unicode值,然后返回一个字符串(详解参考菜鸟教程) var str2=String.fromCharCode(code); document.getElementById('demo').innerHTML='数字:'+code+'=字符'+str2; } </script> </head> <body> <p>请输入键盘按键</p> <input type="text" size="40" onkeypress="myform(event)"/> <p id="demo"></p> </body> </html>3.事件对象EVent (1)什么是事件对象? 在触发DOM上的事件时,会产生一个事件的对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. (2)event对象的兼容性写法 event事件对象不能兼容所有的浏览器,我们一般采用下面这种方式进行兼容 var oEvent=ev || event; 如果参数不是 ev 而是 event 的时候，兼容方式也可以写成下面这种格式。 document.οnclick=function(event){ var oEvent=event || window.event; console.log(oEvent); } (3)event常用属性有哪些? oEvent.type:获取绑定事件的类型 oEvent.target:(在IE中用event.srcElement)返回触发事件的元素. oEvent.currentTarget:(IE低版本中不存在)表示当前所绑定事件的元素 例如:
<script type="text/javascript"> window.onload=function(){ document.onclick=function(ev){ //将事件的对象参数ev 或者event添加给变量oEvent; var oEvent=ev || event; //通过设置oEvent.target 或者oEvent.srcElement 返回触发事件的元素 var onCurrent=oEvent.target || oEvent.srcElement; console.log(onCurrent); //返回结果为:"[object HTMLInputElement]" //表示当前所绑定事件的元素 console.log(oEvent.currentTarget); //返回结果为:"[object HTMLDocument]" console.log(oEvent.type); //输出结果为:"click" } } </script>4.目标事件： 5.表单事件： 例如：
<script type="text/javascript"> window.onload=function(){ //获取form表单,从而添加提交事件 var form=document.getElementById('form1'); form.onsubmit=function(){ //表示通过name获取表单元素的值 var name=document.form1.text1.value; } } </script> ........... <body> <form name="form1" action="" id="form1" method="post"> <input type="text" value="" name="text1" /> <br /> <input type="submit" name="submit_01" value="提交"/> </form> </body>例如:提交表单事件:输入两次密码一致时,登陆成功,否则重新输入
<script type="text/javascript"> // 输入两次密码一致时,登陆成功,否则重新输入 function form_submit(){ var pwd1=document.for1.pwd.value; var pwd2=document.for1.pwd1.value; if(pwd1!=''|| pwd1!=null && pwd2!='' || pwd2!=null){ if(pwd1==pwd2){ return true; //提交成功 }else if{ alert('密码不一致,请重新输入'); document.for1.pwd.value=''; document.for1.pwd.focus(); //添加焦点 document.for1.pwd1.value=''; return false; }else{ alert('密码不可以为空.....'); } } } </script> ....................... <body> <form action="success.html" name="for1" onsubmit="return form_Submit();" method="post"> 会员名:<input type="text" name="username" /> <br /> 密码:<input type="password" name="pwd" /> <br /> 确认密码:<input type="password" name="pwd1" /> <br /> <input type="submit" /> </form> </body>问题来了？: 鼠标离开(失去焦点事件)文本框1的时候,将其文本框值转换为大写/鼠标放进(获得焦点事件)文本框1的时候,将其背景颜色转换为红色.
<script type="text/javascript"> //问题:鼠标离开(失去焦点事件)文本框1的时候,将其文本框值转换为大写 function blur_01(value){ TextUpperCase(value);//在一个函数中调用另一个函数 } //以下这个函数是用来转换为大写的函数 function TextUpperCase(value){ document.write(value.toUpperCase()); } //鼠标放进(获得焦点事件)文本框1的时候,将其背景颜色转换为红色 function focus_01(color){ //document.getElementById('fname').style.background=color; //上句代码的转化(另一种书写格式) var color1=document.getElementById('fname'); color1.style.background=color; } </script> .................... <body> <!--blur_01(this.value): this指向的是事件的目标 在这里是第一个input文本框--> <p>请输入你的英文名字: <input type="text" id="fname" onfocus="focus_01('red');" onblur="blur_01(this.value)"></p> <p>请输入你的年龄: <input type="text" id="age"></p> </body>问题来了:如何判断表单元素不可以为空?
<script type="text/javascript"> function btn_Click(){ var myform=document.getElementById('myform'); for (var i=0;i<myform.length;i++) { if(myform.elements[i].value==""){ alert(myform.elements[i].title+"不能为空!"); myform.elements[i].focus(); return; } else{ document.write('恭喜你中奖了') } } myform.submit(); } </script> ........... <body> <form name="for1" id="myform"> 账户:<input type="text" name="username" value="请输入InLett账户" onfocus="focu();" onblur="blu();" /> <span id="span1"></span> <br /> 密码:<input type="password" name="pwd" value="****" /> <br /> <input type="button" name="deng" value="登录" onclick="btn_Click();" /> </form> </body>6.动画事件： 7.过渡事件：
