DOM事件以及鼠标事件属性

DOM事件

事件对象event

当触发DOM元素上的某个事件会产生一个事件对象event.这个对象包涵所有的与事件有关的信息包括导致事件的元素.事件的类型以及其他与事件有关的信息

事件函数的参数可以接收event对象

• box.οnclick=function(e){cosole.log(e.type)//输出结果为click}

获得event的兼容性写法

• //获得event对象兼容性写法
  var e = event || window.event;//兼容
  //获得target兼容型写法
  var target=event.target||event.srcElement

注册事件处理程序

1. 通过HTML标签属性注册事件处理程序

2.通过DOM元素属性注册事件处理程序

• 点我

- **注意：通过上面这种方式添加事件，同一个类型的事件如果添加多次的话，只执行最后添加的事件。**

使用addEventListener()方法注册事件处理程序

• 1.addEventListener事件绑定、监听、捕获 —》标准浏览器中有作用，非标准IE不兼容
  2.语法：元素.addEventListener(事件名,函数,true/false) true代表事件捕获，false代表事件冒泡。
  3.由于现在的浏览器都是执行事件冒泡，所以第三个参数通常写成false。
• 点我

- 注意：同一种类型的事件可以添加多次，执行顺序是先添加会先执行，后面依次执行。**

javascript中常用坐标属性

MouseEvent(鼠标事件)属性

• clientX、clientY

  • 点击位置距离当前body可视区域的x，y坐标

• .pageX、pageY

  • 对于整个页面来说，包括了被卷去的body部分的长度

• screenX、screenY

  • 点击位置距离当前电脑屏幕的x，y坐标

• offsetX、offsetY

  • 鼠标相对于事件源元素的x,y坐标

• x、y

  • 和screenX、screenY一样

元素（HTMLElement）的offset(偏移量)属性

• 1.offsetTop: 元素相对父元素上方的偏移.
• 2.offsetLeft： 元素相对父元素左边框的偏移.
• 3.offsetWidth： 自身包括padding 、 边框、内容区的宽度。
• 4.offsetHeight： 自身包括padding、边框、内容区的高度。
• 5.offsetParent： 作为偏移参照点的父级元素。

元素的client(自己本身的意思)属性

• clientHeight（clientWidth）:内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线)
• clientLeft,clientTop: 这两个返回的是元素周围边框的厚度,可以理解为边框的长度如果不指定一个边框或者不定位改元素,他的值就是0.

元素的scroll 属性

• element.scrollkTop返回被卷去的上侧距离
• element.scrollpLeft返回被卷去的左侧距离
• element.scrollWidth返回自己实际的宽度(不包含边框)
• elememt.scrollHeight返回自己实际的高度(不包含边框)

window属性

• window.pageXOffset 获取当前页面相对于窗口显示区左上角的 X 位置。（页面滚动的距离）
• window.pageYOffset 获取当前页面相对于窗口显示区左上角的 Y 位置。（只读）
• window.screenLeft 可以获得浏览器距屏幕左上角的左边距
• window.screenTop 可以获得浏览器距屏幕左上角的上边距
• window.screen.width记录了客户端显示屏的宽
• window.screen.height记录了客户端显示屏的高

坐标属性总结

• 三大系列大小对比

  • element.offsetWidth返回自身宽度包括padding 内容 border 返回值不带单位
  • element.clientWidth返回自身宽度 包括内容padding 但是不包括边框 返回值不带单位
  • element.scrollWidth返回自身宽度内容还有padding 不包括边框 返回值不带单位

事件的类型

表单事件

• onchange内容改变事件
• onfocus获取焦点时触发的事件
• onblur失去焦点时触发的事件
• oninput输入事件
• onsubmit表单提交事件
• onreset表单重置事件

鼠标事件

• onmouseover鼠标刚进入元素时触发
• onmouseenter鼠标完全进入元素时触发
• onmousemove鼠标在元素上移动时触发
• onmouseout鼠标刚要离开元素时触发
• onmouseleave鼠标完全离开元素时触发
• onmousedown鼠标按下时触发
• onmouseup鼠标弹起时触发
• onclick鼠标单击时触发
• ondblclick鼠标双击时触发
• onmousewheel当鼠标滚轮正在被滚动时运行的脚本。
• onscroll当元素滚动条被滚动时运行的脚本。
• oncontextmenu在用户点击鼠标右键打开上下文菜单时触发

键盘事件

• onkeydown键盘按键按下时触发

  • 键盘标识码e.keyCode

• onkeypress键盘按着不放时触发

• onkeyup键盘按键弹起时触发

窗口事件

• onload文档及其资源文件都加载完成时触发
• onresize事件会在窗口或框架被调整大小时发生。
• onunload关闭网页时

阻止事件传播

使用事件对象的 stopPropagation() 方法停止事件传播。

阻止默认事件

方法一：使用事件对象的 preventDefault() 方法阻止默认行为。

方法二：在事件的处理函数中返回 false。
return false

XMind - Trial Version