JS三个事件绑定方法

栏目: IT技术 · 发布时间: 5年前

内容简介:1.直接在html标签上写入事件类型和事件处理方法。2.在html标签上写入事件类型,在js上写事件处理方法。为了让代码更加整洁以及便于维护,使html代码与js代码解耦。

1. JS三个事件绑定方法

1.1. 使用html进行事件绑定

1.直接在html标签上写入事件类型和事件处理方法。

<button onclick = "alert('hello world')">click me!</button>

2.在html标签上写入事件类型,在js上写事件处理方法。

  • html部分
<button onclick = "sayHello()">click me!</button>
  • js部分
function sayHello(){
  alert('hello world!!!')
}

1.2. 使用JS获取dom对象进行事件绑定

为了让代码更加整洁以及便于维护,使html代码与js代码解耦。

  • html部分
<button id="btn">click me!</button>
  • js部分

    注意在调用事件方法时,不要加上括号,否则会立即调用,之后点击按钮就没反应了。

document.querySelector('#btn').onclick = sayHello

function sayHello() {
  alert('hello world')
}

1.3. 使用addEventListener()绑定事件

使用上面两种方法,只能绑定一个事件,如果要绑定多个事件,可以使用 addEventListener() 添加事件监听器,一般情况下传入两个参数,第一个参数是事件类型,第二个参数是事件处理方法。

  • html部分
<button id="btn">click me!</button>
  • js部分

    注意在写入事件类型时,不要加上 on

document.querySelector('#btn').addEventListener('click',sayHello)
document.querySelector('#btn').addEventListener('click',sayHi)

function sayHello() {
  alert('hello world!')
}
function sayHi () {
  alert('hi!')
}

小结:

addEventListener()

以上所述就是小编给大家介绍的《JS三个事件绑定方法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

部落:一呼百应的力量

部落:一呼百应的力量

高汀 (Godin.S.) / 刘晖 / 中信出版社 / 2009-7 / 26.00元

部落指的是任何一群人,规模可大可小,他们因追随领导、志同道合而相互联系在一起。人类其实数百万年前就有部落的出现,随之还形成了宗教、种族、政治或甚至音乐。 互联网消除了地理隔离,降低了沟通成本并缩短了时间。博客和社交网站都有益于现有的部落扩张,并促进了网络部落的诞生——这些部落的人数从10个到1000万个不等,他们所关注的也许是iPhone,或一场政治运动,或阻止全球变暖的新方法。 那么......一起来看看 《部落:一呼百应的力量》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具