মাউস-ওভার এবং মাউস-এন্টার ইভেন্ট এর মধ্যে পার্থক্য (Different Between Mouseover() And Mouseenter() event) : জে-কোয়েরী -(পর্ব-৩২)

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

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

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

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

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

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

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

mouseover()

  1. যখন mouse “outBox” এ প্রবেশ করবে, তখন “outBox” এর event active হবে।
  2. যখন mouse “innerBox” এ প্রবেশ করবে, তখন “innerBox” এবং “outBox” উভয়ের event active হবে।
  3. যখন mouse আবার “outBox” এ ফিরে আসবে, তখন আবার “outBox” এর event active হবে।

mouseenter()

  1. যখন mouse “outBox” এ প্রবেশ করবে, তখন “outBox” এর event active হবে।
  2. যখন mouse “innerBox” এ প্রবেশ করবে, তখন “innerBox” এর event active হবে।
  3. যখন mouse আবার “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">
#mouseover-outerBox1, #mouseenter-outerBox1,
#mouseover-outerBox2, #mouseenter-outerBox2{
margin:8px;
border:1px groove #999966;
background-color : #999966;
width:150px;
height:150px;
color:white;
}
#mouseover-innerBox2, #mouseenter-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 mouseover() vs mouseenter() example</h1>

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

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

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

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

<script type="text/javascript">

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

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

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

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

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

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

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

Try Demo

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

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

Leave a Comment