博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM事件
阅读量:7052 次
发布时间:2019-06-28

本文共 1232 字,大约阅读时间需要 4 分钟。

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 鼠标离开事件元素

转载地址:http://ievol.baihongyu.com/

你可能感兴趣的文章
java中堆(heap)和堆栈(stack)
查看>>
第五天:Before -- CMD
查看>>
Docker软件安装系列。
查看>>
我的友情链接
查看>>
LeetCode-330.Patching Array
查看>>
Linux下用Java获取本机IP
查看>>
Eclipse的Spring库导入
查看>>
velocity 判断 变量 是否不是空或empty
查看>>
获得数据库自动生成的主键
查看>>
Hibernate缓存机制
查看>>
【BZOJ】1415 [Noi2005]聪聪和可可 期望DP+记忆化搜索
查看>>
android 7.1 调用相机崩溃解决办法
查看>>
------第二节-----------------第二讲----单链表的基本操作---------
查看>>
delegate代理设计模式
查看>>
花10分钟搞懂开源框架吧 - 【NancyFx.Net】
查看>>
GridView(网格视图)+MotionEvent(触控事件)实现可以拖动排序的网格图
查看>>
显示/隐藏Mac下的隐藏文件
查看>>
POJ-3565 Ants 空间点对不相交匹配-最小权值匹配
查看>>
springmvc(一)
查看>>
Hibernate与 MyBatis的比较
查看>>