Heim > Artikel > Web-Frontend > Ereignisanalyse von DOM in Javascript (mit Code)
Ereignisanalyse von DOM in Javascript (mit Code)
- 不言Original
- 2018-09-04 10:20:031164Durchsuche
Was ist die Veranstaltung? Was nützen Events? In diesem Artikel erfahren Sie mehr über die Ereignisanalyse von DOM in JavaScript und stellen das Konzept von Ereignissen und die Verwendung von Ereignissen vor.
Ereignis1. Was ist ein Ereignis?
Teilen Sie JS das Benutzerverhalten des Programms mit, z wenn der Benutzer auf die HTML-A-Schaltfläche auf der Seite klickt und der Benutzer den Benutzernamen und das Passwort eingibt und andere Vorgänge ausführt
<script>
var button = document.getElementById('btn');
// 获取按钮元素
button.onclick = function () {
// 事件绑定
console.log('你已点了我');
}
</script>
2. Die JS-Funktion wird mit dem angegebenen Ereignis verknüpft , und die gebundene Funktion wird zum Ereignis. Wenn das Handle -Ereignis ausgelöst wird, wird die gebundene Funktion aufgerufen
Das Ereignisattribut des HTML-Elements stellt die eigentliche Registrierungsereignisfunktion dar
Diese Methode trennt sich nicht effektiv von der HTML-Struktur und dem HTML-Verhalten<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
function mylove() {
console.log('你已点了我');
}
</script>
</body>
Das Ereignisattribut des DOM-ObjektsSuchen Sie das Document-Objekt im THML-Seitenelement
und geben Sie das DOM-Objektkörperattribut zurück, über das verschiedene Registrierungsereignisfunktionen implementiert werden<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = mylove;
function mylove() {
console.log('你已点了我');
}
</script>
</body>
Ereignis-Listener Rufen Sie zur Methode addEventLisener() diese Methode auf, um anzugeben, dass das Element einen Ereignis-Listener hinzufügt
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>
This im Event-Listener verwendet die Methode addEventListener(). Beim Registrieren eines Ereignisses für eine Seite bezieht sich dies auf das registrierte Ereigniselement
Wenn die Methode attachmentEent() zum Registrieren eines Ereignisses für die Seite verwendet wird, bezieht sich dies zum Window-Objekt, nicht zum registrierten Ereignis<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>
3. Entfernen Sie die Methode Register event
removeEventListener(), rufen Sie diese Methode auf, um den Ereignis-Listener zum Entfernen von Elementen
anzugeben<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>
4. Ereignisobjekt Browser, die das Entfernen registrierter Ereignisse vor IE8 anzeigen, unterstützen die Methode „removeEventListener()“ nicht
<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>
5. Holen Sie sich das Ziel
Das Ereignisereignisobjekt stellt das Zielattribut bereit und ruft das HTML-Element ab, das das aktuelle Ereignis ausgelöst hat.
Das Ereignisereignisobjekt stellt das Attribut currentTarget bereit und ruft das registrierte HTML-Element ab das aktuelle Ereignis<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>
6. Verhindern Sie das Standardverhalten
Nein. Verwenden Sie die Standardeinstellung, aber
<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>
Holen Sie sich die MauspageX und pageY repräsentieren den sichtbaren Bereich
screenX relativ zur Seite und screenY repräsentieren<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>
auf dem aktuellen Bildschirm 8. Ereignisfluss
<style>
#q1 {
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
}
#q2 {
width: 100px;
height: 100px;
background-color: yellow;
padding: 50px;
}
#q3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">
<div id="q3"></div>
</div>
</div>
<script>
var q1 = document.getElementById('q1');
q1.addEventListener('click',function(){
console.log('这是d1... ...');
}, false);
var q2 = document.getElementById('q2');
q2.addEventListener('click',function(){
console.log('这是d2... ...');
}, false);
var q3 = document.getElementById('q3');
q3.addEventListener('click',function(event){
console.log('这是q3... ...');
event.stopPropagation();
}, false);
</script>
</body>
9. EreignisdelegationViele HTML-Elemente, die dasselbe Ereignis registrieren, und die Sicherheit der Ereignishandle-Logik sind gleich, führen dazu, dass die Seitengeschwindigkeit abnimmt, wenn das Ereignis auftritt flow erlaubt diesen HTML-Elementen nicht, Ereignisse mit dem übergeordneten Element zu registrieren
<body>
<div id="qh">
<button id="qyc1">按钮</button>
<button id="qyc2">按钮</button>
<button id="qyc3">按钮</button>
</div>
<script>
var qyc1 = document.getElementById('qyc1');
qyc1.addEventListener('click',function(){
console.log('这是个按钮');
});
var qyc2 = document.getElementById('qyc2');
qyc2.addEventListener('click',function(){
console.log('这是个按钮');
});
var qyc3 = document.getElementById('qyc3');
qyc3.addEventListener('click',function(){
console.log('这是个按钮');
});
var qh = document.getElementById('qh');
// 不把事件绑定给指定元素，绑定给共同父级和祖先元素
qh.addEventListener('click',function (event) {
var target = event.target;//触发事件目标元素
if(targe.nodeName === 'BUTTON') {
console.log('这是个按钮');
}
})
</script>
</body>Verwandte Empfehlungen:
Analyse des DOM-Ereignismodells von JS
DOM-Ereignisse in Javascript verstehen_Javascript-Kenntnisse
Das obige ist der detaillierte Inhalt vonEreignisanalyse von DOM in Javascript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!