第一种：HTML行内注册
<input type="button" value="第一种方法" onclick="alert(‘我被调用了‘)">
缺点：事件的代码太多，会使HTML的页面会乱掉 。未有分离HTML和Js代码
第二种：也是行内进行注册
html：
<input type="button" value="第二种方法" onclick="han()">
js：
?function han(){ ???????alert("我被调用了"); ???};缺点：没有把HTML和Js代码进行分离。如果为按钮注册一个事件，需要翻到HTML上写onclick。并且函数名重复会很困扰。
第三种：分离HTML和js的注册事件
html：
<input type="button" value="第三种方法" id="btn"> ???
js：
???<script> ???function my$(id){ ????return document.getElementById(id); ???// ??通用函数 ?????}; ????my$("btn").onclick = han; ???// ?注册事件,不能用han()否则会自动触发 ???</script>缺点：
如果在外部引入的js文件，有同名会被覆盖
第四种：
html：
<input type="button" value="第四种方法" id="btn1">
js：
<script> ???????function my$(id){ ????return document.getElementById(id); ???// ??通用函数 ?????}; ???my$("btn1").onclick = function(){ ???????alert("我被调用了"); ???}; ???// 针对性强 ???</script>优点：针对性强
js注册事件的各种方式
原文地址：https://www.cnblogs.com/kxblog/p/9692730.html