js事件篇

Posted 2020-08-01 JcScript

javascript和html之间的交互式通过事件来实现的，事件就是文档或浏览器窗口中发生的一些特定的交互。

事件流：描述的是从页面中接收事件的顺序。

不同的是，IE和Netscape开发团队竟然提出了差不多是完全相反的事件流概念。IE的事件流失事件流冒泡，而Netscape的事件流是事件流捕获。

<div id="demo">12312<span id=‘demo1‘>sdasd</span></div>
<script>
    var oDiv = document.getElementById(‘demo‘);
    var oDiv1 = document.getElementById(‘demo1‘);
    oDiv.onclick = function(){
        alert(123);
    }
    oDiv1.onclick = function(){
        alert("abc");
    }
</script>

以这段代码为例

事件冒泡：span->div->body->html->document->window

事件捕获: window->document->html->body->div->span

事件冒泡:

IE的事件流叫做事件冒泡，是指事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。事件冒泡：span->div->body->html->document->window

事件捕获：

Netscape Communicator团队提出的另一种事件流叫做事件捕获，思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件，事件捕获的用意在于在事件到达预定目标之前捕获它。事件捕获: window->document->html->body->div->span

事件处理程序：

<input onclick="alert(123)">

oDiv.onclick = function(){
        alert(123);
}

oDiv.addEventListener(‘click‘,function(){
        alert(123);
    },false);

上面是三种事件处理方法，首先第一种方法不推荐，因为违反了HTML与JavaScript分离的准则。

第二种方法只能给一个事件绑定一个响应函数，重复绑定会覆盖之前的绑定。

第三种方法比较推荐，可以绑定多个不同的函数。

addEventListener这个方法有三个参数，第一个参数是你要绑定的事件，第二个参数是执行的函数，第三个参数有两个值（true flase）。

true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件，

false表示该元素在事件的“冒泡阶段”（由内往外传递时）响应事件；

IE事件处理程序：

IE实现了与DOM中类似的两个方法：attachEvent（）和detachEvent()。

btn.attachEvent(‘click‘,function(){
    alert(123);    
});

由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

下面我们来封装一个能力检测的js库的事件部分：

    var oDiv = document.getElementById(‘demo‘);
    var Event = {
        addEvent:function(element,type,even){
            if(element.addEventListener){
                element.addEventListener(type,even,false);
            }else if(element.attachEvent){
                element.attachEvent(‘on‘+type,even);
            }else{
                element["on"+type]=even;
            }
        },
        removeEvent:function(element,type,even){
            if(element.removeEventListener){
                element.removeEventListener(type,even,false);
            }else if(element.detachEvent){
                element.detachEvent(‘on‘+type,handler);
            }else{
                element["on"+type]=null;
            }
        }
    };
    Event.addEvent(oDiv,"click",function(){
        alert(123);
    });

 

下面我们来介绍一下如何取消事件（冒泡）：

事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。这个方法也是一种纯JavaScript特性，但在跨浏览器的环境中则无法安全地使用 。不过，只要我们通过jQuery来注册所有的事件处理程序，就可以放心地使用这个方法。w3c的方法是event.stopPropagation()，IE则是使用window.event.cancelBubble = true.

下面我们来封装一个取消事件冒泡的函数：

function stopEventBubble(event){
        var e=event || window.event;
        if (e && e.stopPropagation){
            e.stopPropagation();    
        }
        else{
            e.cancelBubble=true;
        }
    }

 

是不是很简单呢？其实我们遇到的不都是事件的冒泡与捕获，我们在工作中还可能遇到一些其他的问题。

例如：

我们把单击事件注册到一个锚元素，当用户单击链接时，浏览器会加载一个新页面。这种行为和事件处理程序是不同的。类似地，当用户在编辑完表单后，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也没用，因为默认操作不是在正常的事件传播流中发生的。在这种情况下，.preventDefault()方法则可以在触发默认操作之前终止事件 。

事件的传播和浏览器默认操作是相互独立的两套机制，在二者任何一方发生时，都可以终止另一方。

如果想要同时停止事件传播和默认操作，可以在事件处理程序中返回false。

return false;

最后：我们做的许许多多的东西只要涉及到交互就一定涉及到事件的绑定，所有学好js中事件的部分我认为还是非常有必要的，你说是吧？