JS绑定事件

onclick事件和click事件

1. onclick 事件会在对象被点击时发生。

<input id="btn1" type="button" οnclick="test();" />

 

function test() {

    alert("我是行间事件");

}

 

2. onclick事件会在click事件之前执行

<input id="btn2" type="button" οnclick="test();" />

 

var btn2 = document.getElementById('btn2');

btn2.addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  function showMsg() {

    alert("事件监听");

}

当点击id="btn2"时,先执行onclick事件的方法test(),再执行click事件的showMsg()方法;

 

绑定事件

方式1、在标签中直接绑定<input id="btn1" type="button" οnclick="test();" />

方式2、document.getElementById("container").onclick = function() {}

方式3、addEventListener()添加事件，removeEventListener()删除事件。可添加多个，执行顺序与添加顺序相同。两个方法都接受三个参数：

第一个参数：事件名称

第二个参数：作为事件处理程序的函数

第三个参数：捕获值false(不捕获)/true(捕获),不写表示默认值false

var oBox = document.getElementById("container");

oBox.addEventListener("click",fn(),false);

oBox.removeEventListener("click",fn(),false);

function fn(){//执行代码}

方式4、IE事件处理程序：attachEvent()添加事件，detachEvent()删除事件，由于（IE8-）不支持捕获，所以两种方法只支持两个参数：

第一个参数：事件处理程序函数名称eg:onclick  onmouseover

第二个参数：作为事件处理程序的函数

var oBox = document.getElementById("container");

oBox.attach("click",fn());

oBox.detach("click",fn());

function fn(){//执行函数}

解绑事件