亲宝软件园·资讯

展开

JS三个事件绑定方法

itmacy 人气:0
## 1. JS三个事件绑定方法 ### 1.1. 使用html进行事件绑定 1.直接在html标签上写入事件类型和事件处理方法。 ``` ``` 2.在html标签上写入事件类型,在js上写事件处理方法。 - html部分 ```htmlbars ``` - js部分 ``` function sayHello(){ alert('hello world!!!') } ``` ### 1.2. 使用JS获取dom对象进行事件绑定 为了让代码更加整洁以及便于维护,使html代码与js代码解耦。 - html部分 ```htmlbars ``` - js部分 注意在调用事件方法时,不要加上括号,否则会立即调用,之后点击按钮就没反应了。 ``` document.querySelector('#btn').onclick = sayHello function sayHello() { alert('hello world') } ``` ### 1.3. 使用addEventListener()绑定事件 使用上面两种方法,只能绑定一个事件,如果要绑定多个事件,可以使用`addEventListener()`添加事件监听器,一般情况下传入两个参数,第一个参数是事件类型,第二个参数是事件处理方法。 - html部分 ```htmlbars ``` - js部分 注意在写入事件类型时,不要加上`on` ``` document.querySelector('#btn').addEventListener('click',sayHello) document.querySelector('#btn').addEventListener('click',sayHi) function sayHello() { alert('hello world!') } function sayHi () { alert('hi!') } ``` 小结: - 使用JS获取dom对象进行事件绑定时,事件处理方法加上括号会立即调用。 - 一个html元素要绑定多个事件时,使用`addEventListener()`。

加载全部内容

相关教程
猜你喜欢
用户评论