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

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>

2DOM事件的捕获:

关于事件的传播方向当时两大巨头网景和微软有着不同的理解:

网景公司认为事件应该由外向内传递,

事件发生时,应该先从外层元素上的事件,然后向内一层一层传递

这一事件的传播机制,称为 事件的捕获

微软公司认为事件应该由内向外传递

事件发生时,应该先从内层元素(触发事件的元素)开始,然后一层一层传递

这一事件的传播机制,称为 事件的冒泡

于是W3C将事件整个分为了三个阶段:

1.捕获阶段

- 事件发生后首先从外层元素向内层元素进行事件的捕获

- 默认情况下此阶段并不会触发事件

通常在捕获阶段不想触发事件--可以将addEventListener()的第三个参数设置为false

- 如果希望在捕获阶段触发事件,可以将addEventListener()的第三个参数设置为

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值