学习javascript-event事件

事件event对象

当事件发生时，会向调用函数传递一个event对象，event对象记录当前事件发生时的环境信息。

一个事件只能对应一个event对象，并且event对象是短暂存在的。

DOM中的event对象的使用方法

1、在HTML标记中，通过事件来调用函数，向函数传递一个event参数，该参数就是一个event对象，这个event必须全小写。注意：这个event参数是固定的

       <img id="img01" src="images/01.jpg"onclick="get_xy(event)" />

       function get_xy(e) 
//这个地方的 e
是一个形参，只要符合变量的命名规则即可

{

              alert(e); 
//打印测试一下event对象

}

      

2、使用元素对象来传递event对象

<imgid="img01" src="images/01.jpg" />

//以下是JS代码

var obj =document.getElementById(“img01”);

obj.onclick = get_xy; //将函数地址传递事件，不能带括号，也不能带参数

function get_xy(e)  
//虽然上一行无法给函数传递参数，但事件发生时，事件对象event已经传递过来了

{

       alert(e);

}

 

DOM中event对象的属性

clientX：获取当前事件距离窗口左边的距离；

clientY：当前事件发生时距离窗口顶端的距离；

pageX：当前事件所在网页中的x坐标

pageY：当前事件所在网页中的y坐标；

screenX：当前事件所在屏幕中的x坐标；

screenY：当前事件所在屏幕中的y坐标；

type：当前事件的类型

……

<bodystyle="padding-top:500px;">

<imgid="img01" style="width:500px;"src="images/01.jpg" />

</body>

</html>

<scripttype="text/javascript">

//取得id=img01的对象

var obj =document.getElementById("img01");

//给obj绑定一个onclick事件，调用一个函数get_xy()

obj.onclick = get_xy;  //是函数传地址，不加括号，也不能带参数

//定义函数

function get_xy(e)

{

       var str = "窗口坐标："+e.clientX+","+e.clientY;

       str += "\n网页坐标："+e.pageX+","+e.pageY;

       str += "\n屏幕坐标："+e.screenX+","+e.screenY;

       str += "\n事件类型："+e.type;

       alert(str);

}

</script>

 

IE中的event对象的使用

在IE中event是window对象的一个属性，它的使用，应该是：window.event或event

同一时间，event对象只能有一个。

IE中事件发生时，不需要向调用函数传递event参数，也不用接收参数，但在函数中可以使用window.event。

（1）元素对象绑定事件

<imgid="img01" style="width:500px;"src="images/01.jpg" />

//以下是JS代码

var obj =document.getElementById(“img01”);

obj.onclick = get_xy; //将函数地址传递事件，不能带括号，也不能带参数

function get_xy()   //Event对象，在IE中不需要传递，也不需要接收

{

       alert(event.clientX);

}

（2）HTML标记的事件

<imgid="img01" style="width:500px;"src="images/01.jpg" onclick=”get_xy()” />

function get_xy()   //Event对象，在IE中不需要传递，也不需要接收

{

       alert(event.clientX);

}

 

IE中event对象的属性

clientX、clientY：窗口坐标

screenX、screenY：屏幕坐标

x、y：窗口坐标

offsetX、offsetY：相对当前目标对象的坐标，比如：单击图片时，距离图片顶端和左端坐标

type：事件类型

 

       //创建图片节点

       var node_img = document.createElement("img");

       //给图片节点添加src属性

       node_img.src = "images/xingxing.gif";

       node_img.style.position = "absolute";

       //图片随机坐标值和大小随机

       var width = getRandom(15,80);

       //取得event对象的窗口的坐标值

       var x = e ? e.clientX : event.clientX;

       var y = e ? e.clientY : event.clientY;

       //设置相关定位属性

       node_img.style.left = (x-width/2)+"px";

       node_img.style.top = (y-width/2)+"px";

       node_img.style.width = width+"px";

       //将图片节点追加到body

       document.body.appendChild(node_img);

 

每个元素对象都有一个className的属性，对应于HTML标记的class属性

<div class=”box” id=”obj”></div>

obj.className = “box”;

 

综合实例：选项卡切换

function showMe(id)

