DOM事件 · 前端

# DOM事件 > DOM级别一共可以分为4个级别：DOM0级，DOM1级，DOM2级和 DOM3级，而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。 > ## DOM0级事件（事件绑定） ~~~ <button id="btn" type="button"></button> <script> var btn = document.getElementById('btn'); btn.onclick = function() { alert('Hello World'); } // btn.onclick = null; 解绑事件 </script> ~~~ 如上，可以看出给button绑定click事件处理方法时，将事件处理方法给到onclick属性。这个就是DOM0级处理事件的提现。 ## DOM2级事件使用addEventListener(事件监听)进行事件处理。参数传入false时默认使用冒泡模式。 ~~~ <script> var btn = document.getElementById('btn'); function showFn() { alert('Hello World'); } btn.addEventListener('click', showFn, false); // btn.removeEventListener('click', showFn, false); 解绑事件 </script> ~~~ > addEventListener 添加的匿名函数是不可以通过removeEventListener 移除的。 ## DOM3级事件在DOM2的基础上加了一些类型 blur focus啥的。 ## Event对象 #### stopPropagation stopPropagation方法主要用于阻止事件的进一步传播，比如阻止事件继续向上层冒泡。 ~~~ function getEvent(event) { event.stopPropagation(); } child.addEventListener('click', getEvent, false); ~~~ #### preventDefault 阻止默认行为触发 ```html <body> <a id="baidu" href="https://www.baidu.com">baidu</a> </body> <script> let baidu = document.getElementById('baidu'); function callfun(event) { event.preventDefault(); alert('def prevent'); } baidu.addEventListener('click', callfun, false); </script> ``` #### stopImmediatePropagation 将上面的例子改为： ~~~ let baidu = document.getElementById('baidu'); function callfun(event) { event.preventDefault(); event.stopImmediatePropagation() alert('def prevent'); } function pa(){ alert('另一个事件'); } baidu.addEventListener('click', callfun, false); baidu.addEventListener('click', pa, false); ~~~ 这样，也不会alert('另一个事件')，只会alert('def prevent'); ## Event常用属性 #### type 通过type我们可以获取事件发生的类型，比如点击事件我们获取的是'click'字符串。 ~~~ var go = document.getElementById('go'); function goFn(event) { console.log(event.type); // 输出'click' } go.addEventListener('click', goFn, false); ~~~ #### target target属性主要用于获取事件的目标对象，比如我们点击a标签获取的是a标签的html对象。 ~~~ var go = document.getElementById('go'); function goFn(event) { var target = event.target; console.log(target === go) // 返回true } go.addEventListener('click', goFn, false); ~~~ #### 鼠标事件 ~~~ <script> function moveFn(event) { console.log('screenX 获取鼠标基于屏幕的X轴坐标 ' + event.screenX) console.log('screenY 获取鼠标基于屏幕的Y轴坐标 ' + event.screenY) console.log('clientX 获取鼠标基于浏览器窗口的X轴坐标 ' + event.clientX) console.log('clientY 获取鼠标基于浏览器窗口的Y轴坐标 ' + event.clientY) console.log('pageX 获取鼠标基于文档的X轴坐标 ' + event.pageX) console.log('pageY 获取鼠标基于文档的Y轴坐标 ' + event.pageY) } function clickFn(event) { console.log(event.button) // 获取鼠标按下的键。非IE浏览器中0为鼠标左键，1为鼠标中键，2为鼠标右键 console.log(event.which) // 获取指定事件上哪个键盘键或鼠标按钮被按下 } document.addEventListener('click', moveFn, false); document.addEventListener('click', clickFn, false); </script> ~~~ **clientX clientY** event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 ![](https://upload-images.jianshu.io/upload_images/1245223-186b20021739e6f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700) **offsetX offsetY** offset意为偏移量，是被点击的元素距左上角为参考原点的长度，而IE、FF和Chrome的参考点有所差异。 1. chrome： ![](https://upload-images.jianshu.io/upload_images/1245223-06e00d7afadcb800.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/626) 2. IE： ![](https://upload-images.jianshu.io/upload_images/1245223-df5b5aa5466c2170.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/468) **pageX pageY** page为页面的意思，页面的高度一般情况client游览器显示区域装不下，所以会出现垂直滚动条。鼠标距离页面初始page原点的长度。 ![](https://upload-images.jianshu.io/upload_images/1245223-c7157ef272a7bdfc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/652) **screenX screenY** screen顾名思义是屏幕，是用来获取鼠标点击位置到屏幕显示器的距离，距离的最大值需根据屏幕分辨率的尺寸来计算。