1. 程式人生 > >js事件、Js中的for循環和事件的關系、this

js事件、Js中的for循環和事件的關系、this

on() 保存 div mouseover pan 代碼 發的 失去 內部

一、js事件

1、事件

  用戶在網頁中所觸發的行為

  鼠標滑動種類很多,鍵盤、表單特列;

  點擊:onclick

  鼠標進入:onmouseenter        鼠標離開:onmouseleave

  鼠標懸浮:onmouseover         鼠標移除:onmouseout

  鼠標按下:onmousedown        鼠標擡起:onmouseup

  鼠標移動:onmousemove

  表單聚焦:onfocus           表單失去焦點:onblur

  瀏覽器加載完成:onload

  js事件是一直存在的,可以綁定方法,也可以不綁定,如果沒有綁定,事件都會發生,只是這個事件什麽都沒有,可以給相應的元素綁定事件和方法

  div . onclick=fiunction(){ } 點擊div時就觸發了函數中的代碼塊

2、事件對象

  一個事件觸發獲得的所有信息都在事件對象中保存著

3、事件源  event . target

  鼠標點在誰的身上,誰就是事件源

4、事件的使用方法

  (1)、事件 將事件當做標簽屬性使用

     eg:<img src="img/01.jpg" alt=" " onclick=alert(456)>

  (2)、通過事件綁定 將事件當成一個元素的屬性

     eg:pic [0] . onclick=function() {

            alert(456)

             }

二、Js中的for循環和事件的關系

    事件的執行和for循環沒有關系,都是相互獨立的。

  1、解決事件中的i和for匹配

    方法一:給事件套一個自調用函數

        for (var i=0;i<arr.length;i++){

          (finction (i) {

              lis [ i ] .onlick=function ( ) {

                  tupian.src=arr [ i ]

                }

              })

            }

    方法二:人為定義屬性,將索引在屬性裏需要的時候,調用屬性(用this)

         for (var i=0;i<arr.length; i++){

            lis[ i ].index=i;

            lis [ i ].onclick=function () {

                tupian.src=arr [ this.index ]

                    }

                }

三、this

    This 是js的一個關鍵字,他是一個對象,一般用在函數裏用於指向函數內部的關系。

    Div.onclick=function(){this}

    如果函數在定義的時候前面有.,那麽this就指向點前面的對象。

    fn()

    如果函數定義時沒有. 那麽this就是window

js事件、Js中的for循環和事件的關系、this