在html页中给元素添加事件

说明：
<form method="post" name="login" id="login" action="index.php?logaction=1" onSubmit="loginchk()">
<div οnclick="clk()">Div2 Element</div>
onSubmit= ， οnclick= 元素的这一类属性， 以下统称为事件处理属性。 他的值 称为 事件处理代码

一、一般，我们给html页中元素添加事件处理的js 代码 有以下几个方法
1，第一种添加事件的方式，直接在html的元素的事件处理属性中写JS代码
     <div οnclick="var gh=4; alert(gh);">直接写JS代码</div>
2.第二种添加事件的方式，定义一个函数，赋值给html元素的事件处理属性
    <script type="text/javascript">
     function clk(){}
    </script>
    <div οnclick="clk()">定义一个函数</div>

上述两种方法里， 事件处理代码实际被一个匿名或有默认名的函数包装， 这个包装函数才是真正的事件处理函数。它的返回值才是事件处理返回值。这个观点 运行以下语句便可看出：

<div οnclick="alert(arguments.callee);">事件触发的是一个匿名或有默认名的函数</div>
在各浏览器中点击该Div，结果如下：
IE6/7/8 :
function onclick(){ alert(arguments.callee);}

IE9 :
function onclick(event){ alert(arguments.callee);}

Firefox / Safari :
function onclick(event) { alert(arguments.callee);}

Chrome :
function onclick(evt) { alert(arguments.callee);}

Opera :
function anonymous(event) {alert(arguments.callee);}

3. js代码里，通过dom 操作，给tml页中元素事件处理属性赋值的情况。 比如以下代码：
<form method="post" name="login" id="login" action="phpinfo.php">
<INPUT name="workid"   id="workid">
<input id="thisyes" type=submit >
</form>
<script type="text/javascript">
function myclk(){
  alert("ok "+event.type);
  return true;
}
document.getElementById("login").onsubmit = myclk;
 </script>

函数 myclk 是事件处理函数，它的返回值就是事件处理返回值。他返回 true 则继续提交表单 返回 false  则停止提交， 返回页面。
 
在js代码里， 给事件处理属性赋值，只能赋值为一个函数， 比如：
  document.getElementById("login").onsubmit = function(){...};
  或者
  document.getElementById("login").onsubmit = myclk;
这里 myclk 是一个已定义函数的名字。 注意这里前后不能加引号， 后面也不能有()。否则就不会把他当做是个函数对象， 而会是一个字符串或执行myclk函数后返回的值了。

二、在事件处理函数 或其调用的自定义函数里如何使用事件对象

