js 第八天 事件

dom0级绑定  box.onclick = function(){}

dom2级绑定 box.addEventListener(eventType,callback,false)

 

pc端常用事件 

表单： 内容改变 ：onchange  

             获取焦点  onfocus

             失去焦点  onblur

              多选框改变   change

键盘    onkeydown

          onkeyup 

鼠标   onclick  点击一下

           ondblclick 点击两下

          onmouseover鼠标滑过 onmouseout 鼠标滑出

        onmouseenter  鼠标进入 onmouseleave 鼠标出去

       onmousemove 鼠标移动   onmousedown 鼠标按下（不管左右键）

   onmouseup  鼠标抬起      onmousewheel（鼠标上的滚动轴）

其他  window.onload  （dom结果和图片加载完后做某事  ）

         onerror   加载失败

     onscroll 监听滚动轴   

onresize  页面改变执行事件 

wap端事件

oninput

单手指touchstart    touchend    touchmove   （相当于pc端的鼠标按下  抬起  按下移动 ）

多手指  getsturestart    getstureend   getsturechange

重力感应事件  

传感器 陀螺仪（微信摇一摇 ）

事件对象 ：当一个元素行为被触发的时候会默认返给咱们一个对象   就是事件对象

1 存储咱们每次记录的值 2  存在兼容性   event = event|| window.event  3  存储了事件的一些属性和方法

pageX  pageY   鼠标距离浏览器顶端的距离  包含滚动轴  存在兼容性   ie 67 8   

pageY = clientY + document.documentElement.scrollTop   ||  clientY + document.body.scrollTop 

clientX  clientY 鼠标距离浏览器可视区的距离 不包括滚动轴 

事件类型 

box.onclick = function(event){

console.log(event)

}

event.type 就是事件类型 

 event.target  事件源（操作事件的主语）（存在兼容性    evevt.target || event.srcElement）

阻止事件的默认行为 [例如a标签的默认行为跳转]  在事件函数1   return false  或者  2   event.PreventDefault()   但是存在兼容性   3  event.returnValue = false   [ie 6 7 8]

键盘事件上的属性

onkeyxx的主语都是document.body [我猜的]

keyCode[注意大小写   定位是absolute的top啥的小写  offsetTop要大写]   

介绍移动端的库   一个是解决移动端延时300ms判断双击的库  fastclick.js

一个是手势库  hammer.js    zepto 手势库

事件传播阶段

1 目标阶段  2 冒泡阶段  【向上的】3 捕获阶段 【向下的】阻止冒泡  event.stopPropagation()

  存在兼容性问题   【propagation 传播的意思 】

ie 6 7 8 event.cancleBubble   【注意区别阻止冒泡（事件传播） 和  阻止，默认行为的区别 】

onmouseover   onmouseenter  区别

事件机制不一样   后者是捕获 前者是冒泡

拖拽   

 <div id='box' style="background: chartreuse;width: 200px;height: 200px;position: absolute;" >
        王者荣耀
    </div>
    <script>
        document.body.onkeydown=function (event){
            if(event.keyCode==40)
            {
                box.style.top = box.offsetTop+20+'px'
            }
            if(event.keyCode==39)
            {
                box.style.left = box.offsetLeft+20+'px'
            }
            if(event.keyCode==38)
            {
                box.style.top = box.offsetTop-20+'px'
            }
            if(event.keyCode==37)
            {
                box.style.left = box.offsetLeft-20+'px'
            }
           
        }
        box.onmousedown = function(event){
            var delX=event.pageX-this.offsetLeft;
            var delY = event.pageY - this.offsetTop;
            document.onmousemove = function(event)
            {
            box.style.left = event.pageX - delX + "px"
            box.style.top = event.pageY - delY + 'px'
            }
             document.onmouseup = function()
          {
            document.onmousemove = null;
            document.onmouseup = null;
        }


        }
       
       
    </script>
    

  拖拽界限

 var winW=document.documentElement.clientWidth||document.body.clientWidth;
        box.onmousedown = function(event){

            var delX=event.pageX-this.offsetLeft;
            var delY = event.pageY - this.offsetTop;
            document.onmousemove = function(event)
            {
                if(event.pageX-delX<0)
                {
                    box.style.left = 0;
                }
                else if(event.pageX-delX+box.offsetWidth>=winW)
                {
                    box.style.right=0
                }
                else
                {
                    box.style.left =event.pageX-delX+ "px"
                }

bom0级 绑定事件容易被覆盖

bom2级 box.addEventListener('click',function(){alert(1)},false)   第三个参数  false代表处于冒泡 阶段  true 为处于捕获阶段   一般写成false就ok

box.addEventListener('click',function(){alert(2)},false) 

var fn3 =function(){alert(3)}

box.addEventListener('click',fn3,false)  不会覆盖  形成一个事件队列   从上往下执行   想要移除事件   使用

box.removeEventListener('click',fn3,false)   这里面的三个参数必须和上面队列的一样  才能移除   如果都是同样内容的function是没法移除的   因为函数是存储在不同堆内存的  地址不一样  函数也不是一样的  切记

ie里面  attachEvent（‘onclick’，fn3）  var fn3 =function（）{} 移除  detachEvent（‘onclick’，fn3）   attach 连接的意思  detach 分离的意思

dom2封装源码

function on(ele,type,fn)
       {
           if('addEventListener' in document)
           {
               ele.addEventListener(type,fn,false)
           }
           else
           {
               ele.attachEventListener('on'+type,fn)
           }

       }
       on(box,'click',function(){})
       function off(ele,type,fn)
       {
           if('removeEventListener' in document)
           {
               ele.removeEventListener(type,fn,false)
           }
           else
           {
               ele.detachEventListener('on'+type,fn)
           }

       }
       var f =function(){}
       off(box,'click',f())

dom2级  this指向问题

在一般浏览器中  dom2级this指向的是元素    而ie 6 78 指向的是window   为了让this指向都是元素   改写ie的this指向  用重写的bind   

Function.prototype.bind = function(){
            var obj = arguments[0]
            var _this = this
            _this.call(obj)
        }
        var fn1 =fn.bind({name:'pengqi'})

 事件委托 

通过给父级节点绑定事件来控制子节点的方法叫做事件委托    解决性能问题  不用开辟那么多堆内存

  <div id='box'>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>
    <script>
        aBox=document.getElementById("box")
        aBox.onclick = function(e){
            e=e||window.event;
            console.log(e.target.innerHTML)
        }
    </script>

通过事件委托   多元素拖拽

  #box{
            width: 300px;
            height: 300px;
            background: yellowgreen;
            position: absolute;
        }
        p{
            position: absolute
        }
    </style>
</head>
<body>
  <div id='box'>
        <p>我</p>
        <p>太</p>
        <p>难</p>
        <p>了</p>
        <span>我自岿然不动</span>
  </div>
  <script>
      var oBox = document.getElementById('box')
      oBox.onmousedown =function(e){
          e = e || window.event;
          var target = e.target  || e.srcElement;
        //   console.log(target.nodeName)
          if(target.nodeName == 'P')
          {
            
            var delX= e.pageX-target.offsetLeft;
            var delY= e.pageY-target.offsetTop;
            document.onmousemove=function(e)
            {
                e= e||window.event;
                target.style.left = e.pageX - delX+'px';
                target.style.top =e.pageY - delY+'px';
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        } 
      }
      
  </script>