DOM事件

Posted 别Null.了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM事件相关的知识,希望对你有一定的参考价值。

目录

事件

认识事件

事件的操作

注册事件

删除事件

DOM事件流

事件对象

认识事件对象

事件对象的常见属性和方法

鼠标事件

鼠标事件的常用方法

鼠标事件对象

键盘事件

键盘事件的常用方法 

键盘事件对象

总结


事件

认识事件

事件是指可以被javascript侦测到的行为,是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作,它对实现网页的交互效果起着重要的作用。

 事件三要素:

  • 事件源(who):触发事件的元素(谁触发了事件)
  • 事件类型(what):如 click 单击事件(触发了什么事件)
  • 事件处理程序(do):事件触发后要执行的代码(函数形式),也称事件处理函数(触发事件以后要做什么)

事件的操作

注册事件

在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事件流

事件流是指当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播,这个过程称之为事件流。

三种方式:网景公司采用事件捕获方式;微软公司采用事件冒泡方式; W3C对两种方式进行中和和处理,规定事件发生后先实现事件捕获但不处理事件;然后到了目标阶段执行当前元素对象的事件处理程序,但它会被看成冒泡阶段的一部分;最后实现事件的冒泡,逐级对事件进行处理。

W3C对事件流的具体过程:

事件对象

认识事件对象

当一个事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是event。只有有了事件event才会存在,它是系统自动创建的,不需要传递参数。

 注意:因为在事件触发时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。所以,在事件处理函数中需要用一个形参来接收事件对象event。

事件对象的使用:

<body>
    <button id="btn">获取event对象</button>
</body>
<script>
    var btn = document.getElementById('btn')  //通过id筛选出button按钮
    btn.onclick = function(e) {
       var event = e || window.event    // 获取事件对象的兼容处理
       console.log(event)
  }
</script>

事件对象的常见属性和方法

属性说明浏览器

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 值就可以实现图片的移动。

<html>
<style>
    img{
        position: absolute;
        top: 2px;
    }
</style>
<body>
    <img src="../images/5.jpg">
    <script>
        var pic = document.querySelector('img')
        document.addEventListener('mousemove',function(e){
            var x = e.pageX  
            var y = e.pageY

            // var x = e.clientX
            // var y = e.clientY

            // var x = e.screenX
            // var y = e.screenY   

            pic.style.left = x-50 + 'px'
            pic.style.top = y-50 + 'px'
        })
    </script>
</body>
</html>

键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如,用户按Esc键关闭打开的状态栏,按Enter键直接完成光标的上下切换等。

键盘事件的常用方法 

事件名称事件触发时机
keypress

某个键盘按键被按下时触发,不识别功能键,如CtrlShift、箭头等

keydown

某个键盘按键被按下时触发

keyup

某个键盘按键被松开时触发

 keypress、keydown和keyup事件区别:keypress事件保存的按键值是ASCII码,keydown和keyup事件保存的按键值是虚拟键码,keydown和keypress如果按住不放的话,会重复触发该对应事件。keyup和keydown事件不区分字母大小写,而keypress区分字母大小写。

键盘事件对象

键盘事件对象KeyBoardEvent,是跟键盘事件相关的一系列信息的集合,根据键盘事件对象中的keyCode属性可以得到相应的ASCII码值,进而可以判断用户按下了哪个键。

实例:检测用户是否按下s键,若按下则将光标定位到搜索框。

<html>
<body>
    搜索:<input type="text">

    <script>
        var search = document.querySelector('input')
        document.addEventListener('keyup',function(e){  //e代表键盘事件的对象KeyBoardEvent
            if(e.keyCode === 83){  //如果按下s键则焦点定位到框中
                search.focus()
            }
        })
    </script>
</body>
</html>

总结

这篇文章主要讲了事件、事件对象、鼠标事件以及键盘事件等内容,这些都是DOM事件的一些常用操作,我们应熟练掌握。希望这篇文章可以带给你帮助。

以上是关于DOM事件的主要内容,如果未能解决你的问题,请参考以下文章

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

java解析xml的几种方式哪种最好?

jQuery的DOM操作

JavaScript单行代码,也就是代码片段

实用代码片段将json数据绑定到html元素 (转)

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段