1. 传统方式
var btn1 = document.querySelector('#btn1');
btn1.onclick = function() { // 注册事件
alert('hello');
this.onclick = null; // 删除事件
}
2. addEventListener (IE9以上)
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事件流:捕获阶段->当前目标阶段(target)->冒泡阶段
事件委托:给父节点增添事件监听器,然后利用事件对象的target来找到当前点击(或其他行为)节点的冒泡来触发事件。
注意:this 指所绑定的事件
e.target指到底是谁触发了这个事件(比如到底是点击到谁)
比如以下案例:ul注册了click事件,则this指向ul,但是如果鼠标点击到了li元素,则target为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>点击,出现弹框</li>
<li>点击,出现弹框</li>
<li>点击,出现弹框</li>
<li>点击,出现弹框</li>
<li>点击,出现弹框</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
alert(123);
console.log(e.target);
})
</script>
</body>
</html>
附:1. 阻止冒泡事件:event.stopPropagation()
2. 阻止默认事件:event.preventDefault()
<body>
<p>hahahhah</p>
<script>
var p = document.querySelector('p');
//contextmenu:鼠标右键菜单
p.addEventListener('contextmenu',function(e) {
e.preventDefault();
})
//selectstart:鼠标开始选中
p.addEventListener('selectstart',function(e) {
e.preventDefault();
})
</script>
</body>
3. 输入文本框并显示放大
<!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="请输入货物单号">
</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>