目录
使用方式
方式一 直接在标签属性中, 绑定事件和对应的执行代码
<button id="btn" οnmοusemοve="alert('你干嘛摸我?');">按钮1</button>
方式二 绑定事件和对应的执行函数
绑定方式1 通用, 但是多次绑定会覆盖
box.onclick = function () { //添加事件
console.log('点击后执行');
};
box.onclick = null; //移除事件
绑定方式2 可以绑定多次, 正序执行
box.addEventListener('click', eventCode, false); //添加事件
box.removeEventListener('click', eventCode, false); //移除事件
绑定方式3 适配IE78, 可以绑定多次, 逆序执行
box.attachEvent('onclick', eventCode); //添加事件
box.detachEvent('onclick', eventCode); //移除事件
//兼容代码 借助惰性函数进行优化
function addEventListener(element, type, fn) { // 添加事件
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent){
element.attachEvent('on' + type,fn);
} else {
element['on'+type] = fn;
}
}
function removeEventListener(element, type, fn) { // 移除事件
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on'+type] = null;
}
}
事件冒泡和事件委托
事件冒泡
当一个DOM, 处理过事件之后, 会自动的向上传递;
如果上层也监听了对应事件, 那么也会得到响应
阻止冒泡
event.stopPropagation();
事件委托
我们可以借助事件冒泡机制, 直接监听他们的父元素的事件
target:触发事件的某个具体对象,只会出现在事件流的目标阶段
<div id="box">
<div class="smallBox">1</div>
<div class="smallBox">2</div>
<div class="smallBox">3</div>
</div>
<script>
let div = document.getElementById("box");
div.onclick = function(evt) {
let target = evt.target;
// 如果点击了子元素,事件会冒泡到父元素,此时点击的是哪个子元素target就是谁
// 如果点击的是父元素,则 target=this
if (target != this) { // 这里表示点击的是子元素,而不是父元素
console.log(target.innerText);
}
}
</script>
事件捕获
事件对象的产生, 最先知道的是html, 然后body, 然后往内到具体对象,这是事件被捕获的顺序
事件先经过事件捕获阶段,然后再是事件冒泡阶段
如果想要调整模式, 可以通过修改useCapture,默认是false
element.addEventListener("click", function(){}, false); 中false改为true就是捕获模式
常用事件类型
鼠标
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onmousemove 鼠标被移动
键盘
onkeydown 某个键盘的键被按下
onkeyup 某个键盘的键被松开
onkeypress 某个键盘的键被按下或按住
加载
onload 某个页面或图像被完成加载
onunload 用户退出页面
表单
焦点
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 用户改变域的内容
onreset 重置按钮被点击
onsubmit 提交按钮被点击
其他
onresize 窗口或框架被调整尺寸
onscroll 页面滚动
常用方法
preventDefault() 阻止事件默认行为
stopPropagation() 阻止事件传递