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

时间:2022-04-27 09:28:12

一、添加事件的方法

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');};

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

二、常用的事件