javascript学习日记之事件

[TOC]

什么是事件？

事件就是javascript与HTML文档之间的交互比如你点击某个按钮就是个事件 你提交某个表单也是个事件。

事件流

事件流描述的是页面中接收事件的顺序。比如打个比方 你画了一组同心圆 你手指放在圆心 上，那么你手指指的就是所有的圆，并不是某一个圆。

事件冒泡

事件冒泡是有IE提出的事件流，意思是从事件最开始的某具体元素接收，向上传播到文档

    


  
点击
>

那么点击div事件传播顺序就是

div
body
html
document

事件捕获

事件捕获正好与之相反，是由事件最顶层document接收事件。具体的事件最后接收 比如上个例子 事件捕获的过程

document
html
body
div

事件对象

在触发某个事件时，就会产生一个事件对象（event），该对象包含事件相关信息 比如 鼠标点击事件点了哪里 键盘事件按了哪个键 等等 因为浏览器兼容问题
一般件事件对象常用声明方法

var myevent = ev||event

阻止事件冒泡?

e.cancelBubble=true;
e.stopPropagation();
return false; //阻止默认行为

取消事件冒泡小例子

比如我们点击按钮出现一个div 然后点击旁边时 取消div
html 代码

javascript代码

window.onload = function (){
     var mybutton = document.getElementById("mybutton");
     var mydiv = document.getElementById("mydiv");
      mybutton.onclick=function (ev)
        {
            var oEvent=ev||event;
            mydiv.style.display='block';
            oEvent.cancelBubble=true;
        };
     document.onclick=function ()
        {
            mydiv.style.display='none';
        };
    }

单个DIV跟随鼠标

因为事件对象可以提供很多信息 所以我们可以做些好玩的东西 。
让DIV跟随鼠标走 其实很简单就是让clientX等于div的left clientY等于div的top

当然这段代码还是有问题 当页面出现滚动条（页面高度很高时） div就偏离鼠标 怎么解决呢其实呢也
很简单就是让可视区的高度加上滚动的高度

多个DIV跟随鼠标走

之前一个div 跟随鼠标走 现在我们一串div跟随鼠标走
就像老鹰捉小鸡那样 其实呢原理就是最后一个div的left 等于最后第二个div的left 因为后面的一个div要跟着前面一个div走
js代码

window.onload=function ()
    {
        var myDiv=document.getElementsByTagName('div');
        var i=0;

        document.onmousemove=function (ev)
        {
            var myEvent=ev||event;

            for(i=myDiv.length-1;i>0;i--)
            {
                myDiv[i].style.left=myDiv[i-1].style.left;
                myDiv[i].style.top=myDiv[i-1].style.top;
            }

            myDiv[0].style.left=myEvent.clientX+'px';
            myDiv[0].style.top=myEvent.clientY+'px';
        };
    };

简单的拖拽DIV

拖拽我们首先 要几个事件函数
第一个鼠标按住 然后 第二个鼠标移动
第三个鼠标停止 移动消失
事件想好了 现在问题是如何获得拖拽后的距离

如图所示 假设图中小方块 就是div 圆圈就是鼠标按下的地方
图中 x 和 Y 是不变得 所以可以根据X y 值求出拖拽的div 的位置
那么x和y值 怎么求出呢？ 其实x值等于clientX 减去 div物体的offsetleft 就可以求出 同理y也一样 而 拖拽后的距离就等于clienX减去x的值 。

这里还有个细节 就是我是在document上加的鼠标移动 和停止事件 不是我写错了 是以防 div拖出窗口之外 当然移除也要在document移除