angular移除事件绑定事件绑定_002-js的三种事件绑定方式

不说太多虚的，这次要聊的，是JavaScript的三种事件绑定方式。

方法1：直接在HTML中指定，称为“内嵌”会不会更合适一点？

（1）直接在HTML的属性里写代码

示例代码：

<button onclick="alert('我我我')">点我！</button>

界面部分（点击前）

界面部分（点击后）

当然啦，这种方法不仅仅onclick事件可以使用，onmouseover等方法一样适用，不过考虑到代码的可维护性，并不建议多用这种方式；

（2）在HTML中定义函数

示例代码：

<button onclick="fun()">点我</button><script>function fun() {alert('123');}</script>

界面部分（点击前）：

界面部分（点击后）：

方法2：在JavaScript中绑定事件

示例代码：

<button id="btn">点我点我</button><script>var btn = document.querySelector('#btn');btn.onclick = function() {alert('我我我');}
</script>

界面部分（点击前）：

界面部分（点击后）：

这种方法按照功能不同将代码分离，让代码的结构更加清晰，这一点相比第一种方法强了很多，但是坏处也是明显的，上代码！

<button id="btn">点我点我</button><script>var btn = document.querySelector('#btn');btn.onclick = function() {alert('我我我');}btn.onclick = function() {alert('你你你');}</script>

界面部分（点击前）：

界面部分（点击后）：

啊？“我我我”呢？没错，当同一个点击事件有不止一个触发事件时，后面的触发事件就会覆盖前面的事件，这也是这种方法的最大缺点之一！

方法3：绑定事件监听函数 addEventListenr()

示例代码：

<button class="btn">点点点</button><script>var btn = document.querySelector('.btn');btn.addEventListener('click', fn1);btn.addEventListener('click', fn2);function fn1() {alert('我我我');};function fn2() {alert('你你你');}</script>

界面部分（点击前）：

界面部分（点击后）：

如图所示，这种方式相比第二种方式，优点是触发不止一个事件时相当容易！

angular移除事件绑定事件绑定_002-js的三种事件绑定方式相关推荐

gtest之断言宏的使用以及三种事件机制
前面简单的介绍了一下gtest以及在Windows下如何安装gtest,今天再介绍一下在Linux下该如何安装. 本文重点: 在Linux下如何安装gtest: gtest下断言宏的介绍: gtest ...
JavaScript三种事件绑定的方式(DOM的0级、2级、3级事件处理程序)
JS事件绑定的方式: ①.行内绑定 ②.动态绑定 ③.事件监听一.行内绑定[DOM0级事件处理程序]: 例:<标签属性列表事件="事件的处理程序" /> 虽然可以 ...
三种事件模型是什么？
一.DOM0事件模型第一种事件模型是最早的 DOM0 级模型,这种模型不会传播,所以没有事件流的概念,但是现在有的浏览器支持以冒泡的方式实现,它可以在网页中直接定义监听函数,也可以通过 js 属 ...
安卓Android绘制一个信息填写页面，使用了三种事件监听方法
先上效果图片: 第一种,匿名内部类 //设置提交按钮监听submitButton.setOnClickListener(new View.OnClickListener() {@Overridepub ...
概率论经典问题 —— 三个事件 A、B、C 独立 ≠ 三个事件两两独立
三个事件 A.B.C 相互独立?三个事件两两独立? A:第一次正面朝上: B:第二次正面朝上: C:第一次和第二次结果不同: P(AB)=P(A)P(B)P(AB)=P(A)P(B): P(AC)=1 ...
JavaScript学习笔记（三）---事件、正则表达式、ES6、运动
JavaScript学习笔记(三)---事件.正则表达式.ES6.运动 27.insertbefore 28.滚动条及事件 29.事件及事件对象 30.鼠标事件对象的属性 31.案例:图片随鼠标移动 ...
JS高级程序设计笔记——事件（一）
一.事件流假设有如下HTML代码: <!DOCTYPE html> <html> <head><title>Event</title> & ...
Swing中事件的三种处理方法
2019独角兽企业重金招聘Python工程师标准>>> Swing是目前Java中不可缺少的窗口工具组,是用户建立图形化用户界面(GUI)程序的强大工具.Java Swing组件自 ...
群星巨型计算机事件,群星三种特殊事件介绍特殊事件有几种
群星三种特殊事件介绍特殊事件有几种相信不少玩家都触发过特殊事件,下面分享玩家带来的三种特殊事件介绍,一起随小编来看看吧. 1,异常类是指你的科研船在勘探一个星体时发现的,1-4级,需要科研船去 ...

angular移除事件绑定事件绑定_002-js的三种事件绑定方式

angular移除事件绑定事件绑定_002-js的三种事件绑定方式相关推荐

最新文章

热门文章