【JS基础】从HTML到JS事件分离过程| JavaScript | Chihokyo BLOG

最近开始从头学习js和事件。现在开始分离一个html的js事件从扭打在一起到分离的形成过程。

1. 必备知识

js定义对象基本知识（构造函数）
知道啥是js事件（点击对话框那种程度就行）

2. 过程走起

事件就是这样的过程。
先开始事件，然后知道事件名字，然后有个触发事件，然后响应事件。

有按钮，才能获取按钮，然后才能给按钮注册事件，事件然后触发函数响应。
按钮元素→获取按钮元素对象→按钮注册事件→事件触发函数→函数响应

这次的事件例子。打开网页，点个按钮，按钮之后弹出对话框。就酱紫。

2-1 原始版本

最原始的版本
同一html文件内js和html完全写在一起，不分离 !注意里面双引号和单引号问题。

<button value="button" onclick="alert('我被点了呢')">原始版本</button>

2-2 js分离，事件未分离

同一html文件内，head部分写js，html内直接触发onclick事件

<script>  
    function dian(){  
        alert('我被点了');                  
    }  
</script>  
<button value="button" onclick="ok()">分离初级版本</button>

2-3 js分离，事件分离，命名函数

虽然在head写js 然后用元素对象onclick点击触发事件函数testClick
但缺点就是，这样导入不同的js文件的时候可能会有函数重名，覆盖掉的情况

<body>  
    <button value="button" id="dian">事件分离了，命名函数</button>  
</body>  

<script>  
    function dianClick(){  
        alert('被点了啦');  
    }  
    var dianObj = document.getElementById('dian');  
    dianObj.onclick = dianClick; //千万不能写成dianClick();这样加载完就会直接调用触发了！  
</script>

2-4 js分离，事件分离，匿名函数

完全版本出炉！

<body>  
    <button value="button" id="dian">事件分离了，匿名函数</button>  
</body>  

<script>  
    // 通过id来获取按钮元素对象  
    var dianObj = document.getElementById('dian');  
    // 为按钮元素对象，注册点击事件，添加事件处理函数（匿名）  
    dianObj.onclick = function(){  
      // 响应函数  
        alert('最后成功了！');  
    }  
</script>

3.注意点

在下面的注册事件。使用函数的时候一定要把script写在body的下面。不然getElementById在元素加载之前是根本找不到标签的。会发生下面这样的错误。

Uncaught TypeError: Cannot set property 'onclick' of null

【JS基础】从HTML到JS事件分离过程