事件总笔记

事件总结

什么是事件

• 事件，就是文档或浏览器窗口中发生的一
些特定的交互瞬间。
• JavaScript 与 HTML 之间的交互是通过事
件实现的。
• 对于 Web 应用来说，有下面这些代表性的
事件：点击某个元素、将鼠标移动至某个
元素上方、按下键盘上某个键，等等。

 

 

 

 

事件构成三要素

1.触发的元素

2.事件函数(on+事件类型)

3.事件处理函数(方法)

事件书写方式

元素内部直接写

<a href='' onclick="alert('hello')">

元素内部调用函数

<a href='' onclick='fn()'>

使用对应的事件属性添加事件

var box =document.getElementById('box')
box.onclick=function(){
​
}
box.onclick=fn

事件类型

1.鼠标事件

点击事件 onclick (执行在按下和弹起之后)

双击事件 ondblcilck

移入事件 onmouseover (子元素也会触发)

移出事件 onmouseout

移入事件 onmouseenter

移出事件 onmouseleave

移动事件 onmousemove

按下 onmousedown

弹起 onmouseup

2.键盘事件

onkeydown 按下

onkeyup 弹起

onkeypress 按下后弹起前(字符按键 包含字母数组下划线特殊字符及回车和空格)

3.html事件

onload 加载 window里面写

onunload 卸载 window里面写

onblur 失去焦点 input写

onfoucs 获取焦点 input写

onsubmit 提交事件 form表单写

onreset 重置事件 form表单写

onselect 文本内容选择事件 input和textarea

onscoll 滚动栏滚动事件 window

onchange 内容修改事件 表单元素的

事件源对象

event 其实是对应的出发的事件函数里面的第一个参数

兼容写法

box.onclick=function(e){
e=e||window.event  //兼容写法
}

事件源对象的相关属性

button 按键按下的是哪个0 表示左键 1表示中间滚轮 2表示右键

tepe 事件类型

target 目标元素(触发事件的元素) currentTarget实际操作的元素

X 获取鼠标的X坐标 (有兼容问题 ie浏览器) 普遍是ie9之前的

Y 获取鼠标的Y坐标 (有兼容问题 ie浏览器)

screenX 获取屏幕到鼠标的横轴距离

screenY 获取屏幕到鼠标的纵轴距离

pagrX 获取鼠标页面最顶部的X距离(包含滚动栏的)

pageY 获取鼠标页面最顶部的X距离(包含滚动栏的)

clientX 获取鼠标离页面的可视区域的x距离

clientY 获取鼠标离页面的可视区域的Y距离

offsetX 获取鼠标在盒子里面的x坐标

offsetY 获取鼠标在盒子里面的Y坐标

ctrlKey 是否按着ctrl键

shiftKey 是否按着shift键

altKey 是否按着alt键

key 获取对应的按钮的值

code 获取按钮

keyCode 获取按钮值的ascii码(只会获取大写)

charCode 获取字符编码(只会运用在keypress里面)

事件的this指向

如果是在对应的function里面的 那么this指向function的拥有者(也就是触发事件的元素)

如果他在没有对象包的情况下他指向的是window(有对象包就属于对象的拥有者没有就指向window)

阻止事件冒泡及默认行为

事件冒泡:就是触发里面的事件的时候,事件会进行向上冒泡进而触发外面的事件(事件的向上传递)

阻止事件冒泡

e.stopPropagation()//兼容问题 遵从W3c规范
e.cancelBubble=ture //ie的兼容 不遵从W3c规范(未来会被废弃)
//兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble=true

阻止默认行为

e.preventDefault()//兼容问题
e.returnValue=false//兼容
return false//后续代码不会执行 需要放在最后面写
e.preventDefault?e.preventDefault():e.returnValue=false

offset家族 (元素的属性 只读属性不能获取)

offsetParent 基于偏移的父元素 (有定位(没有定位找body)就近原则)

offsetLeft 左边的偏移量 offsetTop 上面的偏移量

offsetWidth 自身宽度

offsetHeight 自身高度

事件监听器

添加 addEventListener

element.addEventListener('事件名',function(){
​
},false)//参数1  事件名 参数2 方法 参数3 是否捕捉 默认false 为冒泡

删除 removeEventListener

element.removeEventListener('事件名',function(){
​
})//如果里面的参数2为一个function声明 那么将不能删除  建议抽取这个function

获取样式(元素样式)

window.element.getComputeStyle()//获取样式

window.getComputedStyle(元素,null)//第一个参数为元素 第二个参数为null 也可以省略
//兼容写法
window.getComputedStyle?var style=window.getComputedStyle():window.currentStyle

事件委托机制

主要是将事件委托给父元素,在父元素内使用target进行判断当前点击的是哪个元素再做相关操作

//利用事件委托机制给ul添加
var box = document.getElementById('box')
box.onclick=function(e){
//通过e.target找到你点击的目标元素  来进行操作
console.log(e.target.innerText)//目标元素
}

拖拽的实现

主要运用的是onmousedown onmousemove onmouseup