通过原生js对DOM事件的绑定的几种方式总汇

站长手记作者： 2024-08-28 13:45:01

在网页开发中经常会有交互操作，比如点击一个dom元素，需要让js对该操作做出相应的响应，这就需要对Dom元素进行事件绑定来进行处理，js通常有三种常用的方法进行事件绑定：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。

直接在DOM元素绑定事件

<div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件
<script>
    function clickone(){ alert("hello"); }
</script>

在JavaScript代码中绑定

<div id="btn"></div>
<script>
  document.getElementById("btn").onclick = function（）{ alert("hello"); } //脚本里面绑定
</script>

绑定事件监听函数

<div id="btn"></div>
<script>
 document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数，
 function clickone(){ alert("hello"); }
</script>

    var addListener = null,
        removeListener = null;
    if (typeof window.addEventListener === 'function') {
        addListener = function(el, type, fn) {
            el.addEventListener(type, fn, false);
        };
        removeListener = function(el, type, fn) {
            el.removeEventListener(type, fn, false);
        };
    } else if (typeof doc.attachEvent === 'function') {  //'IE'
        addListener = function(el, type, fn) {
            el.attachEvent('on'+type, fn);
        };
        removeListener = function(el, type, fn) {
            el.detachEvent('on'+type, fn);
        };
    } else {
        addListener = function(el, type, fn) {
            el['on'+type] = fn;
        };
        removeListener = function(el, type, fn) {
            el['on'+type] = null;
        };
    }

addListener(dom, "click", EventHandler.confirmBtnClickEvent);
var EventHandler = {
       confirmBtnClickEvent: function(e){}
       //其他事件的回调函数...
};