DOM事件

171 阅读3分钟

1.事件冒泡

事件由被被触发的元素逐级向上(父元素)进行事件传递,即哪一级收到事件消息立马向自己的直接领导汇报,层层递进。

2.事件捕获

谁来处理这个事件,根据传统谁级别高谁具有优先权,这就说明父元素处理这个事件的优先级更高。

冒泡和捕获

3.事件处理程序

(1)HTML事件处理程序

把点击事件放到HTML元素上并绑定js中的一个触发方法,这样做的缺点是修改麻烦。

(2)DOM 0级事件处理程序

通过document获取元素,利用元素属性添加触发方法,比如button的onclick属性

btn = document.getElementById("btn");

btn.onclick = function(){};

(3)DOM 2级事件处理程序

比零级更高级一些,即添加监听某一事件和删除事件。用到方法为

addEventListener(eventName,fun,isCatch)

removeEventListener(eventName,fun,isCatch)

监听事件名,事件触发方法,Boolean值TRUE代表捕获事件期触发方法,false冒泡事件期,常用false

注意:在IE浏览器中不能识别,因为IE有自己的事件处理程序

attachEvent(eventName,fun)和 detachEvent(eventName,fun)

eventName与上面的红色eventName加了前缀on

HTML代码:

<!--* Created by luckyHappyBug on 2017/12/5 0005.-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event事件</title>
</head>
<body>
<div id="div2" class="box"></div>
<style>
* {
    margin: 0px;
    padding: 0px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 100px;
}
</style>
<script>
var boo = false;//true 代表捕获期触发方法,false表示冒泡期触发方法,
// 顺序是先捕获开始从外层的元素开始(window-->html-->body--->target),
// 然后是冒泡从目标元素开始一次向上。
var dom_div2 = document.getElementById("div2");
window.addEventListener('click', function () {
    console.log("capture window click");
}, boo);
document.documentElement.addEventListener('click', function () {
    console.log("capture html click");
}, boo);
document.body.addEventListener('click', function () {
    console.log("capture body click");
}, boo);
dom_div2.addEventListener("click", function () {
    console.log("capture domDiv click");
}, boo);
</script>
</body>
</html>

4.事件对象 (详细的可查看www.w3school.com.cn/jsref/dom_o…

事件处理方法中的第一个参数返回的就是事件对象,每一个事件方法都有,根据情况使用或者忽略。

事件对象可以告诉你这个事件是什么类型的事件,来自哪个元素,事件的位置(如鼠标事件的点击坐标),以及对事件进行操作比如阻止冒泡。

(1)事件对象的常见属性

:target 返回触发该事件的元素

:type 返回触发事件的类型 如click、mousemove等

:clientX 鼠标按键的以浏览器可见窗口左上角为起点的x坐标

:clientY 鼠标按键的以浏览器可见窗口左上角为起点的y坐标

(2)常见事件方法

:preventDefault() 终止执行事件的关联的默认动作,如a标签的href默认就是打开连接,终止。

:stopPropagation() 阻止冒泡。

(3)常见事件句柄

:onchange 文本内容改变触发

:onblur   失去焦点触发

:onfocus  获得焦点

:onclick  点击

:onkeyup  按键松开触发一次

:onkeydown 键盘键按下(任意键)不松开会不停触发

:onkeypress 键盘键按下(字符键)并松开触发一次

:onmousedown 鼠标按下

:onmouseup 鼠标松开

:onmousemove 鼠标移动

:onmouseover 鼠标移动到事件元素上

:onmouseout 鼠标离开事件元素