JavaScript中事件绑定的三种方式

Posted 2020-10-21 x_smile

javascript使得网页与用户友好交互，在使用 js 进行时间绑定的时候有三种绑定方式。

第一种：初学者以及普通写法

1 <div id="dom0">
2     <input type="button" value="Click0" onclick="dom0();" />
3 </div>
4 <script>
5     function dom0(){
6         alert(\'Dom0 Leval\');
7     }
8 </script>

第二种：程序员常用写法

1 <div id="dom1">
2     <input type="button" value="Click1" />
3 </div>
4 <script>
5     var dom1=document.getElementById(\'dom1\').firstElementChild;
6     dom1.onclick=function(){
7         alert(\'Dom1 Leval\');
8     }
9 </script>

第三种：不常见但面试中会遇到

1 <div id="dom2">
2     <input type="button" value="Click2" />
3 </div>
4 <script>
5     var dom2=document.getElementById(\'dom2\').firstElementChild;
6     dom2.addEventListener(\'click\',function () {
7         alert(\'Dom2 Leval\');
8     },false);
9 </script>

在第三种写法中，addEventListener（事件，函数，false || true），false代表冒泡模型，true代表捕捉模型。默认为false。

 

原创不易，尊重版权。转载请注明出处：http://www.cnblogs.com/xsmile/