原生JS实现：Tap效果，模态框效果

Tap效果

代码：

    
    
    


    

        

            
事件
  
            
事件流
            
事件处理程序
        
        

            
    
                

                    JavaScript和HTML的交互是通过事件实现的。
                    JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，
                    浏览器会产生事件。如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄。
                
            
            

                

                    事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型：
                
                
    
                    1.IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
                
                

                    2.Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反。
                
                
    
                    3.DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，
                    为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。
                
            
            

                

                    我们也称之为事件侦听器（listener），事件就是用户或浏览器自身执行的某种动作。
                    比如click、load、mouseover等，都是事件类型（俗称事件名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器。
                
                

                    也就是我们需要提前定义好某些事件发生了该怎么处理，这个过程叫做绑定事件处理程序，了解了这些，我们看看如何给元素添加事件处理程序。
                
            
        
    
    

    

Tap效果预览

模态框效果

代码：

    
    
    


    点我

    

        

            X
            
我是标题
        
        

            
我是内容
            
我是内容
            
我是内容
        
        

            确定
            取消
        
    
    

模态框效果预览