1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html移除click事件绑定 六 事件绑定与移除

html移除click事件绑定 六 事件绑定与移除

时间:2019-10-29 02:19:06

相关推荐

html移除click事件绑定 六 事件绑定与移除

事件绑定就是添加事件,那么为谁添加事件呢?可以为页面中的所有标签(元素、节点)添加事件,大到整个文档(document),小到其中一个标签都可以添加事件。

在为一个节点添加事件的时候,有三种方式:

* 直接在标签中添加,即使用onclick、onmouseover等HTML属性;

* DOM的方式添加,即通过dom方法获取节点,然后为其绑定事件;

* 使用addEventListener或attachEvent(IE8及更低版本浏览器)。

为一个标签添加事件之后,还可以删除这个事件。

# 1、为DOM对象添加事件

最基本的语法:

```

DOM对象.事件 = 处理函数;

```

![](/32/de/32de4a43f3a18875041ecdf246a13cd2_892x239.png)

有些时候,可以先定义处理函数,然后在绑定事件:

![](/de/2c/de2c2c1203e76bada5fb15d79ca32c5b_866x392.png)

事件处理函数中,this表示什么?

![](/b7/f0/b7f00696b82c67d80fc24dcb6a37a15f_991x333.png)

# 2、直接在HTML标签中添加事件

通过html标签的on….属性(onclick、onmouseover…),来添加事件。

![](/52/02/56a17461792190f8dd3216fdd6d4_1029x382.png)

如果说,单击按钮的时候,要执行的代码非常多,则可以将代码封装成函数,然后onclick的时候,调用函数即可,函数中的this是window对象。

![](/7d/2e/7d2e1fb56ab6b6aae9a9532ed3bfcb9e_747x331.png)

如果上面两种绑定事件的方式都存在,执行哪一种?

![](/4a/d0/4ad024ce664364705e96cfb1cdecaa58_791x212.png)

上面两种方式绑定事件,都可以通过设置事件处理函数为null来去取事件:

![](/3f/a2/3fa2bfeba0b9eb0892bc26dcceef1d79_803x246.png)

# 3、使用addEventListener或attachEvent方法添加

使用下面的方法为DOM对象添加事件,也叫做事件监听。

* IE浏览器中用:元素节点.attachEvent(事件名, 事件处理函数);

* 火狐浏览器用:元素节点.addEventListener(事件名, 事件处理函数);// 事件名不要带on

为了兼容各个浏览器,可以自定义一个兼容的函数,来为元素绑定事件:

![](/02/d6/02d630828648b53d24f11bd4c41a8b30_608x422.png)

事件监听方式添加的事件,特点是可以为一个元素绑定多个同类型的事件。

![](/20/ad/20ad728ee13a0a8ec3ebdc68c7eed4a1_663x445.png)

通过事件监听方法添加的事件,也可以被移除,移除的方法是:

火狐:元素节点.removeEventListener(事件名, 处理函数); //事件名不要带on

IE:元素节点.dettachEvent(事件名 处理函数);

也可以自定义一个兼容各个浏览器的移除事件监听的方法:

![](/59/52/59529da3a2025d6bea48edf81b47ef3b_644x572.png)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。