mouseenter olayı

Seçilen elemanlara mouse işaretçisi girdiğinde çalışacak olay işleyiciyi bağla ya da bir elemanda bu olayı tetikle.

İçindekiler :

.on( "mouseenter" [, eventData ], handler ) Dönen Değer : jQuery Nesnesi
Açıklama : Seçilen elemanlara mouse işaretçisi girdiğinde çalışacak bir olay işleyici bağlar.

.on( "mouseenter" [, eventData ], handler ) Eklendiği Versiyon 1.7
"mouseenter"
Tip : String
"mouseenter" sabit string değeri
eventData
Tip : Herhangi birşey
Olay işleyiciye iletilecek veriyi içeren bir nesne.
handler
Tip : Fonksiyon( Olay eventObject )
Mouse işaretçisi elemana girdiğinde çalıştırılacak olan fonksiyon.

Bu sayfa mouseenter olayını anlatıyor. Kaldırılmış olan .mouseenter() metodu için linkteki sayfaya bakınız.

mouseenter JAvaScript olayı aslında Internet Explorer'a tescilli. Olayın genel faydası yüzünden jQuery olayı simüle ederek tarayıcıdan bağımsız çalışmasını sağlar. Bu olay mouse işaretçisi eleman üzerine geldiğinde o elemana gönderilir. Herhangi bir HTML eleman bu olaya bağlanabilir.

Örnek olarak şu HTML:

   <style>
      div.bordered {
         margin: 10px;
         border: 1px solid;
         padding: 10px;
      }
   </style>
   <div id="outer" class="bordered">
      Outer
      <div id="inner" class="bordered">
         Inner
      </div>
   </div>
   <div id="other" class="bordered">
      Trigger the handler
   </div>
   <div id="log"></div>
Outer
Inner
Trigger the handler

Olay işleyici elemanların herhangi birine verilebilir.

$( "#outer" ).on( "mouseenter", function() {
   $( "#log" ).append( "<div>`mouseenter` handler çağrıldı.</div>" );
} );
Outer
Inner
Trigger the handler

Şimdi mouse şaretçisi dıştaki <div> sınırlarından içeri girdiğinde <div id="log"> elemanına mesaj eklenir. Ayrıca olayı diğer bir elemana tıklayınca tetikleyebilirsiniz.

$( "#other" ).on( "click", function() {
  $( "#outer" ).trigger( "mouseenter" );
} );
Outer
Inner
Trigger the handler

Bu kod çalıştırıldıktan sonra Trigger bölgesine tıklanınca da mesaj satırı eklenecektir.

mouseenter olayı mouseover'dan olayı yukarı yayması (bubling) bekımından farklıdır. Bu örnekte eğer mouseover kullanılmış olsa, içteki bölgeye girilince de olay tetiklenir. Bu genelde istenmeyen davranışlara sebep olur. Diğer yandan mouseenter sadece bağlandığı elemana mouse girdiği anda oluşur, iç elemanlardan birine girince tetiklenmez. Bu yüzden örnekteki dıştaki elemana mouse girince olay tetiklenir ama içteki elemana girdiğinde bir şey olmaz.



Örnekler:

Olaylardan mouseover içteki elemana da mouse girse tetiklenirken, mouseenter ise sadece bağlandığı elemana mouse işaretçisi girince tetiklenir.

<style>  
   div.out {
      width: 40%; height: 120px;
      margin: 0 15px;
      background-color: #d6edfc;
      float: left;
   }
   div.in {
      width: 60%; height: 60%;
      background-color: #fc0;
      margin: 10px auto;
   }
   p {
      line-height: 1em;
      margin: 0; padding: 0;
   }
</style>
<div class="out overout">
   <p>move your mouse</p>
   <div class="in overout"><p>move your mouse</p><p>0</p></div>
   <p>0</p>
</div>
 
<div class="out enterleave">
   <p>move your mouse</p>
   <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
   <p>0</p>
</div>
<script>
   var i = 0;
   $( "div.overout" )
      .on( "mouseover", function() {
         $( "p", this ).first().text( "mouse over" );
         $( "p", this ).last().text( ++i );
      } )
      .on( "mouseout", function() {
         $( "p", this ).first().text( "mouse out" );
      } );
   
   var n = 0;
   $( "div.enterleave" )
      .on( "mouseenter", function() {
         $( "p", this ).first().text( "mouse enter" );
         $( "p", this ).last().text( ++n );
      } )
      .on( "mouseleave", function() {
         $( "p", this ).first().text( "mouse leave" );
      } );
</script>

move your mouse

move your mouse

0

0

move your mouse

move your mouse

0

0

.trigger( "mouseenter" ) Dönen Değer : jQuery Nesnesi
Açıklama : Seçilen elemanlarda "mouseenter" olayını tetikler.

.trigger( "mouseenter" ) Eklendiği Versiyon 1.0
"mouseenter"
Tip : String
"mouseenter" sabit string değeri

.on( "mouseenter", ... ). açıklamasına bakınız.

.

.