vue.jsclick 이벤트를 클릭하여 현재 요소 대상을 가져오는 작업
<body id="app">
<ul>
<li v-on:click="say('hello!', $event)"> </li>
<li>li2</li>
<li>li3</li>
</ul>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
say: function(msg, event) {
//
var el = event.currentTarget;
alert(" ："+el.innerHTML);
}
}
})
</script>
</body>묘사
bubbles
이벤트가 거품 이벤트 유형인지 여부를 표시하는 부울 값을 되돌려줍니다.
cancelable
이벤트를 취소할 수 있는 기본 동작을 포함할 수 있는지 여부를 표시하는 부울 값을 되돌려줍니다.
currentTarget
이벤트 감청기가 이 이벤트를 촉발하는 요소를 되돌려줍니다.
eventPhase
이벤트 전파의 현재 단계를 되돌려줍니다.
target
이 이벤트를 트리거하는 요소(이벤트의 대상 노드)를 되돌려줍니다.
timeStamp
이벤트가 생성된 날짜와 시간을 되돌려줍니다.
type
현재 Event 객체가 나타내는 이벤트의 이름을 반환합니다.
currentTarget:currentTarget 이벤트 속성은 모니터가 이벤트를 트리거하는 노드, 즉 현재 이 이벤트를 처리하는 요소, 문서 또는 창을 되돌려줍니다.
통속적으로 말하자면, 당신의 클릭 이벤트가 어느 요소에 연결되어 있는지,currentTarget이 얻은 것은 어느 요소인지입니다.
target: target 이벤트 속성은 이벤트를 생성하는 요소, 문서, 창 등 이벤트의 대상 노드 (이 이벤트를 트리거하는 노드) 를 되돌려줍니다.
통속적으로 말하자면, 당신이 현재 클릭하고 있는 요소가 어느 원소인지, target이 얻은 것이 바로 어떤 원소인지.
<li v-for="img in willLoadImg" @click="selectImg($event)">
<img class="loadimg" :src="img.url" :data-id="img.id" alt="">
</li>
methods: {
selectImg(event) {
console.log(event.currentTarget);
console.log(event.target);
}
}
data() {
return {
tabList: [
{ id: 0, title: " 1" },
{ id: 1, title: " 2" },
{ id: 2, title: " 3" }
],
current:0
};
},
methods: {
addClass: function(index,event) {
this.current = index;
//
var el = event.currentTarget;
console.log(" ："+el.innerHTML);
console.log(this.current)
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
