Developer/Jquery
[jQury] 2. 이벤트 - (예제16장) .on mouseenter/mouseleave(.hover) .click .off canvas .trigger (.click()) .stopPropagation() .mouseover() . mouseenter()
Jeremy.Park
2014. 6. 24. 09:58
// this.innerHTML += '+';
// addEventListener('click',function(){}; -> ie 8 이하에서는 동작 안함
$(document).ready( function () {
// 이벤트를 연결합니다. (.on)
$( 'h1').on( 'click', function () {
$( this).html(function (index, html) {
return html + '+' ;
});
});
});
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
<h1 >Header-2 </h1 >
$(document).ready( function () {
// 이벤트를 연결합니다. 1 bad
$( 'h1').on( 'click', function () {
$( this).html(function (index, html) {
return html + '+' ;
});
});
// 이벤트를 연결합니다. 2 good
$( 'h1').on({
mouseenter: function () { $(this ).addClass('reverse'); },
mouseleave: function () { $(this).removeClass('reverse' ); }
});
});
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
<h1 >Header-2 </h1 >
.reverse { background: black; color: white; }
// 이벤트를 연결합니다.
$( 'h1').on( 'click', function () {
$( this).html(function (index, html) {
return html + '+' ;
});
});
// 마우스 이벤트를 연결합니다.
$( 'h1').on({
mouseenter: function () { $(this ).addClass('reverse'); },
mouseleave: function () { $(this).removeClass('reverse' ); }
});
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
<h1 >Header-2 </h1 >
.reverse { background: black; color: white; }
$(document).ready( function () {
// 이벤트를 연결합니다.
$( 'h1').hover( function () {
$( this).addClass('reverse' );
}, function () {
$( this).removeClass('reverse' );
});
});
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
<h1 >Header-2 </h1 >
$(document).ready( function () {
// 이벤트를 연결합니다.
$( 'h1').click( function () {
// 출력합니다.
$( this).html('CLICK' );
alert( '이벤트가 발생했습니다.' );
// 이벤트를 제거합니다.
$( this).off();
});
});
<h1 >Header-0 </h1 >
<h1 >Header-1 </h1 >
<h1 >Header-2 </h1 >
* { margin: 0px; padding: 0px }
div {
margin: 5px; padding: 3px;
border: 3px solid black;
border-radius: 10px ; }
$(document).ready( function () {
// 이벤트를 연결합니다.
$( 'div').click( function () {
// 변수를 선언합니다.
// $( 'h1', this ).text(); 두번째 자리 this는 클릭한 ('div')를 지정해주는 것이다 h1의 부모
var header = $( 'h1', this).text();
var paragraph = $( 'p', this).text();
// var header = $( this).find('h1' ).text();
// var paragraph = $( this).find('p' ).text();
// 출력합니다.
alert(header + '\n' + paragraph);
});
});
<div >
<h1 >Header 1 </h1 >
<p >Paragraph </p >
</div >
<div >
<h1 >Header 2 </h1 >
<p >Paragraph </p >
</div >
<div >
<h1 >Header 3 </h1 >
<p >Paragraph </p >
</div >
// 변수를 선언합니다.
var canvas = document.getElementById( 'canvas');
var context = canvas.getContext( '2d');
// 이벤트를 연결합니다.
$(canvas).on({
mousedown: function (event) {
// 위치를 얻어냅니다.
var position = $( this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
// 선을 그립니다.
context.beginPath();
context.moveTo(x, y);
},
mouseup: function (event) {
// 위치를 얻어냅니다.
var position = $( this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
// 선을 그립니다.
context.lineTo(x, y);
context.stroke();
}
});
});
<canvas id ="canvas" width ="700" height ="400" style ="border : 3px solid black">
</canvas >
$(document).ready( function () {
// 이벤트를 연결합니다.
$( 'h1').click( function () {
$( this).html(function (index, html) {
return html + '★' ;
});
});
// 1초마다 함수를 실행합니다. dispatchEvent와 동일
setInterval( function () {
$( 'h1').last().trigger( 'click');
// $('h1').last().click();
}, 1000);
});
<h1 >Start: </h1 >
<h1 >Start: </h1 >
$(document).ready( function () {
// 이벤트를 연결합니다.
$( 'h1').click( function (event, data1, data2) { //배열 갯수 만큼 파라미터로 넘어온다
alert(data1 + ' : ' + data2);
});
// 이벤트를 강제로 발생시킵니다. 반듯이 배열에 담아서 전달해야한다.
$('h1').eq(1).trigger( 'click', [273, 52]);
});
<h1 >Start: </h1 >
<h1 >Start: </h1 >
$(document).ready( function () {
$( 'a').click( function (event) {
$( this).css('background-color' , 'blue' );
event.stopPropagation();
event.preventDefault();
});
$( 'h1').click( function () {
$( this).css('background-color' , 'red' );
});
});
<h1 >
<a href ="http://hanb.co.kr" >Hanb Media </a >
</h1 >
$(document).ready( function () {
$( 'h1').on( 'click', function () {
var length = $( 'h1').length;
var targetHTML = $( this).html();
$( '#wrap').append( '<h1>' + length + ' - ' + targetHTML + '</h1>');
});
});
<div id ="wrap" >
<h1 >Header </h1 >
</div >
예제 16-31 공부하기
.mouseover()
.mouseenter()
$(document).ready( function (event) {
$( 'textarea').keyup( function () {
// 남은 글자 수를 구합니다.
var inputLength = $( this).val().length;
var remain = 150 - inputLength;
// 문서 객체에 입력합니다.
$( 'h1').html(remain);
});
});
<div >
<p >지금 내 생각을 </p >
<h1 >150 </h1 >
<textarea cols ="70" rows= "5"></textarea >
</div >
$(document).ready( function (event) {
$( 'textarea').keyup( function () {
// 남은 글자 수를 구합니다.
var inputLength = $( this).val().length;
var remain = 150 - inputLength;
// 문서 객체에 입력합니다.
$( 'h1').html(remain);
// 문서 객체의 색상을 변경합니다.
if (remain >= 0) {
$( 'h1').css( 'color', 'black');
} else {
$( 'h1').css( 'color', 'red');
}
});
});
<div >
<p >지금 내 생각을 </p >
<h1 >150 </h1 >
<textarea cols ="70" rows= "5"></textarea >
</div >
******** 21장