js中的事件处理方法

Posted 2020-09-02

第一种：HTML事件处理程序

　　即将事件直接添加到html结构里

<div>
    <input type="button" value="按钮" onclick="showMessage()">
</div>
<script>
    function showMessage(){
        alert("hello world");
    }
</script>

这种方式是比较容易理解，但是缺点也很明显：HTML和JS代码紧密的耦合在一起，想修改的话需要同时要改html和js两部分的内容。

第二种：DOM0级事件处理

　　即 把一个函数赋值给一个事件处理程序属性。是一种用的比较多的方法，具有简单，跨浏览器等特点。

<div>
    <input type="button" id="btn" value="按钮" onclick="showMessage()">
</div>
<script>
    var btn=document.getELementById(‘btn‘);
    btn.onclick=function(){
        alert("hello world");
    }
btn.onclick=null;//删除onclick属性
</script>

第三种 DOM2级事件处理

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListner()。这这两个方法接受三个参数：要处理的事件名，作为事件处理程序的函数和函数的布尔值(true表示在事件捕获阶段处理事件程序，false则对应事件冒泡，默认是false).

<div>
    <input type="button" id=“btn” value="按钮" >
</div>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener(‘click‘,showMessage,false);

　　btn.addEventListener(‘click‘,showOther,false);

　　function showMessage(){ alert("hello world"); }

　　function showOther(){ alert("other"); }

　　btn.removeEventListener(‘click‘,showMessage,false);
</script>

注意：通过addEventListener添加的事件只能通过removeEventListener来删除，同时这两个函数的接受的事件名是需要去掉“on”的。通过DOM0级和DOM2级事件处理可以给给元素添加多个事件处理程序和多个事件。这些添加的事件按照其调用的先后顺序执行。

第四种 IE事件处理程序

提供了两个方法：attachEvent()添加事件和detachEvent()删除事件，接受两个参数：事件处理的程序的名称(不去掉"on")，事件处理程序的函数 IE8及以前的浏览器只支持事件冒泡。

<div>
    <input type="button" id=“btn” value="按钮" >
</div>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent(‘onclick‘,showMessage,false);
　　function showMessage(){ alert("hello world"); }
</script>

事件处理兼容低版本IE浏览器问题解决：新建一个对象event，给该对象添加一个addEvent方法，在该方法里对浏览器进行能力检测（支持哪种事件处理方式就用哪种），删除事件同理。

　　<input type="button" id="btn" value="按钮">
    <script>
        var btn=document.getElementById(‘btn‘);
        function showMessage(){
            alert(‘hello dq‘);
        }
        var event={
            addevent:function(element,type,handle){
                if(element.addEventListener){
                    element.addEventListener(type,handle,false);
                }else if(element.attachEvent){
                    element.attachEvent(‘on‘+type,handle);
                }else{
                    elememt[‘on‘+type]=handle;
                }
            }
        }
        event.addevent(btn,‘click‘,showMessage);
    </script>