javascript學習日記之事件

[TOC]

什么是事件?

事件就是javascript與HTML文檔之間的交互比如你點擊某個按鈕就是個事件 你提交某個表單也是個事件。

事件流

事件流描述的是頁面中接收事件的順序。比如打個比方 你畫了一組同心圓 你手指放在圓心 上,那么你手指指的就是所有的圓,并不是某一個圓。

事件冒泡

事件冒泡是有IE提出的事件流,意思是從事件最開始的某具體元素接收,向上傳播到文檔

<!DOCTYPE html>
<html>
<head>
    <title>事件流</title>
</head>
<body>
  <div id="Mydiv">點擊</div>>
</body>
</html>

那么點擊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 代碼

<!DOCTYPE html>
<html>
<head>
    <title>事件冒泡</title>
    <style type="text/css">
    #mydiv{width: 100px; height: 200px;background:black; display: none;}
    </style>
</head>
<body>
  <input id="mybutton" type="button" value="顯示"/>
  <div id ="mydiv"></div>
</body>
</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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠標跟隨div</title>
    <style >
    #mydiv {width: 100px;
            height: 100px; background: yellow; position: absolute;}
    </style>
    <script>
        document.onmousemove = function(ev){
            var myevent = ev||event;
            var  mydiv = document.getElementById('mydiv');
            mydiv.style.left = myevent.clientX+'px';
            mydiv.style.top =myevent.clientY+'px';
        }
    </script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

當然這段代碼還是有問題 當頁面出現滾動條(頁面高度很高時) div就偏離鼠標 怎么解決呢其實呢也
很簡單就是讓可視區的高度加上滾動的高度

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠標跟隨div2</title>
    <style >
        #mydiv {width: 100px;
            height: 100px; background: yellow; position: absolute;}
    </style>
    <script>
        document.onmousemove = function(ev){
            var myevent = ev||event;
            var  mydiv = document.getElementById('mydiv');
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
            mydiv.style.left = myevent.clientX+scrollLeft+'px';
            mydiv.style.top =myevent.clientY+scrollTop+'px';

        }
    </script>
</head>
<body style="height:2000px;">
<div id="mydiv"></div>
</body>
</html>

多個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的值 。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        #mydiv {width:100px; height:100px; background:black; position:absolute;}
    </style>
    <script>
        window.onload=function ()
        {
            var Div=document.getElementById('mydiv');
            var X=0;
            var Y=0;
            Div.onmousedown=function (ev)
            {
                var myEvent=ev||event;
                X=myEvent.clientX-Div.offsetLeft; //x的值
                Y=myEvent.clientY-Div.offsetTop;   //Y的值
                 document.onmousemove=function (ev) //移動
                {
                    var myEvent=ev||event;
                    Div.style.left=myEvent.clientX-X+'px';
                    Div.style.top=myEvent.clientY-Y+'px';
                };
                  document.onmouseup =function (){ 
                    document.onmousemove =null;
                    document.onmouseup = null;
                } //停止之后移除鼠標移動事件
            };
        };
    </script>
    <title>拖拽</title>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

這里還有個細節 就是我是在document上加的鼠標移動 和停止事件 不是我寫錯了 是以防 div拖出窗口之外 當然移除也要在document移除

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 事件對象 鼠標事件 event.clientX在可視區中,鼠標點擊的x坐標 event.clientY在可視區中,...
    LaBaby_閱讀 599評論 0 1
  • offset家族三大家族和一個事件對象三大家族(offset/scroll/client)事件對象/event ...
    Yuann閱讀 982評論 0 5
  • 事件對象 在我們注冊事件后,并不會直接調用這個匿名函數,而是觸發這個事件時才執行內部代碼。 所以真正調用匿名函數的...
    印象rcj閱讀 298評論 0 1
  • 【第一章:初到大連】我不是一個會寫作的人,我盡量用最平淡的文字+最簡單的方式把我們的故事說清楚。 從開始有...
    七惟閱讀 353評論 0 1
  • 今天下載了一個新APP,在AppStore里看介紹和評分都還挺6的,然后打開APP 有獎競猜: 1)上面這個頁面里...
    超型的番茄閱讀 238評論 6 0