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代码:
event事件 复制代码
4.事件对象 (详细的可查看)
事件处理方法中的第一个参数返回的就是事件对象,每一个事件方法都有,根据情况使用或者忽略。
事件对象可以告诉你这个事件是什么类型的事件,来自哪个元素,事件的位置(如鼠标事件的点击坐标),以及对事件进行操作比如阻止冒泡。
(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 鼠标离开事件元素