JS day36 注册事件的两种方式

最新推荐文章于 2023-04-19 10:47:55 发布

肝JOJO

最新推荐文章于 2023-04-19 10:47:55 发布

阅读量125

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/102105532

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

一.概念:

给元素添加事件,称为注册事件或者绑定事件.

二.注册方式:

1传统注册方式
①.例如

onclick <button onclick="alert ("hi")"></button>
btn.onclick=function(){}

②.特点
注册事件的唯一性.同一个元素,同一个事件只能设置一个处理函数,最后注册的
事件会覆盖之前注册的事件
③.代码示例

                var btns=document.querySelectorAll('button');
                btns[0].onclick=function(){
                    alert('hi');            
                }
                btns[0].onclick=function(){ //会覆盖之前的事件
                    alert('hi2');              
                }

<body>
    <button>传统注册事件</button>
    <button>addEventListener</button>
    <button>attachEvent</button>   
</body>

2方法监听注册方式
*w3c标准推荐方式
*addEventListener()他是一个方法
*IE9之前不支持,可用attachEvent()代替
特点:同一个元素同一个事件可以注册多个监听器

1.eventTarget.addEvenListener(type,listener[,useCapture]): IE9以后支持
*eventTarget.addEvenListener()
将指定的监听器注册到eventTarget(目标对象上),当该对象触发指定的事件时,就会执行事件处理函数
*该方法接收三个参数
①type:事件类型字符串,如click,mouseover,不需要on
②listener:事件处理函数,事件发生时,会调用该监听函数
③useCapture:可选参数,是一个布尔值,默认是false.
*代码示例

 				var btns=document.querySelectorAll('button');
                btns[1].addEventListener('click',function(){
                    alert('嗨');
                })
                btns[1].addEventListener('click',function(){  //可以添加多个事件,不会覆盖掉之前的事件
                    alert('hello');
                })

<body>
    <button>传统注册事件</button>
    <button>addEventListener</button>
    <button>attachEvent</button>   
</body>

2.eventTarget.attachEvent(eventNameWithOn,callback); IE9以前支持
*eventTarget.attachEvent()
将指定的监听器注册到eventTarget(目标对象上),当该对象触发指定的事件时,指定的回调函数就会被执行
*该方法接收二个参数
①eventNameWithOn:事件类型字符,比如onclick,onmouseover,需要on
②callback:时间处理函数,当目标触发事件时,回调函数被调用
*代码示例

        btns[2].attachEvent('onclick',function(){  
            alert('hello');
        })

三.封装一个注册事件兼容性函数

        function addEventListener(element,eventName,fn){
            //判断当前浏览器是否支持addEventListener方法
            if(element.addEventListener){
                element.addEventListener(eventName,fn);  //第三个参数默认是false
            }else if(element.attachEvent){
                element.attachEvent('on'+eventName,fn);
            }else{
                //相当于element.οnclick=fn;
                element['on'+eventName]=fn;
            }
        }