• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Event] JQ - event.namespace 속성 ★★ - 이벤트 네임스페이스 반환.

목차
  1. event.namespace 예제 - 사용자 지정 namespace 확인.
  2. event.namespace 정의
  3. event.namespace 구문
  4. event.namespace 예제 - 사용자 지정 namespace 제거.

 

event.namespace 예제 - 사용자 지정 namespace 확인.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").on("custom.hz",function(event){

    alert(event.namespace);

  });

  $("p").click(function(event){

    $(this).trigger("custom.hz");

  });  

  $("button").click(function(){

    $("p").off("custom.hz");

  });

});  

</script>


<p>홈짱닷컴 Homzzang.com (클릭).</p>

<button>namespace 제거</button>

 

결과보기

PS. 위 예제 경우, custom 자리에 click 입력 시, undefined 뜬 후 hz 뜸. 결과보기

 

event.namespace 정의

 

이벤트 촉발될 때, 사용자 지정 네임스페이스 (namespace : 이벤트 구분 범위)값을 반환.

 


 

1.

동일 이벤트에 대해, namespace에 따라 다르게 처리 가능.

 

2.

밑줄(_)로 시작하는 namespace는 jQuery 예약어라 사용 불가.

 

3.

namespace명은 event.namespace 형식으로 보통 지음.

(예) click.hz

click.hz 중, hz 부분만 반환하는 코드가 event.namespace 속성임. 

 

 

event.namespace 구문

 

event.namespace

 


[매개변수]

 

event

필수. 이벤트에 바인딩 된 함수에서 가져옴.

 

 

event.namespace 예제 - 사용자 지정 namespace 제거.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").on("click.hz", function(){

    $(this).slideToggle();

  });

  $("button").click(function(){

    $("p").off("click.hz");

  });

});

</script>


<p>홈짱닷컴 Homzzang.com</p>

<p>홈페이지 제작관리 강의</p>

<p>코딩언어 그누보드 과외</p>

 

<button>namespace 제거</button>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Selector JQ - [attribute != value] 속성선택자 - 지정 속성값 아닌 요소 선택.
Selector JQ - [attribute$=value] 속성선택자 - 지정 문자열로 끝나는 속성값 갖는 요소 선택.
Selector JQ - [attribute|=value] 속성선택자 - 지정 문자열 또는 뒤에 하이픈 연결된 속성값 갖는 …
Selector JQ - [attribute^=value] 속성선택자 - 지정 문자열로 시작하는 모든 요소 선택. (= 시작…
Selector JQ - [attribute~=value] 속성선택자 - 특정 속성값 또는 그 앞뒤 공백인 요소 선택.
Selector JQ - [attribute*=value] 속성선택자 - 지정 문자열 포함 속성값 갖는 요소 선택.
Selector JQ - :input 선택자 - input, button 요소 선택. (= 인풋 선택자)
Selector JQ - :text 선택자 - type="text"인 input 요소 선택. (= 텍스트선택자/타입선택자)
Selector JQ - :password 선택자 - type="password"인 input 요소 선택. (= 패스워드 선…
Selector JQ - :radio 선택자 - type="radio"인 input 요소 선택. (= 라디오 선택자)
Selector JQ - :checkbox 선택자 - type="checkbox"인 input 요소 선택 (= 체크박스선택자…
Selector JQ - :submit 선택자 - type="submit"인 input, button 요소 선택. (= 서브…
Selector JQ - :reset 선택자 - type="reset"인 input, button 요소 선택. (= 리셋 선…
Selector JQ - :button 선택자 - type="button"인 input, button 요소 선택. (= 버튼…
Selector JQ - :image 선택자 - type="image"인 input 요소 선택. (= 이미지 선택자)
Selector JQ - :file 선택자 - type="file"인 input 요소 선택. (= 파일 선택자)
Selector JQ - :enabled 선택자 - 활성화 된 요소 선택. (= 인에이블드 선택자)
Selector JQ - :disabled 선택자 - 비활성화 된 요소 선택. (= 디서에이블드 선택자)
Selector JQ - :selected 선택자 - selected="selected"인 요소 선택. (= 실렉티드 선택자…
Selector JQ - :checked 선택자 - $(":checked") - checked="checked"인 모든 체크…
5/15
목록
찾아주셔서 감사합니다. Since 2012