Dom多个事件绑定addEventListener、鼠标事件、拖拽元素

最新推荐文章于 2025-09-03 18:46:42 发布

原创

最新推荐文章于 2025-09-03 18:46:42 发布 · 2.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#计算机外设 #javascript #前端 #ecmascript #正则表达式 #开发语言 #html

1 Dom多个事件绑定addEventListener():

addEventListener()

- 也可以通过addEventListener()来为元素绑定事件

addEventListener(type, listener [, useCapture])

- 参数：

type 要监听的事件的字符串，注意这里不需要写on

listener 回调函数，当事件发生后调用的函数

useCapture 布尔值，是否在捕获阶段触发事件，一般都是false

通过addEventListener()可以为一个元素的一个事件绑定多个响应函数，

这样当事件被触发时，响应函数会按照事件的绑定顺序依次执行

该方法不支持IE8及以下的浏览器

通过addachEvent()可以为一个元素的相同事件绑定多个响应函数该方法支持IE8以下的浏览器—两个参数addachEvent (on事件,回调函数)

不同的是—先绑定的后执行,后绑定的先执行!

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件的绑定</title>

<script>

window.onload = function () {

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

// 通过 对象.属性 的形式绑定响应函数时，同时只能为一个事件绑定一个响应函数

// btn01.onclick = function () {

// alert(1);

// };

//

btn01.onclick = function () {

alert(2);

};

btn01.onclick = null;

/*

addEventListener()

- 也可以通过addEventListener()来为元素绑定事件

addEventListener(type, listener [, useCapture])

- 参数：

type 要监听的事件的字符串，注意这里不需要写on

listener 回调函数，当事件发生后调用的函数

useCapture 布尔值，是否在捕获阶段触发事件，一般都是false

通过addEventListener()可以为一个元素的一个事件绑定多个响应函数，

这样当事件被触发时，响应函数会按照事件的绑定顺序依次执行

该方法不支持IE8及以下的浏览器

通过addachEvent()可以为一个元素的相同事件绑定多个响应函数 该方法支持IE8以下的浏览器—两个参数addachEvent (on事件,回调函数)

不同的是—先绑定的后执行,后绑定的先执行!

*/

// btn01.addEventListener("click",function () {

// alert(1);

// }, false)

//

// btn01.addEventListener("click",function () {

// alert(2);

// }, false)

//

// btn01.addEventListener("click",function () {

// alert(3);

// }, false)

// btn01.removeEventListener()

/*

removeEventListener(type, listener[, useCapture]);

- 用来移除元素上的事件监听器

*/

function fn() {

alert(123);

}

btn01.addEventListener('click',fn, false);

btn01.removeEventListener('click', fn, false);

};

</script>

</head>

<body>

<button id="btn01">点我一下</button>

</body>

</html>