通过原生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

(0)
guozi的头像guozi
上一篇 2024年6月4日
下一篇 2024年6月4日

相关推荐

  • dns域名被污染,dns被污染有什么后果

    您听说过DNS污染吗?它指的是域名中毒吗?您可能对此问题感到困惑,但这是互联网行业不可忽视的问题。 DNS污染有什么危害?和域名中毒有什么关系呢?如何有效预防DNS污染呢?下面我们…

    行业资讯 2024年5月17日
    0
  • 局域网建立网站,局域网内建网站

    对于现代企业来说,建立局域网网站不再是一个陌生的概念。不仅可以提供更加稳定、高效的网络服务,还可以为企业带来更多的业务和发展机会。但什么是局域网建站呢?为什么它如此重要?我们如何构…

    行业资讯 2024年3月29日
    0
  • 怎样绑定泛解析域名?

    近年来,随着互联网行业的发展,越来越多的网站开始使用泛解析域名。那么,什么是泛解析域名?它有什么作用和优势?如何购买和设置?更重要的是,怎样绑定泛解析域名到自己的网站?如果你也想了…

    行业资讯 2024年3月25日
    0
  • 贵州网站开发,贵州网站建设百家号

    随着信息技术的发展,网站已成为企业树立品牌形象、提高知名度、拓展市场的重要渠道。在美丽的贵州大地上,网站建设也越来越受到人们的关注。然而,在建立网站之前,您需要做好充分的准备并选择…

    行业资讯 2024年4月7日
    0

发表回复

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