如何添加html元素的事件，有多少种方法

添加html元素的事件有三种方法。

1.通过HTML元素属性。简单说来就是在html结构中，给你要添加事件的元素添加一个属性。

属性名为 'on' + 事件名。

如:你要给a元素绑定一个click事件，你就该这么写：

<a href="http://blog.163.com/luping_01/blog/#" onclick='do something'>name</a>

2.通过对象属性。

对象指的是jDOM树里的对象，我们都知道，所有的html元素在DOM(文档对象类型)里都存在一个相应的DOM元素。

给这个DOM元素添加事件等同于方式一。这个属性名也一样：

也为 on + 事件名

如：

html结构:

<a href="http://blog.163.com/luping_01/blog/#" id="n">name</a>

js：

document.getElementById('n').onclick = function(){ //do something}

3.通过W3C监听方式（标准方式）或者IE专属的中间模型添加事件

W3C方式： elemennt.addEventListener(事件名,处理函数引用,true || false)

这里的事件名就是单纯的事件名，不需要加 on ，true表示在事件传播阶段捕获事件，false表示在事件冒泡阶段捕获事件，一般我们设为false!

IE模式: element.attachEvent( 'on' + 事件名，处理函数引用)

注意，IE模式需要加on

常见的三种，一种是标签内联的书写方式，不推荐使用

另外两种都是相对比较常用的，具体看代码吧

方法1：标签内联的书写方式

<div onclick="alert('点击此处d窗')">HTML5学堂 - - 数百篇原创文章分享 </div>

方法2和方法3：

<div id="con">通过id获取标签，之后为标签绑定事件</div>

<script>

    var con = document.getElementById('con')

    con.onmouseover = function(){

        alert('鼠标移入d出这个')

    }

    con.addEventListener('mouseout', function(){

        alert('鼠标移出d出这个')

    }, false)

</script>

方法一：直接在标签元素上添加

方法二：是通过js来添加

如图：

介绍：

HTML(Hyper Text Mark-up Language )即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。

HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

---