原生Js事件绑定的几种方式

在Js中,有三种常用的绑定事件的方法:

一. 在Dom元素中直接绑定

<button onclick="handleClick">Click Me</button>

二.在JS代码中绑定

document.getElementById("demo").onclick=function(){
    /*   函数体   */     
}

三.绑定事件监听函数

绑定事件的另一种方法是用addEventListener()或者attachEvent()来绑定事件监听函数

elementObject.addEventListener(eventName, handle, useCapture);

这里的事件名称没有"on"前缀,handle事件句柄函数,useCapture,布尔值,是否使用捕获类型,一般为false,即为冒泡

elementObject.attachEvent(eventName, handle) 这里的事件名称有"on"前缀。

addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持的;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来兼容。

function addEvent(obj, type, handle){
            try{
                // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
                obj.addEventListener(type, handle, false);
            }catch(e){
                try{
                    // IE8.0及其以下版本
                    obj.attachEvent("on" + type, handle);
                }catch(e){
                    obj["on" + type] = handle;
                }
            }
        }

 

posted @ 2020-04-13 15:49  JettWoo  阅读(1025)  评论(0编辑  收藏  举报