JS事件

event事件对象

在触发DOM上某个事件时，会产生一个事件对象event,这个对象包含着所有事件相 关的信息，包含导致事件的元素，事件的类型以及其他的与特定事件相关的信息。
它是事件处理函数的第一个（隐藏）的参数，可以通过arguments[0]来获取。

    
    
    
        
        
        
        
    
     
         GET
    
    
    

此时会打印出一系列的鼠标事件

              btn.onclick=function(event){
                  var event = event || window.event
                  console.log(event)
              }

效果等同上方，IE下取事件是在window下的，此处是个兼容

event.button

如果当前event是鼠标事件，则会有一个button属性，它是一个数字
0代表鼠标按下了左键 1代表按下了滚轮 || 2代表按下了右键（不介绍低版本IE）

在页面中点击即可，作为了解一下

鼠标事件中获取鼠标的位置属性介绍(clientX、pageX、offsetX、screenX)

clientX,clientY:鼠标相对于可视区的位置。
pageX,pageY:鼠标相对于文档的位置
offsetX,offsetY:鼠标相对于操作元素(鼠标点击元素)到盒子边缘(左上)的位置.
screenX,screenY:鼠标相对于显示屏的位置.

            document.onmousedown=function(ev){
            var ev=ev||window.event;
            console.log('可视区的位置X:'+ev.clientX);
            console.log('可视区的位置Y:'+ev.clientY);
            console.log('文档的位置X:'+ev.pageX);
            console.log('文档的位置Y:'+ev.pageY);
            console.log('对于操作元素的位置X:'+ev.offsetX);
            console.log('对于操作元素的位置Y:'+ev.offsetY);
            console.log('显示屏的位置X:'+ev.screenX);
            console.log('显示屏的位置Y:'+ev.screenY);
        }

这个还是得自己多测试加强记忆，写个小demo

自行复制浏览一下即可

键盘事件

onkeydown + onkeyup =onpress（按下+弹起=点击）

每一个键盘字母都对应自己的keyCode码，可以测试一下

            document.onkeydown=function(ev){
              var ev=ev||window.event;
              alert(ev.keyCode);//获取键码
            }

写个小demo，控制盒子移动（w，s，a，d）

组合键

ctrlKey、altKey、shiftKey

            document.onkeydown=function(ev){
                var ev=ev||window.event
                if(ev.keyCode==13&& ev.ctrlKey){ //摁下ctrl与回车 才执行
                    alert(1)
                }
                if(ev.keyCode==13&& ev.altKey){ //摁下alt  与回车 才执行
                    alert(2)
                }
            }

先按组合键测试哦

js事件流

事件流描述的是从页面中接收事件的顺序，事件可以分为冒泡事件与非冒泡事件

事件的冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档） 。
取消冒泡：具体元素对象（冒泡元素）的事件不会冒泡到父级（外层）。
非标准(ie8及以下)： ev.cancelBubble=true;
标准：ev.stopPropagation();

注意的点是，冒泡的顺序，逐级向上传播到较为不具体的节点，写个demo可测试

一共五个事件，如果我点击红圈，也就是先弹small，然后逐级向上释放，接着谈绿色middle，蓝色big，然后是body，最后是html

如果我点击绿圈，红色就不触发，绿色的父级逐渐触发，这个就是事件的冒泡，平时我们点击元素的时候相当于也点击了body，document，只是我们没有给父元素设置事件而已

冒泡的应用

    
    
        
            
            
        
        
            显示
            

            
        
    

我这里没有取消冒泡，在点击按钮的时候，事件会冒泡到document让其隐藏，所以点击按钮无法显示，关闭冒泡之后就可以显示元素了，我们平时写事件的时候需要注意一下

阻止默认事件

浏览器有许多默认事件，比如浏览器的右键出现一组选项框，比如我们表单元素中的submit的默认提交事件以及reset的重置事件，还有a标签的跳转事件，很多

                document.oncontextmenu=function(ev){ //右键事件

                    return false
                   
                }

取消默认事件很简单，使用return false
ev.preventDefault(); 标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件。
ev.returnValue = false; 非标准浏览器（IE8）阻止默认事件

                document.oncontextmenu=function(ev){ //右键事件
                    alert(1)
                    ev.preventDefault()
                   // return false
                }

