码迷,mamicode.com
首页 > Web开发 > 详细

js注册事件的各种方式

时间:2018-09-23 16:31:29      阅读:569      评论:0      收藏:0      [点我收藏+]

标签:turn   否则   strong   四种   事件   rip   doc   针对性   NPU   

第一种: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注册事件的各种方式

标签:turn   否则   strong   四种   事件   rip   doc   针对性   NPU   

原文地址:https://www.cnblogs.com/kxblog/p/9692730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!