소환사쇽쇽
1k
2021-04-16 16:45:19 작성 2021-04-16 16:48:21 수정됨
4
142

jquery 클릭이벤트중 이해 안 가는 부분이 있어서 질문드립니다.(코드있어요)


퍼블리싱 받은 스크립트 파일을 열어보니  select 는 변환시켜서 사용하더라구요.

select는 숨기고, div, ul로 항목들을 만들고 text와 value는 select와 연동하게 되어 있습니다.

$('select').each(function() {
	var $this = $(this), numberOfOptions = $(this).children('option').length;
	var selectNm = $(this).attr('name');

	$this.addClass('select-hidden');
	$this.wrap('<div class="select"></div>');
	$this.after('</i><div class="select-styled"></div>');

	var $styledSelect = $this.siblings('div.select-styled');
	$styledSelect.text($this.children('option:selected').text());

	var $list = $('<ul />', {
		'class': 'select-options'
	}).insertAfter($styledSelect);

	for (var i = 0; i < numberOfOptions; i++) {
		$('<li />', {
			text: $this.children('option').eq(i).text(),
			rel: $this.children('option').eq(i).val()
		}).appendTo($list);
	}

	var $listItems = $list.children('li');
	$(document).click(function() {
		$styledSelect.removeClass('active');
		$list.hide();
	});
	$styledSelect.click(function(e) {
		e.stopPropagation();
		$('div.select-styled.active').not(this).each(function() {
			$(this).removeClass('active').next('ul.select-options').hide();
		});
		$(this).toggleClass('active').next('ul.select-options').toggle();

	});

	$listItems.click(function(e) {
		e.stopPropagation();
		$styledSelect.text($(this).text()).removeClass('active');
		$this.val($(this).attr('rel'));
		$list.hide();
		$("select[name=" + selectNm + "]").trigger('onchange');
	});
});

다른 부분은 이해가 되었는데, 세가지 클릭이벤트에서 의문이 생깁니다.

1. $(document).click(function() {

2. $styledSelect.click(function(e) {

e.stopPropagation();

3. $listItems.click(function(e) {

e.stopPropagation();

2번과 3번이 실행될 때 1번이 실행되지 않도록 하기 위해  e.stopPropagation();를 작성한 것까지는 이해했습니다. 그런데 제 '생각'에는 $styledSelect를 클릭해서 2번 이벤트가 실행될 상황이 발생했을 때 2번이 아니라 1번이 먼저 실행되고 2번이 실행되며 e.stopPropagation이 동작하여 이후 작성된 click 이벤트들이 무시되될 것 같아서요.

2. $styledSelect.click(function(e) {

e.stopPropagation();

3. $listItems.click(function(e) {

e.stopPropagation();

1. $(document).click(function() {

즉 '저는' 코드가 이렇게 작성되었을 때 정상동작 하리라 생각하는데 실제는 그렇지 않네요.

왜 그런지 꼭 좀 알고 싶습니다. 혹시 제 설명이 부족해서 알아듣기 힘드시면 그것도 말씀해주시면 감사하겠습니다.

0
  • 답변 4

  • 퀘이사123
    552
    2021-04-16 16:58:08

    코드가 위에서 아래로 실행되는건 맞는데,

    저런 이벤트들은 작성된 위치와 실행 순서는 상관없습니다.


    클릭이라는 이벤트가 발생할때 작동되는 코드이기때문에, 위치를 어떻게 섞든 동작하는 순서는 변화없습니다.

  • 소환사쇽쇽
    1k
    2021-04-16 17:03:55

    퀘이사123

    '위치를 어떻게 섞든 동작하는 순서'에 규칙이 있다는 것인가요?

  • yeori
    2k
    2021-04-16 17:09:18

    이벤트 리스너를 걸어주는 순서는

    DOM 계층에서 이벤트가 발생하는 순서와 아무 관련이 없구요

    이에 대한 내용은 event bubbling capturing 으로 구글링하면 많이 나옵니다

  • 소환사쇽쇽
    1k
    2021-04-16 17:12:20 작성 2021-04-16 17:13:17 수정됨

    yeori

    감사합니다! 이해되었어요.

  • 로그인을 하시면 답변을 등록할 수 있습니다.