মাউস্-আউট এবং মাউস্-লিভ ইভেন্ট এর মধ্যে পার্থক্য (Different Between Mouseout() And Mouseleave () event) : জে-কোয়েরী -(পর্ব-৩৩)

1 Comment / জে-কোয়েরী (jQuery) / By

jQuery তে যখন কোন element এর মধ্যে থেকে mouse pointer চলে যায় ঠিক তখনই Mouseout() এবং Mouseleave() event দুটি সংগঠিত হয়। এদের মধ্যে শুধু পার্থক্য হল child element এর “Event Bubbling” এর ক্ষেত্রে। নিচের দৃশ্যপট দুটি লক্ষ্য করুন :

1) যখন কোন child element থাকবে না –
যদি কোন element এর কোন child element না থাকে, সে ক্ষেত্রে Mouseout() এবং Mouseleave() event দুটি ঠিক একই (exactly same) কাজ করবে।

২) যখন element এর মধ্যে child element থাকবে –
যদি কোন element এর child element থাকে, তবে “Event Bubbling” এর সময় Mouseout() এবং Mouseleave() event দুটি ভিন্ন ভিন্ন কাজ করবে।

    উদাহরণ স্বরুপ, “outBox”, “innerBox” নামে একটি child element ধারন করছে :-

[sourcecode language=”html”]
<div id="outerBox">OuterBox
<div id="innerBox">InnerBox
</div>
</div>
[/sourcecode]

বি: দ্র: এক্ষেত্রে খেয়াল রাখতে হবে যে, “outBox” এবং “innerBox” যেন নির্দিষ্ট কোন event এর সাথে attached থাকে।

mouseout()

  1. যখন mouse “outBox” এ প্রবেশ করবে, তখন “outBox” এর event active হবে না।
  2. যখন mouse “outBox” ত্যাগ করবে এবং “outBox” এর মধ্যের “innerBox” এ প্রবেশ করবে, তখন “outBox” এর event active হবে।
  3. যখন mouse “innerBox” ত্যাগ করবে এবং “outBox” এ প্রবেশ করবে, তখন “innerBox” এর event active হবে।
  4. যখন mouse “outBox” ত্যাগ করবে , তখন “outBox” এর event active হবে।

mouseleave()

  1. যখন mouse “outBox” এ প্রবেশ করবে, তখন “outBox” এর event active হবে না।
  2. যখন mouse “outBox” ত্যাগ করবে এবং “outBox” এর মধ্যের “innerBox” এ প্রবেশ করবে, তখন কোন event active হবে না।
  3. যখন mouse “innerBox” ত্যাগ করবে এবং “outBox” এ প্রবেশ করবে, তখন “innerBox” এর event active হবে।
  4. যখন mouse “outBox” ত্যাগ করবে , তখন “outBox” এর event active হবে।

Example :

[sourcecode language=”js”]
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
#mouseout-outerBox1, #mouseleave-outerBox1,
#mouseout-outerBox2, #mouseleave-outerBox2{
margin:8px;
border:1px groove #999966;
background-color : #999966;
width:150px;
height:150px;
color:white;
}
#mouseout-innerBox2, #mouseleave-innerBox2{
margin:8px 8px 8px 16px;
border:1px groove #0000FF;
background-color : #0000FF;
width:100px;
height:100px;
color:white;
}
span{
padding:8px;
}
.content{
width:500px;
height:250px;
}
.container1{
float:left;
padding-right:16px;
}
</style>

</head>
<body>
<h1>jQuery mouseout() vs mouseleave() example</h1>

<div class="content">
<div class="container1">
<span>mouseout() – no child element</span>
<div id="mouseout-outerBox1">OuterBox
</div>
<span id="mouseout-msg1">#mouseout is fired : 0</span>
</div>

<div class="container1">
<span>mouseleave() – no child element</span>
<div id="mouseleave-outerBox1">OuterBox
</div>
<span id="mouseleave-msg1">#mouseleave is fired : 0</span>
</div>
</div>

<div class="content">
<div class="container1">
<span>mouseout() – with child elements</span>
<div id="mouseout-outerBox2">OuterBox
<div id="mouseout-innerBox2">InnerBox
</div>
</div>
<span id="mouseout-outer-msg2">#mouseout outer is fired : 0</span>
<br/>
<span id="mouseout-inner-msg2">#mouseout inner is fired : 0</span>
</div>

<div class="container1">
<span>mouseleave() – with child elements</span>
<div id="mouseleave-outerBox2">OuterBox
<div id="mouseleave-innerBox2">InnerBox
</div>
</div>
<span id="mouseleave-outer-msg2">#mouseleave outer is fired : 0</span>
<br/>
<span id="mouseleave-inner-msg2">#mouseleave inner is fired : 0</span>
</div>
</div>

<script type="text/javascript">

//example 1
var mouseout1=1;
$(‘#mouseout-outerBox1’).mouseout(function(event) {
$(‘#mouseout-msg1’).text(‘#mouseout is fired : ‘ + mouseout1++)
});

var mouseleave1=1;
$(‘#mouseleave-outerBox1’).mouseleave(function(event) {
$(‘#mouseleave-msg1’).text(‘#mouseleave is fired : ‘ + mouseleave1++)
});

//example 2
var mouseoutouter2=1;
$(‘#mouseout-outerBox2’).mouseout(function(event) {
$(‘#mouseout-outer-msg2’).text(‘#mouseout outer is fired : ‘ + mouseoutouter2++)
});

var mouseoutinner2=1;
$(‘#mouseout-innerBox2’).mouseout(function(event) {
$(‘#mouseout-inner-msg2’).text(‘#mouseout inner is fired : ‘ + mouseoutinner2++)
});

var mouseleaveouter2=1;
$(‘#mouseleave-outerBox2’).mouseleave(function(event) {
$(‘#mouseleave-outer-msg2’)
.text(‘#mouseleave outer is fired : ‘ + mouseleaveouter2++)
});

var mouseleaveinner2=1;
$(‘#mouseleave-innerBox2’).mouseleave(function(event) {
$(‘#mouseleave-inner-msg2’)
.text(‘#mouseleave inner is fired : ‘ + mouseleaveinner2++)
});

</script>
</body>
</html>
[/sourcecode]

Try Demo

………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”

জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ

1 thought on “মাউস্-আউট এবং মাউস্-লিভ ইভেন্ট এর মধ্যে পার্থক্য (Different Between Mouseout() And Mouseleave () event) : জে-কোয়েরী -(পর্ব-৩৩)”

Leave a Comment