자바스크립트의 DOM 이벤트 분석(코드 포함)
- 不言원래의
- 2018-09-04 10:20:031188검색
어떤 이벤트인가요? 이벤트가 무슨 소용이 있나요? 이 기사에서는 JavaScript에서 DOM의 이벤트 분석을 공유하고 이벤트의 개념과 이벤트 사용법을 소개합니다.
이벤트1. 이벤트란 무엇인가요
#🎜🎜 # 사용자가 HTML 페이지에서 버튼을 클릭하고 사용자 이름과 비밀번호를 입력하는 등의 프로그램 사용자 동작을 JS에 알립니다. <script>
var button = document.getElementById('btn');
// 获取按钮元素
button.onclick = function () {
// 事件绑定
console.log('你已点了我');
}
</script>
2. ##🎜🎜 #JS 함수는 지정된 이벤트와 연결되며 바인딩된 함수는 이벤트의 핸들이 됩니다. 이벤트가 시작되면 바인딩된 함수가 호출됩니다.
#🎜 🎜#
HTML 요소의 이벤트 속성
은 실제 등록 이벤트 함수를 나타냅니다이 방법은 HTML 구조와 효과적으로 분리되지 않으며 동작
<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
function mylove() {
console.log('你已点了我');
}
</script>
</body>
DOM 객체의 이벤트 속성
THML 페이지 요소에서 문서 객체 찾기 # 🎜🎜# 이를 통해 DOM 객체 본문 속성을 반환합니다. 다양한 등록 이벤트 기능 구현<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = mylove;
function mylove() {
console.log('你已点了我');
}
</script>
</body>
이벤트 리스너
#🎜 🎜#addEventLisener() 메소드를 사용하여 이를 호출합니다. 이 메소드는 해당 요소가 페이지에 대한 이벤트를 등록할 때 등록된 이벤트 요소를 참조합니다. attachmentEent() 메소드를 사용할 때. 페이지에 대한 이벤트를 등록하려면 등록된 이벤트가 아닌 Window 개체를 참조합니다. body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick',function () {
console.log('XXX');
})
function bind(element,eventName, functionName) {
if (element.addEventListener) {
element.addEventListener()
}
}
</script>
</body>#🎜🎜 #3. 등록된 이벤트 제거
removeEventListener () 메소드에서 이 메소드를 호출하여 요소 제거 이벤트 리스너
<script>
var qyc =document.getElementById('qyc');
/*qyc.addEventListener('click',function () {
console.log(this);//this指当前绑定事件的元素
});*/
/*qyc.attachEvent('onclick',function () {
console.log(this);//this指当前环境的全局对象（Window对象）
});*/
bind(qyc,'click',function () {
console.log(this);//在不同的浏览器中，this会有不同的表示
});
function bind(element, eventName, functionName) {
if (element.addEventListener) {
} else {
element.attachEvent('on' + eventName, function () {
functionName.call(element)
});
}
}//此为IE8之前的版本兼容的解决方案
</script>
</body>
4를 나타냅니다. 이벤트 이벤트 객체 은 등록된 요소 제거를 나타냅니다. IE8 이전 버전의
브라우저는 RemoveEventListener() 메서드<body>
<button id="qyc">按钮</button>
<script>
var qyc = document.getElementById('qyc');
function mylove() {
console.log('XXX');
}
qyc.addEventListener('click',mylove);
qyc.addEventListener('click',function () {
console.log('YYY');
});
qyc.removeEventListener('click',mylove);
function unbind(element,eventName,functionName) {
if (element.removeEventListener) {
element.removeEventListener(eventName, functionName);
}else {
element.detachEvent('on' + eventName, functionName);
}
}
</script>
</body>
5 , 대상 가져오기
#🎜🎜를 지원하지 않습니다. #The Event 객체는 현재 이벤트를 트리거한 HTML 요소를 가져오기 위한 target 속성을 제공합니다The Event 객체는 현재 이벤트를 등록한 HTML 요소를 가져오기 위한 currentTarget 속성을 제공합니다#🎜🎜 #
<body>
<button id="qyc" onclick="mylove(event)">按钮</button>
<script>
var qyc = document.getElementById('qyc');
qyc.addEventListener('click',function (event) {
console.log(event);
});
qyc.attachEvent('onclick',function () {
console.log(window.event);
});
function bind(element,eventName, functipnName) {
if (element.addEventListener){
element.addEventListener(eventName,functipnName)
} else {
element.attachEvent('on' + eventName, function(){
functipnName.call(element);
});
}
}
</script>#🎜 🎜#6. 기본 동작 차단 기본값을 사용하는 대신
<style>
ul {
background-color: red;
}
#wl {
background-color: blue;
}
a {
background-color: yellow;
}
</style>
</head>
<body>
<ul id="yx">
<li>单机游戏</li>
<li id="wl"><a href="#">网络游戏</a></li>
<li>手机游戏</li>
</ul>
<script>
var yx = document.getElementById('yx');
yx.addEventListener('click',function (event) {
console.log(event.target);
// target属性-获取绑定当前事件目标元素
console.log(event.currentTarget);
// currentTarget属性-获取绑定当前事件目标元素
console.log(this);
});
yx.attachEvent('onclick',function (event) {
// IE8以下浏览器提供srcElement属性为target目标元素
var e = event || window.event;
console.log(e.srcElement);
});
</script>
</body>
7 마우스를 가져옵니다. #pageX 및 pageY는 페이지를 기준으로 합니다. clientX 및 clientY는 가시 영역을 나타냅니다.
screenX 및 screenY는 현재 화면을 나타냅니다.
<body>
<a href="#">链接</a>
<script>
var aElement = document.getElementsByName('a');
/*aElement.addEventListener('click',function(event){
event.preventDefault();// 阻止默认行为
});*/
aElement.onclick = function (event) {
event.preventDefault();
return false;
}
aElement.attachEvent('onclick',function (event) {
var e = event || window.event;
e.returnValue = false;
})
</script>
</body>#🎜 🎜#8. 이벤트 흐름
<body>
<script>
var html = document.documentElement;
html.addEventListener('click',function(event){
console.log(event.pageX, event.pageY);
// 鼠标坐标值相对于当前HTML页面
console.log(event.clientX, event.clientY);
// 鼠标坐标值相对于当前可视区域
console.log(event.screenX, event.screenY);
// 鼠标坐标值相对于当前屏幕的
// 鼠标坐标值只能获取，不能设置
});
</script>
</body>
9. 이벤트 위임
많은 수의 HTML 요소가 동일한 이벤트를 등록하고 이벤트 핸들 논리 보안은 동일하므로 페이지 속도가 감소하지만 이벤트 흐름에서는 이러한 HTML 요소가 상위 요소에 이벤트를 등록하는 것을 허용하지 않습니다. 🎜#JS DOM 이벤트 모델 분석#🎜🎜 #
javascript_javascript 기술의 DOM 이벤트 이해#🎜 🎜#
위 내용은 자바스크립트의 DOM 이벤트 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!