1.直接在html元素上面添加事件。<input type="button" onclick="display_alert()" value="Display alert box" />

2.setAttribute 实现元素事件的添加：  

var obj = document.getElementById("obj");
obj.setAttribute("onclick", "JavaScript:alert('测试');");

3.用 attachEvent 和 addEventListener实现元素事件添加

obj.attachEvent("onclick", function(){alert("测试");});

obj.addEventListener("click", function(){alert("测试");}, false);
注意 attachEvent 的事件带 on，如 onclick，而 addEventListener 不带 on，如 click。
顺便说一下 addEventListener 的第三个参数（虽然很少用） useCapture - 如果为 true，则 useCapture 指示用户希望启动捕获。启动捕获后，所有指定类型的事件将在被指派到树中其下面的任何 EventTargets 之前指派给已注册的 EventListener。正在通过树向上 bubbling 的事件将不触发指定的使用捕获的 EventListener。 

4.on方法

 

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。

 

参数

 

 

events,[selector],[data],fnV1.7

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

events-map,[selector],[data]V1.7

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

 

5.bind函数实现方法

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});
$("form").bind("submit", function(event){ event.preventDefault(); });


6.one 事件

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click", function(){
  alert( $(this).text() );
});



7.live事件

jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});
$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

8.evaluate     http://www.w3school.com.cn/xmldom/met_document_evaluate.asp

使用 Greasemonkey 时会遇到的功能最为强大的一个工具就是 evaluate 函数。通过使用XPath这种查询语言，它可以用来寻找页面中的元素，属性和文本。

举个例子来说，如果您想获得某个页面上的全部链接。您也许会想到使用document.getElementsByTagName('a')；但是如果您还要继续检查是否每个链接都具有href属性，因为<a>还可以用来作为锚名称使用，这时，您需要使用Firefox内建的XPath 支持去获取全部具有href属性的<a>元素。

var allLinks, thisLink;
allLinks = document.evaluate(
     '//a[@href]',
     document,
     null,
     XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
     null);
for (var i = 0; i < allLinks.snapshotLength; i++) {
     thisLink = allLinks.snapshotItem(i);
     // do something with thisLink
}


该函数document.evaluate函数暂且不支持所有浏览器！IE不支持

使用 Greasemonkey 时会遇到的功能最为强大的一个工具就是 evaluate 函数。通过使用XPath这种查询语言，它可以用来寻找页面中的元素，属性和文本。
举个例子来说，如果您想获得某个页面上的全部链接。您也许会想到使用document.getElementsByTagName('a')；但是如果您还要继续检查是否每个链接都具有href属性，因为<a>还可以用来作为锚名称使用，这时，您需要使用Firefox内建的XPath 支持去获取全部具有href属性的<a>元素。
例子: 获取页面上的全部链接
var allLinks, thisLink;
allLinks = document.evaluate(
     '//a[@href]',
     document,
     null,
     XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
     null);
for (var i = 0; i < allLinks.snapshotLength; i++) {
     thisLink = allLinks.snapshotItem(i);
     // do something with thisLink
}
这里，document.evaluate 是关键的部分。 它把 XPath 查询语句作为一个字符串，其它的参数稍后再做解释。 这条 XPath   查询语句可以找到全部具有href属性的<a>元素，并将它们按照随机的顺序依次返回。(这就是说，第一个被返回的元素并一定也是页面上的第一个这样的元素。) 随后，您就可以用 allLinks.snapshotItem(i) 函数访问每一个元素。XPath表达式所能做到的甚至会使您惊讶。请看下面这个例子，它获取了全部具有title属性的元素。
 
例子: 获取全部具有title属性的元素
var allElements, thisElement;
allElements = document.evaluate(
     '//*[@title]',
     document,
     null,
     XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
     null);
for (var i = 0; i < allElements.snapshotLength; i++) {
     thisElement = allElements.snapshotItem(i);
     switch (thisElement.nodeName.toUpperCase()) {
         case 'A':
             // this is a link, do something
             break;
         case 'IMG':
             // this is an image, do something else
             break;
         default:
             // do something with other kinds of HTML elements
     }
}