使用javascript给html元素添加click事件

在html给元素添加事件我们通常情况下的代码是这样的

<input type="button" name="btn" onclick="showmsgFunction()">

直接给元素添加点击事件，我们使用onclick方法。我们也可能通过javascript给元素动态添加事件，根据不同的场景有多种给元素添加点击事件的方法。

1.直接在html tag标签中添加onclick事件

2.使用js DOM获取元素添加方法

document.getElementById("btn").onclick = functionName;

//直接添加匿名方法
document.getElementById("btn").onclick = function()
{
    alert('ahaha');
};

3.通过使用事件监听的方式给元素添加绑定事件

val el = document.getElementById("btn");
if(el.addEventListener)
    el.addEventListener("click",functionName,false);
if(el.attachEvent)
    el.attachEvent("onclick",functionName);

注意看上面有两个if条件的判断，这样的做法是为了兼容浏览器，中IE中我们可以使用attachEvent方法,并且在IE中的attachEvent事件的名称是包含on的，如添加其它事件也是一样需要添加on,如：onChange onblur onsubmit等

4.如何给一个按钮对象添加多个同一个事件呢？

我猜你已经知道怎么写了

var btn = document.getElementById("btn");
btn.onclick = dosomething1;
btn.onclick = dosomething2;
btn.onclick = dosomething3;

咱们执行一下，我们会发现最后只会执行dosomething3的函数。那我们应该怎么做呢？这时候就到了我们attachEvent主角出场的时候了。

btn.attachEvent("onclick",dosomething1);
btn.attachEvent("onclick",dosomething2);
btn.attachEvent("onclick",dosomething3);

在IE浏览器中执行会发现顺序是：
dosomething1 ------>>> dosomething2 ------>>> dosomething3

我们使用addEventListener为chrome firefox同样添加如上的方法时候，执行会发现顺序是：

dosomething3 ------>>> dosomething2 ------>>> dosomething1

看到没，这TM就是前端，兼容浏览器会让你觉得这个世界到处都充满了恶意，但是放心问题已经有人解决了。

在开源中国看到的内容就直接贴出链接好了，大家自行去看吧。

http://www.oschina.net/question/54100_25614

通过上面的几种方法，我相信再让你完成一些变态的需求的时候就不会怕了。