事件处理函数一定是个没有或只有事件对象作为其唯一传入参数的函数，在 IE6/7/8 里，没有事件对象传入，但在函数体内可以使用html页面全局事件对象window.event(也可只写 event）来获得事件属性值。所以， 如果事件处理函数这样定义：function onclick(theevent) { .....} 则 theevent 一定是个空值。

其他浏览器： Opera/Safari/Chrome 是兼容IE方式(window.event)获取事件对象。Firefox / Opera/Safari 都是有事件对象作为其唯一传入参数的， 在事件处理函数的函数体里，可用 event 或 arguments[0] 来作为事件对象使用。Chrome浏览器里， 可用evt或 arguments[0] 作为事件对象来引用。

事件处理函数内js代码有调用其他自定义函数的，比如：οnclick="myclick(tydsevent);" ,有自定义函数myclick调用语句。在自定义函数内若要使用事件对象，在定义时必须有一个传入参数，其值为事件对象。名称随意取，在函数内用它作为事件对象。同理，在 IE6/7/8 里，不用传入参数，在函数体内可以使用html页面全局事件对象window.event(也可只写 event）作为事件对象获得事件属性值。

为了自己的代码在多个浏览器里能正常运行，在需要使用事件对象的事件处理函数里， 一般会加上这个语句： e = event ? event : window.event; 这个语句告诉函数里随后的代码： e 变量的值就是事件对象，他是 全局事件对象 或传进来的 事件对象。event是事件处理函数定义时传入参数的命名。在自定义函数里这个名称是任意的，在定义函数时设定。在系统形成的包装函数里，无需该语句。 使用事件对象， 直接用固定的名字：event 他即有可能是传入的事件对象， 也可能是 window.event。
示例：
<div οnclick=" alert(event.type);">事件处理函数内使用事件对象</div>

<script type="text/javascript">
function clk(myevent){
alert(myevent.type);
}
</script>
<div οnclick="clk(event)">自定义函数内使用事件对象：myevent </div>

这里要注意的是，如果这样定义事件响应函数：function myclk(event) ，函数体内有事直接用event 作为事件对象使用， 没有 e = event ? event : window.event; 这样的类似语句，代码在IE6/7/8 里是有问题的， 首先 function myclk(event)这里的 event 一定是个空值， 因为在IE6/7/8里是不会给事件处理函数传值的。 在函数体内，变量的使用原则是， 先局部变量， 没有则找同名的全局变量， 由于function myclk(event) ， 所以 存在值为空，名为event 的局部变量的， 所以alert("ok "+event.type);里的event应该是值为空的局部变量，所以IE6/7/8 里报错。这也是在自定义事件处理函数时， 一般会加上这样的语句 e = event ? event : window.event 的原因。

三、事件处理代码 里的 return语句
举例：onClick='return functionname(par1,par2...);'
他的好处是 把函数 functionname(par1,par2...)的返回值 作为Click事件处理函数的返回值返回。

这种写法用在事件响应后的行为要依据事件处理函数的返回值来确定的情况。比如， html 里form元素的onSubmit属性值，表单是否提交要根据onSubmit事件处理函数的返回值决定： 返回false 就不提交回到页面。 返回 true  就提交表单到action属性指定的页面。在html里使用事件处理属性，要求事件处理函数返回值的，必须在 事件处理代码 里 使用 return 返回值。

举例：
<form method="post" name="login" id="login" action="index.php?logaction=1" onSubmit="return loginchk()">
这里，如果点击提交表单，将先运行 loginchk()， 他返回 true 则继续提交表单 返回 false  则停止提交， 返回页面。如果写成：
<form method="post" name="login" id="login" action="index.php?logaction=1" onSubmit="loginchk()">
则 无论 loginchk() 返回什么， onSubmit事件的处理函数都没有返回，按默认， 表单会继续提交。

四、对于在事件处理代码定义函数，随后有一次或有多次调用。

在这个函数定义体内可以象事件处理代码里一样使用事件对象一样。因为事件处理代码实际被一个匿名或有默认名的函数包装，事件处理代码里定义的函数实际是这个包装函数的子函数，变量使用 完全依据父子函数关系。这种情况很少见。 以下举例：

<div οnclick=" function myalert(){alert(event.type);};myalert();">自定义函数在οnclick="后定义</div>

五. 另一强大的添加事件的方式
使用addEventListener或IE专有的attachEvent 。较前两种方式功能更为强大，可以为元素添加多个句柄(或称响应函数)，支持事件冒泡或捕获，（addEventListener的第三个参数定义事件冒泡false或捕获 true 默认冒泡false ）前两种方式默认都是冒泡。当然IE6/7/8仍然没有遵循标准而使用了自己专有的attachEvent，且不支持事件捕获。IE9 中已经支持addEventListener了。

网页里， 事件侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

addEventListener或attachEvent 函数的第二个参数为侦听到事件后的事件处理函数。 事件处理函数必须接受事件对象作为其唯一的参数，并且不能返回任何结果。这也就决定了与前几种方式的不同，这种方式加事件处理函数不能用于那些要依据返回结果而做不同选择的事件处理。

要往事件处理函数里传递其他参数，最好的办法是使用js的闭包：定义一个有参数的函数，该函数返回一个不带参数的函数。 这个有参数的函数在html页面装载时运行（js代码里 函数名();语句就表示执行函数），在内存空间形成一个 js闭包带来的效果。返回的不带参数的函数才是真正响应事件的函数，这个函数在每次发生绑定的事件时触发运行，他只接受事件对象作为其唯一的参数，并且自己不返回任何结果的函数。由于js的闭包结构，这个函数内是可以使用闭包内的所有变量的， 包括全局变量和执行闭包函数时传入的值。 这个函数符合addEventListener或attachEvent 函数的第二个参数的要求。(具体形式就是一个 js闭包）

注意这里，返回不带参数的函数 并非不带参数，在其函数体内 arguments对象是可用的，他只有一个元素arguments[0]，值就是事件对象. 你可在闭包里定义返回函数时，取一个你自己定义的事件对象名字传入，在函数体内用它引用事件对象，也可什么都不写，在函数体内 直接用arguments[0]引用事件对象。这一点与前几种方式不同， 在IE6/7/8里，也有事件对象传入。也就是说同样有一个参数传入事件处理函数。

以下为样例代码：
function clk(tydsevent, mp1,mp2){
alert(mp1+' '+mp2);
alert("ok "+tydsevent.type);
}

function newfunction(func){
 var args = new Array();
 for(var i=1; i<arguments.length; i++) args.push(arguments[i]);
 return function(){
//或  return function(mye){
            localargs = args.slice(0);
            localargs.unshift(arguments[0]);
//或      localargs.unshift(mye);
     window[func].apply(window, localargs); //这句使得 函数里的 this 指向window 对象
 }
}

<div id="tydsdivid">使用addEventListener或IE专有的attachEvent </div>
<script type="text/javascript">
var tydsdiv = document.getElementById('tydsdivid');
if(tydsdiv.addEventListener){
tydsdiv.addEventListener('click',newfunction('clk', 'param1', 'param2'),false);
}
if(tydsdiv.attachEvent){
tydsdiv.attachEvent('onclick', newfunction('clk', 'param1', 'param2'));
}
</script>

注意函数addEventListener() attachEvent() 第一个参数 事件名的区别: 前者 是 xxx (click submit... ) 后者是 onxxx (onclick onsubmit ...).