jquery 이벤트 변경() 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

jquery 이벤트 변경() 사용에 대한 자세한 설명

黄舟

풀어 주다： 2018-05-15 10:12:38

원래의

9869명이 탐색했습니다.

이 글은 주로 jquery의 변화() 사용법을 소개합니다. 변화의 기능, 정의, 구체적인 사용법을 예제와 함께 분석합니다. 이 글은 매우 실용적입니다. 예제를 사용하여 jquery를 변경합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

change() 요소의 값이 변경되면 변경 이벤트가 발생합니다. 이 이벤트는 텍스트 필드, 텍스트 영역 및 선택 요소에만 적용됩니다.

선택 요소와 함께 사용하는 경우 옵션 선택 시 변경 이벤트가 발생합니다. 텍스트 필드 또는 텍스트 영역과 함께 사용하는 경우 요소가 포커스를 잃을 때 이 이벤트가 발생합니다.

1. 변경 사용법
1. 트리거 변경 이벤트: 선택한 요소의 변경 이벤트 발생

구문: $(selector).change()

2. 이벤트 변경에 대한 바인딩: 규정 실행되는 함수 선택한 요소의 변경 이벤트가 발생할 때.

구문: $(selector).change(function)

2. jquery의change() 인스턴스

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
 $("button").click(function(){
  $("input").change();
 });
});
</script>
</head>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
</html>

로그인 후 복사

<html>
<head>
<script type="text/javascript" src="jquery文件"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
 });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>

로그인 후 복사

oninput, onpropertychange,onchange Usage

l onchange 트리거 이벤트는 두 가지 조건을 충족해야 합니다. a) 현재 개체의 속성이 변경되고 키보드 또는 마우스 이벤트에 의해 트리거됩니다(스크립트 트리거가 유효하지 않음).

b) 현재 개체가 초점을 잃습니다(흐림). 그러나 IE에만 해당됩니다. 입력은 다음과 같습니다. onpropertychange의 비

IE 브라우저

버전입니다. Firefox 및 Opera와 같은 브라우저를 지원하지만 한 가지 차이점이 있습니다. 개체에 바인딩되면 개체의 모든 속성이 변경될 수 있으며 이벤트만 실행할 수 있습니다. 객체 값이 변경될 때.

텍스트 영역에서 사용자의 키보드 입력을 캡처하려면 onkeyup을 사용하여 이벤트를 확인할 수 있습니다. 하지만 onkeyup은 복사 및 붙여넣기를 지원하지 않으므로 텍스트 영역의 값 변화를 동적으로 모니터링해야 합니다. onpropertychange(IE 브라우징에 사용됨) 브라우저가 필요함) 및 oninput(IE가 아닌 브라우저)이 함께 사용됩니다.

onpropertychange 버그

코드 구현 중에 사용자가 텍스트 영역을 클릭하면 응답할 때 obj.className="XX"를 사용하여 텍스트 영역 입력 상자의 글꼴 스타일을 변경하면 입력이 발생하는 것으로 나타났습니다. IE에서는 onpropertychange가 첫 번째 문자에 대해 실행되지 않는 버그가 있으므로 다음과 같이 설정해야 합니다. obj.style.color="#000";

jQuery 라이브러리를 사용하는 경우 먼저 이야기해 보겠습니다. , oninput과 onpropertychange만 동시에 바인딩하면 됩니다. 이벤트는 괜찮습니다. 샘플 코드:

$(&#39;#username&#39;).bind(&#39;input propertychange&#39;, function() {    
$(&#39;#content&#39;).html($(this).val().length + &#39; characters&#39;);});

로그인 후 복사

위 내용은 jquery 이벤트 변경() 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!