web-15. 事件与函数

15. 事件与函数

15.1 事件驱动的概念

在图形界面的环境下,用户操作以及系统操作的动作称为事件。

例子:

<html>

<head>

<title>事件驱动和函数处理实例</title>

         <script language="JavaScript">

             function addRow()

             {

                 var tableObj=document.getElementById("mainTb");

                 var tableBodyObj=document.getElementById("mainBody");

                 var newRowObj=document.createElement("tr");

                 newRowObj.id="row"+(tableObj.rows.length-1);

                 var newNameCell=document.createElement("td");

                 var newCompanyCell=document.createElement("td");

                 var newButtonCell=document.createElement("td");

                 newNameCell.innerHTML=document.getElementById("newName").value;

                 newCompanyCell.innerHTML=document.getElementById("newCompany").value;

                 newButtonCell.innerHTML='<input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length-1)+')">';

                 newRowObj.appendChild(newNameCell);

                 newRowObj.appendChild(newCompanyCell);

                 newRowObj.appendChild(newBottonCell);

                 tableBodyObj.appendChild(newRowObj);

             }

             function deleteRow(index)

             {

                 var tableBodyObj=document.getElementById("mainBody");

                 var rowObj=document.getElementById('row'+index);

                 tableBodyObj.removeChild(rowObj);

             }

            

    </script>

</head>

<body style="margin:40px">

        <div><span id="new">

姓名

        <input type="text" name="newName" id="newName">

单位

        <input type="text" id="newCompany">

        

        <input type=botton value="新增" onclick="addRow()">

</span></div>   

        

        <table id="mainTb" border="1">

            <tbody id="mainBody">

                <tr><th width="80">姓名</th>

                    <th width="250">单位</th>

                </tr>

                <tr id="row0">

                    <td>张三</td>

                    <td>XXX软件公司</td>

                    <td><input type="botton" value="删除",onclick="deleteRow(0)"></td>

                </tr>

                <tr id="row1">

            <td>李四</td>

                    <td>XXX食品公司</td>

                    <td><input type="botton" value="删除" onclick="deleteRow(1)"></td>

                </tr>

            </tbody>

        </table>

   </body>

</html>

用户或系统操作时间引起的一连串程序动作的执行方式称为事件驱动。

响应事件而进行的处理过程称为事件处理。对时间进行处理的程序或者函数称为事件处理程序。

15.2 使用JavaScript事件的方法

JavaScript中使用事件的方法有两种:使用HTML标记方法或者使用JavaScript语句。

  1. HTML标记使用事件

例如:<input type=botton value="新增" onclick="addRow()">

<HTML标记 事件名=”事件属性值”>

这里的事件属性值通常是一个时间处理程序或者函数。

  1. 通过JavaScript代码使用事件

JavaScript对象,事件=函数名

JavaScript对象所有的事件当做它所拥有的一个属性,可以被赋值。必须注意,这个属性只能是函数名。

15.3 JavaScript的常用事件

https://blog.csdn.net/u012027874/article/details/51927388

如果在HTML标记或程序为某个对象设置了事件处理程序,系统就会自动捕捉此对象上的这种事件,并且出发定义事件的程序。

原文地址:https://www.cnblogs.com/free-1122/p/9917253.html