注册行内事件时a标签与其他的标签的区别

一、首先，我们先说行内注册事件的方式：

// 语法： 事件名 = function(){ 函数体 } 
  //或则
//       事件名 = 功能代码

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

<input type="text" size="30" id="email" onchange="checkEmail()">

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框（内容：An onMouseOver event）：

<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">

<img src="w3school.gif" width="100" height="30">

</a>

注意这个地方retrun false 是在阻止a标签的默认跳转行为。

二、a标签注册事件的时候，我们希望当我鼠标放在a标签身上的时候，a标签能执行我们为其注册的事件，而不是发生跳转，因为a是超链接标签默认会跳转。所以为了阻止其跳转，我们的有下面几种方法：

//第一种：给a标签添加点击事件，在点击事件中return false

<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">
</a>

/*第二种：给a标签的href属性设置一个伪链接
    * 给href属性为：javascript:void(0)
    * 因为void是一个操作符，void(0)返回undefined，地址不发生跳转。*/

    <a href="javascript:void(0)" onclick="loadData()"></a>

    * 给href属性为：javascript:;
    * 相当于执行了一条空的语句，所以页面也不会发生跳转*/

    <a href="javascript:;" onclick="loadData()"></a>

在为a标签注册事件的时候：一般遵循两步：

**第一： 阻止a标签的跳转**
**第二： 为其注册事件**

其实还有第三种注册方式：

//给href属性一个#字符

<a href="#" onclick="loadData()"></a>

注意：#表示刷新当前页面每次点击之后都会回到页面顶部

下面介绍一个Demo:在模板引擎里面为a标签绑定事件的方式：

<!-- 准备一个内容模板 -->
<script type="text/html" id="tpl2">
  {{ each list value key }}
    {{ if value.status == "held" }}
      <tr class="danger">
    {{ else }}
      <tr>
    {{ /if }}
      <td class="text-center"><input type="checkbox" indexnum="{{ value.id }}"></td>
      <td>{{ value.author }}</td>
      <td>{{ value.content }}</td>
      <td>《{{ value.title }}》</td>
      <td>{{ value.created.slice(0,10).split("-").join('/') }}</td>
      {{ if value.status == "approved" }}
        <td>已批准</td>
      {{ else if value.status == "held" }}
        <td>待审核</td>
      {{ else  }}
        <td>已拒绝</td>
      {{ /if }}
      <td class="text-center">
        {{ if value.status == "held" }}

            //这里用的就是a标签的注册点击事件的方法

          <a href="javascript:;" onclick="changecommentStatus( 'approved',{{ value.id }})" class="btn btn-warning btn-xs">批准</a>
        {{ else if value.status == "approved" }}
          <a href="javascript:;" onclick="changecommentStatus( 'rejected',{{ value.id }})" class="btn btn-info btn-xs">拒绝</a>
        {{ /if }}
          <a href="javascript:;"  onclick="changecommentStatus( 'trashed',{{ value.id }})" class="btn btn-danger btn-xs">删除</a>
      </td>
    </tr>
  {{ /each }}
</script>

三、其他标签注册事件的时候，就没有这么复杂了，就可以直接写在行内就好了。

<input type="text" size="30" id="email" onchange="checkEmail()">