{

       //将四个id存到一个数组中

       var arr =["history","family","culture","novel"];

       //循环数组，将数组中的字符串转成对象

       for(var i=0;i<arr.length;i++)

       {

              //如果传递过来的id值与数组中的下标一样，说明是当前选项卡

              if(arr[i]==arr[id])

              {

                     //  arr[3]—— arr[3]

                     //如果是当前选项卡，则更改其类名为book_type_out

                     document.getElementById(arr[i]).className ="book_type_out";

                     //如果是当前的内容层，则更改其类名为book_show

                     document.getElementById("book_"+arr[i]).className= "book_show";

              }else

              {

                     //如果不是当前选择卡，则更改其类名为book_type

                     document.getElementById(arr[i]).className ="book_type";

                     //如果不是当前的内容层，则更改其类名为book_none;

                     document.getElementById("book_"+arr[i]).className= "book_none";

                      //                      book_  arr[0] history ——book_history

                      //                      book_  arr[1] family ——book_family

              }

       }

}

 

form对象

<form name=“form1” action=“login.php” method=“post”></form>

form对象的属性

       name：表单名称

       method：提交方式，有get和post

       action：处理程序

       enctype：表单数据的加密方式

       ……

Form对象的方法：

       submit()：表单提交方式

       reset()：重置表单

form对象的事件

       onsubmit：当点击“提交按钮”时发生，onsubmit事件发生的时机，是在单击“提交按钮”之后和数据发往服务前

       onreset：重置事件

表单提交的三种方法

（1）submit按钮结合onsubmit事件，实现表单提交(最常用)

<script type="text/javascript">

function checkForm()

{

    vartheForm = document.form1;

    if(theForm.username.value=="")

    {

           window.alert("用户名不能为空");

           return false;

    }elseif(theForm.userpwd.value.length==0)

    {

           window.alert("密码不能为空");

           return false;

    }else

    {

           window.alert("验证通过");

           return true;

    }

}

</script>

</head>

<body>

<form name="form1"method="get" action="login.php"
onsubmit="returncheckForm()">

用户名：<inputtype="text" name="username" />

密码：<inputtype="password" name="userpwd" />

<input type="submit" value="提交表单" />

</form>

（2）submit按钮结合onclick事件，实现表单提交

函数定义跟上面一样……

<form name="form1"method="get" action="login.php">

用户名：<inputtype="text" name="username" />

密码：<inputtype="password" name="userpwd" />

<input type="submit"value="提交表单"
onclick="returncheckForm()" />

</form>

（3）button按钮结合submit()方法，实现表单提交

<script type="text/javascript">

function checkForm()

{

       vartheForm = document.form1;

       if(theForm.username.value=="")

       {

              window.alert("用户名不能为空");

       }elseif(theForm.userpwd.value.length==0)

       {

              window.alert("密码不能为空");

       }else

       {

              window.alert("验证通过");

              theForm.submit(); //提交表单的方法

       }

}

</script>

</head>

<body>

<form name="form1"method="get" action="login.php">

用户名：<inputtype="text" name="username" />

密码：<inputtype="password" name="userpwd" />

<input type="button"value="提交表单"
onclick="checkForm()" />

</form>

 

 

提交信息

onsubmit和onclick事件：它们的返回值，会影响默认动作的执行。

submit按钮的默认动作就是提交表单；

<a>超级链接的默认动作，就是打开一个外部链接；

当事件返回false时，表单才会阻止提交，其它的返回值，表单都会提交。

 

 

单行文本框、单行密码框、表单验证的方法

一、常用的属性

       Name：元素的名称

       Value：元素的值

       Size：文本框的宽度

       Maxlength：最多存放多少个字符

       Readonly：只读

       Disabled：禁用

       ……

二、常用的事件

       Onfocus：当获得焦点时；

       Onblur：当失去焦点时；

三、常用方法

       Select()：选中内容

       Focus()：定位光标

       Blur()：让光标从某个元素上移走

四、表单验证的原理及方法(代码看文件)

 

 

复选框：全选和反选

复选框：checkbox对象

常用的属性

       name：名称

       value：值

       checked：选中与否，选中返回true，未选返回false

注意：多个同名的name，则产生一个数组

 

下拉列表：二级联动菜单

Select对象的常用属性

       options[]：返回所有option组成的一个数组；

       name：名称

       value：option的value的值

       length：设置或读取option的个数

       selectedIndex：当前选中的option的索引号

       ……

option对象的常用属性

       text：指<option></option>中的文本

       value：指option对象的value属性

       index：指每个option对象的索引号

       selected：当前option是否选中

       ……