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

을 사용하는 방법이 있을까요 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);

Tatu의 대답은 직관적으로 수행하는 방법이지만 Internet Explorer에서 이벤트를 중첩 / 바인딩하는 방법으로 문제가 발생했지만 .on()메서드를 통해 수행됩니다 .

나는 이것이 어떤 문제의 jQuery를 정확하게 찾아 낼 수 없었습니다. 그러나 때때로 다음 버전에서 문제가 발생합니다.

• 2.0.2
• 1.10.1
• 1.6.4
• 모바일 1.3.0b1
• 모바일 1.4.2
• 모바일 1.2.0

내 해결 방법은 먼저 함수를 정의하는 것이 었습니다.

function myFunction() {
    ...
}

그런 다음 이벤트를 개별적으로 처리하십시오.

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

이것은 가장 예쁜 해결책은 아니지만 저에게 효과적 이며이 문제에 걸려 넘어 질 수있는 다른 사람들을 돕기 위해 거기에 배치 할 것이라고 생각했습니다.

$("element").on("event1 event2 event..n", function() {
   //execution
});

이 학습서 는 여러 이벤트 처리에 관한 것입니다.

을 사용하는 방법이 있을까요 keyup, keypress, blur, 및 change이벤트는 한 줄에 같은 함수를 호출?

그것은 사용 가능 .on(): 다음과 같은 구조를 받아들이는, .on( events [, selector ] [, data ], handler )이 방법으로 여러 이벤트를 전달할 수 있습니다. 귀하의 경우 다음과 같이 보일 것입니다 :

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

그리고 여기 실제 예가 있습니다 :

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">

jQuery와 같은 큰 라이브러리없이 내장 DOM 메소드로 이것을 구현하는 것은 간단합니다. 원한다면 이벤트 코드 배열을 반복하고 각각에 대한 리스너를 추가하면 약간의 코드가 더 필요합니다.

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});