本文共 3413 字,大约阅读时间需要 11 分钟。
目录
事件是指可以被JavaScript侦测到的行为,是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作,它对实现网页的交互效果起着重要的作用。
事件三要素:
在JavaScript中,注册事件(绑定事件)分为传统方式注册事件和事件监听方式注册事件。
1、传统方式
元素对象.事件 = 事件的处理程序// 示例oBtn.onclick = function () { }
注意:此方式具有唯一性,即同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。
2、事件监听方式(下面都是从标准浏览器来讲的)
DOM对象.addEventListener(type, callback, [capture])//type:DOM对象绑定的事件类型,如click//callback:事件的处理程序//capture:默认为false,表示冒泡阶段完成事件处理,true为捕获阶段完成事件处理
注意:该方式存在浏览器兼容性问题,且注册事件的特点在于可以给同一个DOM对象的同一个事件添加多个事件处理程序。
也需要考虑浏览器兼容问题。
DOM对象.onclick = null // 传统方式删除事件DOM对象.detachEvent(type, callback) // 早期版本IE浏览器DOM对象.removeEventListener(type, callback) // 标准浏览器(常用)
事件流是指当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播,这个过程称之为事件流。
三种方式:网景公司采用事件捕获方式;微软公司采用事件冒泡方式; W3C对两种方式进行中和和处理,规定事件发生后先实现事件捕获但不处理事件;然后到了目标阶段执行当前元素对象的事件处理程序,但它会被看成冒泡阶段的一部分;最后实现事件的冒泡,逐级对事件进行处理。
W3C对事件流的具体过程:
当一个事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是event。只有有了事件event才会存在,它是系统自动创建的,不需要传递参数。
注意:因为在事件触发时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。所以,在事件处理函数中需要用一个形参来接收事件对象event。
事件对象的使用:
属性 | 说明 | 浏览器 |
---|---|---|
e.target | 返回触发事件的对象 | 标准浏览器 |
e.srcElement | 返回触发事件的对象 | 非标准IE 6-IE 8使用 |
e.type | 返回事件的类型 | 所有浏览器 |
e.stopPropagation() | 阻止事件冒泡 | 标准浏览器 |
e.cancelBubble | 阻止事件冒泡 | 非标准IE 6-IE 8使用 |
e.preventDefault() | 阻止默认事件(默认行为) | 标准浏览器 |
e.returnValue | 阻止默认事件(默认行为) | 非标准IE 6-IE 8使用 |
1、e.target和this的区别
在事件处理函数中,e.target返回的是触发事件的对象,而this返回的是绑定事件的对象。
2、阻止默认行为
在实际开发中会存在有标签含有自己的默认行为,只有在确定这些行为符合要求后才能执行,因此我们可以利用事件对象的preventDefault()方法和returnValue属性,禁止所有浏览器执行元素的默认行为。需要注意的是,只有事件对象的cancelable属性设置为true,才可以使用preventDefault()方法取消其默认行为。
3、阻止事件冒泡
可以利用事件对象调用stopPropagation()方法和设置cancelBubble属性,实现禁止所有浏览器的事件冒泡行为。
语法结构:
if (window.event) { // 早期版本的浏览器 window.event.cancelBubble = true}else{ // 标准浏览器 e.stopPropagation()}
4、事件委托
原理:不给每个子节点单独设置事件监听器,而是把事件监听器设置在其父节点上,让其利用事件冒泡的原理影响到每个子节点。也就是说只给父元素注册事件,让处理代码在父元素的事件中执行。(只操作一次DOM,提高了程序的性能)
事件名称 | 事件触发时机 |
---|---|
onclick | 单击鼠标左键时触发 |
onfocus | 获得鼠标指针焦点触发 |
onblur | 失去鼠标指针焦点触发 |
onmouseover | 鼠标指针经过时触发 |
onmouseout | 鼠标指针离开时触发 |
onmousedown | 当按下任意鼠标按键时触发 |
onmouseup | 当释放任意鼠标按键时触发 |
onmousemove | 在元素内当鼠标指针移动时持续触发 |
1、禁止鼠标右击菜单
contextmenu主要控制应该何时显示上下文菜单,主要应用于程序员取消默认的上下文菜单。
document.addEventListener('contextmenu',function(e){ e.preventDefault()})
2、禁止鼠标选中
selectstart事件是鼠标开始选择文字时就会触发,如果禁止鼠标选中,需要禁止该事件的默认行为。
document.addEventListener('selectstart',function(e){ e.preventDefault()})
鼠标事件对象MouseEvent,是跟鼠标事件相关的一系列信息的集合,可以用来获取当前鼠标的位置信息,鼠标事件位置属性如下:(部分属性存在浏览器兼容问题)
位置属性(只读) | 描述 |
---|---|
clientX | 鼠标指针位于浏览器页面当前窗口可视区的水平坐标(X轴坐标) |
clientY | 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(Y轴坐标) |
pageX | 鼠标指针位于文档的水平坐标(X轴坐标),IE 6~IE 8不兼容 |
pageY | 鼠标指针位于文档的垂直坐标(Y轴坐标),IE 6~IE 8不兼容 |
screenX | 鼠标指针位于屏幕的水平坐标(X轴坐标) |
screenY | 鼠标指针位于屏幕的垂直坐标(Y轴坐标) |
实例:图片跟随鼠标移动
分析:使用鼠标指针移动事件mousemove,每次鼠标移动,都会获得最新的鼠标指针坐标,把这个x和y坐标作为图片的top和left 值就可以实现图片的移动。
键盘事件是指用户在使用键盘时触发的事件。例如,用户按Esc键关闭打开的状态栏,按Enter键直接完成光标的上下切换等。
事件名称 | 事件触发时机 |
---|---|
keypress | 某个键盘按键被按下时触发,不识别功能键,如Ctrl、Shift、箭头等 |
keydown | 某个键盘按键被按下时触发 |
keyup | 某个键盘按键被松开时触发 |
keypress、keydown和keyup事件区别:keypress事件保存的按键值是ASCII码,keydown和keyup事件保存的按键值是虚拟键码,keydown和keypress如果按住不放的话,会重复触发该对应事件。keyup和keydown事件不区分字母大小写,而keypress区分字母大小写。
键盘事件对象KeyBoardEvent,是跟键盘事件相关的一系列信息的集合,根据键盘事件对象中的keyCode属性可以得到相应的ASCII码值,进而可以判断用户按下了哪个键。
实例:检测用户是否按下s键,若按下则将光标定位到搜索框。
搜索:
这篇文章主要讲了事件、事件对象、鼠标事件以及键盘事件等内容,这些都是DOM事件的一些常用操作,我们应熟练掌握。希望这篇文章可以带给你帮助。
转载地址:http://rshai.baihongyu.com/