본문 바로가기

[ programing ]/JavaScript + JQuery

jQuery trigger() 메서드 사용


  • trigger()

마우스를 엘리먼트에 마우스오버하지 않고 

어떤 버튼을 클릭했을때 마우스오버 이벤트를 발생하고 싶을 때!


<script>

$(document).ready(function(){

var box = $('#box');

box.bind({

mouseover:function(){

var tg = $(this);

tg.removeClass().addClass('over');

tg.find('> p').text('mouseover');

},

mouseout:function(){

var tg = $(this);

tg.removeClass().addClass('out');

tg.find('> p').text('mouseout');

},

click:function(){

var tg = $(this);

tg.removeClass().addClass('click');

tg.find('> p').text('click');

}

});

var nav = $('#nav');

nav.find('> .mouseover').bind('click', function(){

box.trigger('mouseover', $(this));

});

nav.find('> .mouseout').bind('click', function(){ 

box.trigger('mouseout', $(this));

});

nav.find('> .click').bind('click', function(){

box.click();

});

});

</script>

</head>

<body>

<div id="nav">

<input class="mouseover" type="button" value="mouseover" />

<input class="mouseout" type="button" value="mouseout" />

<input class="click" type="button" value="click" />


</div>

<div id="box" class="out">

<p>안녕!</p>

</div>

</body>