上一篇提到注册事件的方式有三种
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>
HTML 属性
只能写在 HTML
DOM 属性
与 addEventListener
可以写在 Javascript
addEventListener
可以
<<: Day18 - 铁人付外挂前置作业(三)- 建立资料夹结构
前面,我们已经知道了,如何去编写 powershell 脚本,今天我们就一起来看看,其他的功能。通过...
来到倒数第二天啦!感动流泪O_Q 前两天里用Vuex状态管理的方式实作编辑和删除ticket 本日待...
okhttp是常用的第三方库,跟retrofit、Volley一样都能做网络连线的请求。 今天就做个...
《赖田捕手:番外篇》第 37 天:用 Netlify 布署前端网页 (二) 虽然他爱着所有的布署方式...
docker 将这样的 file system 称为 image(映像/镜像)。一个 image 可...