Javascript从零基础到精通——事件
程序员文章站
2024-03-16 13:17:10
...
事件
事件是给浏览器定义一个预处理函数,当事件触发的时候,执行函数,这就是事件。
理解事件:
在一个程序中,我们决定做了用户做了事情之后该做什么
事件的原理和hover类似。可以做到:hover做不到的事,:hover只能操作当前的元素,但是事件绑定之后可以选择任何元素。
事件触发三要素:
通过谁触发? 通过什么触发?触发后要做什么?
事件的写法:
w3c标准:事件写在行内,但是因为结构和行为要分离,所以我们一般情况下用JavaScript的方法来绑定事件,只有再极少数情况下,才将事件写在行内。
事件的绑定方法:
浏览器中的节点(对象).on+事件句柄 = function( ){
要干什么?(放在浏览器中,不执行,当事件发生的时候再执行。)
}
例如:
oDiv.onclick=function(){
alert(1)
}
事件对象
当事件被触发的时候会得到一个信息(事件对象),包含了跟事件相关的一些属性和方法的封装(如:事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等),只有事件在触发的时候才会得到。
JS“缺德”定律:事件对象有兼容问题;
兼容写法:
e=e || window.event;
鼠标事件类型
onclick
单击
ondblclick
双击
oncontextmenu
鼠标右键(上下文菜单)
onmousedown
鼠标按下
onmouseup
鼠标抬起
onmouseover
鼠标移入
onmouseout
鼠标移出
onmouseenter
鼠标移入,但是他不会在穿过子元素的时候出发
onmouseleave
鼠标移出,但是他不会在穿过子元素的时候出发
onmousemove
鼠标移动
鼠标事件及方法
e.buttons
返回鼠标点击按键(1左键,2右键,4中键滚轮)
e.offsetX / offsetY 距离点击最小的元素边缘的坐标
获取事件触发最近的盒子(事件源)的坐标
e.clientX / clientY 无论点box的哪个位置,都是固定算到浏览器可视区边缘,不计算滚动部分
获取可视区的坐标(根据浏览器的定位)
e.screenX / screenY 无论浏览器是多大,都是获取到整个屏幕边缘的坐标
获取整个屏幕的坐标
e.pageX / e.pageY 如果没有滚动条或者滚动条在最顶部,那么这组值和client是一样的/有滚动条他是计算包含滚动部分的总值
获取文档的坐标(包含滚动条)
client和page这两对用的最多
键盘事件类型
keydown
键盘按下
keyup
键盘抬起
keypress
键盘敲击
特殊键码:是否按下alt ctrl 和 shift
e.altKey
e.ctrlKey
e.shiftKey
// 获取键盘键码的兼容写法
var code = e.keyCode || e.which
表单事件类型
在单选,多选,下拉菜单给这些元素绑事件一般用change
获取选中的值的时候并不需要取获取option, 直接获取当前select的value属性即可, text取到的是字符串
当option没有value属性的时候获取的就是innerHTML
当option里面有value属性的时候获取到的就是选中option的value值
onfocus
获取焦点
onblur
失去焦点
onsubmit
表单提交
鼠标滚轮事件
scroll
没有滚动条的时候是不会触发的
mousewheel(火狐不兼容)
DOMMouseScroll(兼容火狐)
没有滚动条的时候也会触发
事件默认行为
只有有默认行为的事件才需要写这个, 不同的事件里阻止的是不同的行为
比如说a标签,点击后有跳转动作;
form表单中的submit类型的input有一个默认提交跳转事件;
reset类型的input有重置表单行为。
阻止默认事件:
// , 这种写法要放在函数末尾来阻止默认行为
if (e.preventDefault) {
e.preventDefault();
} else {
return false;
}
事件流
子元素的事件被触发时, 父级也会被触发(冒泡)
一个完整事件流包含: 捕获阶段 --> 目标阶段 --> 冒泡阶段
IE浏览器不认识捕获
冒泡是可以阻止的: 阻止事件从当前元素往外传播
e.stopPropagation();
e.cancelBubble=true; //兼容IE
阻止冒泡事件的兼容写法:
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
事件监听
DOM0级事件处理,是一种赋值方式,是被所有浏览器所支持的,简单易懂容易操作;
DOM2级事件处理是所有DOM节点中的方法,可以重复监听,但是浏览器兼容存在问题;
//DOM0级
oDiv.onclick = function(){}
//DOM2级
function fn(){}
if(window.attachEvent){
// IE
oDiv.attachEvent("onclick", function(){}); // IE只有冒泡阶段,所以没有第三个参数,而且需要加on;
}else{
// 普通浏览器
// 这里的fn不用加括号, 因为fn不是要直接调用, 而是将来事件触发了才会被事件去调用
oDiv.addEventListener( "click", fn,false); // false指冒泡阶段
}
//移除事件监听,第二个参数为必须,移除的事件处理函数
oDiv.removeEventListener( "click",fn)
oDiv.detachEvent("onclick",fn)
事件委托(事件处理)委派
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以处理某一类型的所有事件
使用场景主要用于事件源不确定的情况,可以把事件委托给父级
判断事件源:
e.target || e.srcElement
推荐阅读