js&jquery：添加事件的三种方法和常用的一些事件

一、添加事件的方法

1、EventTarget.addEventListener添加

获取事件目标元素，通过addEventListener函数添加

// Assuming myButton is a button element
myButton.addEventListener('click', greet, false);
function greet(event){
    // print and have a look at the event object 
    // always print arguments in case of overlooking any other arguments
    console.log('greet:', arguments);
    alert('hello world');     
}

比较推荐，但要注意：Internet Explorer 6-8不支持此方法，提供类似的方法

2、HTML attribute 直接作为元素属性添加

<button onclick="alert('Hello world!')"

<button onclick="test()">

官方：这种方式不被推荐，使得标记变大，可读性低，内容结构和行为没有分离，出现bug很难发现。

3.DOM element properties 为元素添加属性

// Assuming myButton is a button element
myButton.onclick = function(event){alert('Hello world');};

此方法的问题是每个元素和每个事件只能设置一个处理程序。

二、常用的事件