[jquery] 동일한 함수를 트리거하는 jQuery 여러 이벤트

Program / 글쓴이

을 사용하는 방법이 있을까요 keyup, keypress, blur, 및 change이벤트는 한 줄에 같은 함수를 호출하거나 내가 별도로 어떻게해야합니까?

내가 가진 문제는 db 조회로 일부 데이터의 유효성을 검사해야하며 상자에 입력하거나 붙여 넣었는지 여부에 관계없이 유효성 검사를 놓치지 않도록하고 싶습니다.

답변

.on()함수를 여러 이벤트에 바인딩하는 데 사용할 수 있습니다 .

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

또는 함수를 매개 변수로 일반 이벤트 함수에 전달하십시오.

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

답변

jQuery 1.7부터이 .on()메소드는 이벤트 핸들러를 문서에 첨부하는 데 선호되는 메소드입니다. 이전 버전의 .bind()경우이 메소드는 이벤트 핸들러를 요소에 직접 첨부하는 데 사용됩니다.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

답변

jQuery가 한 번에 여러 이벤트를 수신 할 때 이벤트 유형을 얻는 방법을 찾고 있었고 Google이 나를 여기에 넣었습니다.

그래서 관심있는 사람들을 위해 event.type내 대답은 다음과 같습니다.

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

jQuery doc 에 대한 자세한 정보 .

답변

당신이 사용할 수있는 바인딩 방법을 몇 가지 이벤트 기능을 첨부 할 수 있습니다. 이 코드에서와 같이 이벤트 이름과 핸들러 함수를 전달하십시오.

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

또 다른 옵션은 jquery api의 체인 지원을 사용하는 것입니다.

답변

동일한 이벤트 핸들러를 여러 이벤트에 연결하면 종종 둘 이상의 이벤트가 동시에 발생하는 문제가 발생합니다 (예 : 편집 후 사용자가 탭을 누르기; 키 다운, 변경 및 흐림 효과가 모두 발생할 수 있음).

실제로 원하는 것은 다음과 같습니다.

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

답변

이것이 내가하는 방법입니다.

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});

답변

재사용하고자하는 기능을 아래와 같이 정의 할 수 있습니다.

var foo = function() {...}

그리고 나중에 객체에 원하는 많은 이벤트 리스너를 설정하여 on ( ‘event’)을 사용하여 해당 함수를 트리거하여 아래에 표시된 것처럼 공백을 남길 수 있습니다.

$('#selector').on('keyup keypress blur change paste cut', foo);