[想试试看JavaScript ] 为什麽需要这麽多种注册事件处理的方式

为什麽需要这麽多种注册事件处理的方式?

上一篇提到注册事件的方式有三种
1.HTML 属性
2.DOM 属性
3.addEventListener()

那这三种有什麽差异呢?

主要的差异是越後面的写法其实写起来越长越复杂

既然写起来比较复杂,为什麽会用比较复杂的写法呢?

当网站比较复杂,就会采用 DOM 属性addEventListener 的写法
我们写网站时,不只会希望写出功能,也希望在修改的时候会很方便。
所以为了阅读的方便,会习惯将 HTML 与 Javascript 分开来写,HTML 只负责放资料,Javascript 负责处理资料与制作功能。
使用 HTML 属性的写法会将资料与功能都写在一起阅读起来很不方便。

不过实际上写网站也比较少用 DOM 属性的写法,为什麽呢?
因为 HTML 属性DOM 属性的写法,同样的事件,注册事件只能注册一次如果重复注册事件就会也只会注册一次。
可以试一下下面的程序码,可以发现只有 addEventListener 可以重复注册 click 事件

<html>
<head>
<script>

</script>
</head>
<body>
    <button id="btn" onclick="alert('click1');" onclick="alert('click2';)">Click</button>
<script>
var btn=document.getElementById("btn"); // 得到 button 标签放进变数 btn 里
btn.onclick=function(){
    alert('onclick1');
};
btn.onclick=function(){alert('onclick2')};
btn.addEventListener('click',function(){alert('adclick1')});
btn.addEventListener('click',function(){alert('adclick2')});
</script>
</body>
</html>

总结

谁可以写在 Javascript?

HTML 属性只能写在 HTML
DOM 属性addEventListener 可以写在 Javascript

谁可以重复注册相同事件

addEventListener 可以


<<:  Day18 - 铁人付外挂前置作业(三)- 建立资料夹结构

>>:  状态流程图与有限状态机

Powershell 入门之函数

前面,我们已经知道了,如何去编写 powershell 脚本,今天我们就一起来看看,其他的功能。通过...

[VR 前後端交响曲Day29] Rails专案开发 - Action Cable即时互动功能: 以edit和delete ticket为例

来到倒数第二天啦!感动流泪O_Q 前两天里用Vuex状态管理的方式实作编辑和删除ticket 本日待...

android studio 30天学习笔记-day 7-介绍okhttp

okhttp是常用的第三方库,跟retrofit、Volley一样都能做网络连线的请求。 今天就做个...

《赖田捕手:番外篇》第 37 天:用 Netlify 布署前端网页 (二)

《赖田捕手:番外篇》第 37 天:用 Netlify 布署前端网页 (二) 虽然他爱着所有的布署方式...

[13th][Day9] docker image-1

docker 将这样的 file system 称为 image(映像/镜像)。一个 image 可...