当前位置:网站首页>JS events (add, delete) and delegates
JS events (add, delete) and delegates
2022-07-06 02:31:00 【MyDreamingCode】
1. The traditional way
var btn1 = document.querySelector('#btn1');
btn1.onclick = function() { // Registration events
alert('hello');
this.onclick = null; // Delete event
}
2. addEventListener (IE9 above )
btn1.addEventListener('click', fn);
function fn() {
alert('hello');
btn1.removeEventListener('click', fn);
}
3. attachEvent(IE6、7、8)
btn1.attachEvent('onclick', fn);
function fn() {
alert('hello');
btn1.detachEvent('onclick', fn);
}
4. DOM Flow of events : Capture phase -> Current target stage (target)-> bubbling phase
Event delegation : Add to parent node event Monitor , Then use the... Of the event object target To find the current click ( Or any other act ) Bubbling of nodes to trigger events .
Be careful :this Refers to the bound event
e.target It refers to who triggered this event ( For example, who did you click on )
For example, the following cases :ul registered click event , be this Point to ul, But if the mouse clicks li Elements , be target by li.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li> Click on , Pop up </li>
<li> Click on , Pop up </li>
<li> Click on , Pop up </li>
<li> Click on , Pop up </li>
<li> Click on , Pop up </li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
alert(123);
console.log(e.target);
})
</script>
</body>
</html>
attach :1. Stop bubbling :event.stopPropagation()
2. Block default events :event.preventDefault()
<body>
<p>hahahhah</p>
<script>
var p = document.querySelector('p');
//contextmenu: Right mouse button menu
p.addEventListener('contextmenu',function(e) {
e.preventDefault();
})
//selectstart: Mouse starts to select
p.addEventListener('selectstart',function(e) {
e.preventDefault();
})
</script>
</body>
3. Enter the text box and zoom in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
position: relative;
width: 200px;
margin: 100px auto;
}
.tip {
width: 200px;
height: 30px;
font-size: 18px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
input {
position: absolute;
top: 30px;
width: 200px;
height: 20px;
outline: none;
}
</style>
</head>
<body>
<div class="wrap">
<div class="tip"></div>
<input type="text" placeholder=" Please enter the goods order number ">
</div>
<script>
var tip = document.querySelector('.tip');
var input = document.querySelector('input');
document.addEventListener('keyup', function() {
if(input.value != '') {
tip.innerHTML = input.value;
tip.style.display = 'block';
}else {
tip.style.display = 'none';
}
})
input.addEventListener('blur', function() {
tip.style.display = 'none';
})
input.addEventListener('focus', function() {
if(this.value != '') {
tip.style.display = 'block';
}
})
</script>
</body>
</html>
边栏推荐
- Thinking on Architecture Design (under continuous updating)
- A doctor's 22 years in Huawei
- HDU_ p1237_ Simple calculator_ stack
- [Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 11
- 有沒有sqlcdc監控多張錶 再關聯後 sink到另外一張錶的案例啊?全部在 mysql中操作
- Lecture 4 of Data Engineering Series: sample engineering of data centric AI
- UE4 - how to make a simple TPS role (I) - create a basic role
- Reset nodejs of the system
- Bigder:34/100 面试感觉挺好的,没有收到录取
- sql表名作为参数传递
猜你喜欢
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 19
Spark accumulator
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
力扣今日題-729. 我的日程安排錶 I
剑指 Offer 30. 包含min函数的栈
[Wu Enda machine learning] week5 programming assignment EX4 - neural network learning
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
The third level of C language punch in
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 8
随机推荐
Dachang image library
3D drawing ()
Shell脚本更新存储过程到数据库
Number conclusion LC skimming review - 1
Concept of storage engine
UE4 - how to make a simple TPS role (I) - create a basic role
MySQL lethal serial question 1 -- are you familiar with MySQL transactions?
Thinking on Architecture Design (under continuous updating)
2022.02.13
Global and Chinese market of commercial cheese crushers 2022-2028: Research Report on technology, participants, trends, market size and share
Advanced technology management - what is the physical, mental and mental strength of managers
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 11
Minecraft 1.18.1, 1.18.2 module development 22 Sniper rifle
[eight part essay] what is the difference between unrepeatable reading and unreal reading?
【MySQL 15】Could not increase number of max_ open_ files to more than 10000 (request: 65535)
力扣今日题-729. 我的日程安排表 I
Spark accumulator
2022年版图解网络PDF
Global and Chinese markets of general purpose centrifuges 2022-2028: Research Report on technology, participants, trends, market size and share
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower