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

在网页开发中经常会有交互操作,比如点击一个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); //通过侦听事件处理相应的函数,

//第三个参数设置为true就在捕获过程中执行,反之就在冒泡过程中执行处理函数。

 function clickone(){ alert("hello"); }
</script>

IE下使用attachEvent/detachEvent:addEventListener 只支持到 IE 9,所以为了兼容性考虑,在兼容 IE 8 以及以下浏览器可以用 attachEvent 函数,和 addEventListener 函数表现一样,除了它绑定函数的 this 会指向全局这个缺点以外,使用为了考虑兼容性,我们在使用前,可以添加下面这段代码(下面使用采用惰性加载的方法):

    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){}
       //其他事件的回调函数...
};

区别说明:

方式1和方式2是我们经常用到的,那么既然已经有两种绑定事件的方法为什么还要有第三种呢?答案是这样的:

用 “addeventlistener” 可以绑定多次同一个事件,且都会执行,而在DOM结构如果绑定两个 “onclick” 事件,只会执行第一个;在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

原创文章,作者:guozi,如若转载,请注明出处:https://www.sudun.com/ask/89173.html

Like (0)
guozi的头像guozi
Previous 2024年6月4日
Next 2024年6月4日

相关推荐

  • idc机房租用托管服务器收费标准是多少?

    想必大家在使用互联网的过程中,都会经常听到“IDC机房”和“托管服务器”这两个词。那么,什么是IDC机房?它又与我们的日常生活有着怎样的联系呢?与自建服务器相比,托管服务器又有哪些…

    行业资讯 2024年3月28日
    0
  • 如何在win10上配置iis服务器进行网站加速?

    如何在win10上配置iis服务器进行网站加速?这是一个让许多人头疼的问题。随着网络技术的快速发展,网站的访问速度也成为了用户对网站质量的重要考量标准。而iis服务器作为一种常用的…

    行业资讯 2024年3月24日
    0
  • 精密连接器生产厂商

    精密连接器,这个看似普通的名词,却在网络安全加速行业中发挥着不可或缺的作用。它是如何在网络安全加速行业中扮演重要角色的?精密连接器生产厂商又是如何发展至今?它们的产品特点和优势又有…

    行业资讯 2024年4月21日
    0
  • 云服务器安全加速技术有哪些?

    随着云计算的发展,网络安全问题变得越来越重要。在云服务器中,如何保证数据的安全性和网络的稳定性是一个关键问题。为此,各种网络安全加速技术应运而生。那么,究竟什么是网络安全加速技术?…

    行业资讯 2024年4月2日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注