一、事件三要素
1、事件源
绑定事件的节点
2、事件处理函数
当点击事件触发时,执行的代码(函数)
3、事件类型
(单击,hover,move)
DOM1 写法
let divEle = document.querySelector('div');
divEle.onclick = function () {
window.alert('AAA')
}
DOM2 写法
书写格式:元素节点.addEventListener(事件类型,事件处理函数,Boolean)
参数3:捕获型(true)、冒泡型(false)
addEventListener:事件监听
let divEle = document.querySelector('div');
divEle.addEventListener('click',function () {
window.alert('XXX');
});
二、事件对象
事件处理函数的参数
例如 item.addEventListener(‘click’, function (e) {} e 就是事件对象
e.target 触发事件的节点
let liEle = document.querySelectorAll('li');
for (const item of liEle) {
item.addEventListener('click', function (e) {
// 提升兼容性
let event = e || window.event;
console.log(event.target);
item.style.textDecorationLine = 'line-through';
item.style.color = 'red';
});
}
三、事件代理
(事件委托)适用场景:
1、多个子元素绑定相同事件类型执行同一个事件函数
2、子元素是动态
olEle.addEventListener('click',function (e) {
// 获取当前节点的标签名 localName 标签名只能大写
if (e.target.nodeName == 'LI') {
e.target.classList.toggle('box1');
}
// 获取当前节点的标签名 localName 标签名不区分大小写
if (e.target.localName == 'p') {
e.target.classList.toggle('box2');
}
})
四、表单事件
<input type="text">
1、焦点事件 focus
inputEle.addEventListener('focus', function (e) {
e.target.style.outline = '3px solid red';
let newSpan = document.createElement('span');
newSpan.innerText = '请输入电话号码';
bEle.appendChild(newSpan);
})
2、输入事件 input
(只要输入就触发)
inputEle.addEventListener('input', function (e) {
let str = e.target.value;
console.log('A');
let re = /3/img;
if (re.test(str)) {
alert('请勿输入关键字!!!');
e.target.value = '';
}
})
3、失去焦点 blur
inputEle.addEventListener('blur', function (e) {
e.target.style.outline = '';
})
4、内容发生变化 change
(失去焦点后判断内容是否发生变化)
inputEle.addEventListener('change', function (e) {
console.log('f70');
})
五、键盘事件
1、按键按下时触发 keydown
document.addEventListener('keydown',function (e) {
console.log('按下时',e.key,e.keyCode);
});
2、keypress 只识别字符键
(数字,字母,标点符号,回车)
document.addEventListener('keypress',function (e) {
console.log("按下的有效键",e.key);
});
3、按键抬起时触发 keyup
document.addEventListener('keyup',function (e) {
console.log('抬起时',e.key);
});
六、鼠标事件
1、鼠标点击事件
a、click 单击鼠标
artEle.addEventListener('click',function () {
console.log('click');
})
b、dblclick 双击鼠标
artEle.addEventListener('dblclick',function () {
console.log('dblclick');
})
c、mousedown鼠标左键按下
sctEle.addEventListener('mousedown',function () {
console.log('mousedown,section');
})
d、mouseup鼠标左键抬起
sctEle.addEventListener('mouseup',function () {
console.log('mouseup,section');
})
2、鼠标移入移出事件
mouseover、mouseout会考虑子元素;
mouseenter、mouseleave不会考虑子元素
不考虑子元素:鼠标移入子元素,不会触发父元素的事件
a、mouseenter 鼠标移入事件
artEle.addEventListener('mouseenter',function () {
console.log('mouseenter');
artEle.style.backgroundColor = 'gray';
})
a2、mouseleave 鼠标移出事件
artEle.addEventListener('mouseleave',function () {
console.log('mouseleave');
artEle.style.backgroundColor = 'skyblue';
})
b1、mouseover 鼠标移入事件
artEle.addEventListener('mouseover',function () {
console.log('mouseover');
artEle.style.backgroundColor = 'blue';
})
b2、mouseout 鼠标移出事件
artEle.addEventListener('mouseout',function () {
console.log('mouseout');
artEle.style.backgroundColor = 'skyblue';
})
3、mousemove监听鼠标移动
document.addEventListener('mousemove',move);
function move(e) {
let event = e || window.event;
// 鼠标在浏览器的位置
// event.clientX:在浏览器的水平位置
// event.clientY:在浏览器的崔志位置
divEle.style.left = event.clientX + 'px';
divEle.style.top = event.clientY + 'px';
}
七、事件对象的方法
<article>
<section>
<p>
<a href="../event.html">点我</a>
</p>
</section>
</article>
1、阻止默认事件
event.preventDefault()
let aEle = document.getElementsByTagName("a")[0];
aEle.addEventListener("click", function(e) {
let event = e || window.event;
let state = window.confirm("ccc");
if (!state) {
event.preventDefault();
}
});
2、阻止事件冒泡
event.stopPropagation()
sctEle.addEventListener('click', function (e) {
let event = e || window.event;
event.stopPropagation();
console.log('B', 'sctEle');
},fasle)
3、阻止事件捕获
event.stopImmediatePropagation()
artEle.addEventListener('click', function (e) {
let event = e || window.event;
event.stopImmediatePropagation();
console.log('A', 'artEle');
}, true)