원생 JS 실시 간 감청 input 상자 입력 값 이용
2672 단어 JavaScript
원생 JS 에 서 는 oninput, onproperty change, onchange 를 사용 할 수 있 습 니 다.
oninput, onproperty change, onchange 의 용법
1) onchange 트리거 이 벤트 는 두 가지 조건 을 만족 시 켜 야 합 니 다.
a) 현재 대상 속성 이 바 뀌 었 고 키보드 나 마우스 이벤트 에 의 해 자극 되 었 습 니 다 (스 크 립 트 트리거 가 잘못 되 었 습 니 다)
b) 현재 대상 이 초점 을 잃 었 습 니 다 (onblur).
2) onproperty change, 현재 대상 속성 이 바 뀌 면 이벤트 가 발생 하지만 IE 전속 입 니 다.
3） oninput onproperty change 의 비 IE 브 라 우 저 버 전 입 니 다. fireforx 와 opera 등 브 라 우 저 를 지원 하지만 한 가지 차이 가 있 습 니 다. 대상 에 연결 되 어 있 을 때 이 대상 의 모든 속성 변화 가 이 벤트 를 촉발 할 수 있 는 것 은 아 닙 니 다. 대상 value 값 이 바 뀌 었 을 때 만 효과 가 있 습 니 다.
：<input type="text" id="d0"/>
<hr/>
: <div id="d1"/>
<script>
var input = document.getElementById('d0')
var div = document.getElementById('d1');
input.oninput = function(){
div.innerHTML = input.value;
}
</script>
</code></pre>
<p>4）Object.defineProperty（） Vue MVVM </p>
<p> Object.defineProperty(obj, prop, descriptor) ， obj ，prop ，descriptor 。 get set 。get getter ， ；set setter ， ， ，get set undefined。</p>
<pre><code>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document
function defineProperty(obj, attr){
var val;
Object.defineProperty(obj, attr, {
get: function () {
return val;
},
set: function (newValue) {
if (newValue === val){
return;
}
val = newValue;
document.getElementById("input").value = newValue;
document.getElementById("show").innerHTML = newValue;
}
});
}
var obj = {};
defineProperty(obj, "txt");
document.getElementById("input").addEventListener("keyup", function(e){
obj.txt = e.target.value;
})
오류 가 누락 되면 메 시 지 를 계속 업데이트 합 니 다.
참고 문헌:
Object.defineProperty()
[JavaScript 학습 노트] 양 방향 바 인 딩 을 스스로 실현 합 니 다.
Vue 원리 분석 & 양 방향 연결 MVVM 실현
Vue. js 양 방향 연결 의 실현 원리
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