因为JS是单线程语言，如果我们在不取消其默认事件的前提下，给右键点击增加一个事件，弹窗来一个，会先出弹窗再显示选项框，由此可见自定义事件优先于默认事件，基于这个原理我们在自定义事件后方返回函数false不让其往下运行即可

可复制 浏览一下

其他事件也可以由此出发，取消其默认行为

        
            百度
            

                
            
        

DOM2级事件

上面的js很明显，只弹出456，同元素同事件会覆盖，很容易理解，那如果我们要点击出现两个事件怎么办呢

DOM事件绑定：一个元素上面绑定多个事件。

        基本格式
        元素对象.addEventListener(事件类型,函数,是否捕获);标准浏览器
        事件类型：不能添加on，click/mouseover...
        函数：普通函数名称或者函数体。
        是否捕获：false:冒泡(默认)   true:捕获

第三个参数，是否捕获冒泡先不介绍，先无视

        IE事件绑定和DOM事件绑定(标准浏览器)的区别

        ie浏览器：attachEvent(事件类型,函数);
        事件类型：添加on   onclick
        函数：普通函数名称或者函数体。
        1.参数不一样  
        2.执行顺序不一样
        3.事件类型不一样 
        4.this指向不一样

第三个参数默认为false冒泡

此时点击document 顺序弹出abc

removeEventListener()/detachEvent() 移除事件绑定的参数和添加事件绑定是一致的。后面是IE移除

document.removeEventListener('click',a) 此时就不弹a了

简易事件封装

        function addEvent(obj,event,fn){
            if(obj.addEventListener){//判断条件采用属性判断，如果存在属性就不是IE
                obj.addEventListener(event,fn,false);
            }else{
                obj.attachEvent('on'+event,fn);
            }
        }
        //事件移除的封装
        function removeEvent(obj,event,fn){
            if(obj.removeEventListener){
                obj.removeEventListener(event,fn,false);
            }else{
                obj.detachEvent('on'+event,fn);
            }
        }
        addEvent(document,'click',a);
        addEvent(document,'click',b);//绑定
        removeEvent(document,'click',b)//移除
        addEvent(document,'click',c);

事件流的捕获

依旧是之前三个圆，注意上方的最后一个参数是true，之前说过DOM事件的绑定第三个参数是个布尔值，我这里封装了一下方法，多了一个元素参数，此时我们点哪个都是最后一个才弹

比如我们点最小的红圈，先弹html 然后body 然后依次递减，但是我这个布尔值是可以更改的，如果为fasle则是冒泡，我修改其中一两个看看效果

                    addEvent(small,'click',fn,false);//冒泡
                    addEvent(middle,'click',fn,true);//捕获
                    addEvent(big,'click',fn,false);//冒泡
                    addEvent(document.body,'click',fn,true);//捕获
                    addEvent(document.documentElement,'click',fn,false);//冒泡

此时我要点最小的红圈，弹的顺序是

body--middle--small--big--html

如果我点big 篮圈，弹的顺序是

body--big--html

如果我点的是绿圈，弹的顺序是

body--middle--big--html

事件流的顺序：捕获---目标---冒泡，多套几个圈 多测几次就可以更深入理解了

事件委托的应用

    
    
        
            
            
        
        
            
            

                
55555555
                
pppppppppp
            
            
        
    

注意我点的是UL，从外面找里面找到元素，如果我们在写逻辑的时候发现这个元素很难找的时候，就可以使用这种方法

拖拽效果

这个效果其实在别的文章中写过，简易的再写一次，多敲一遍总是好的

最简单的一个拖拽，需要注意的是onmouseup要写在onmousedown里面，如果写外面就执行一次，之后将无法取消move事件，如果我们不想让他超出浏览器，写个判断

这个逻辑应该不难

然鹅有些元素是不允许拖拽的，比如img，其实使用return false就可以，我们试着封装一个函数

这样我们只需要传递元素即可了

碰撞检测

    
    
        
            
            
            
        
        
            
1
            
2
            
        
    

这个代码就不解释了，看不懂多看几遍 主要是判断的地方