1. 常用事件表
  2. event
  3. 事件
    1. onload
    2. onclick
    3. oninput
    4. onchange
    5. onscroll
    6. oncontextmenu
    7. onmouseenter 和 onmouseover的区别
    8. onbeforeunload onunload的区别
  4. 绑定事件
    1. addEventListener
    2. removeEventListener
    3. attachEvent detachEvent
  5. 绑定事件
    1. addEventListener
    2. removeEventListener
    3. attachEvent detachEvent
  6. Event
    1. event.clientX | event.clientY
    2. event.target
    3. event.which
    4. event.key

js事件

JavaScript

常用事件表

名称 触发
load 页面(包括CSS样式 图片 JS等资源)完全加载后触发(window可用)
DOMContentLoaded HTML文档被加载后触发,无需等待图片 js CSS资源加载(window和document可用)
beforeunload 窗口被关闭/刷新(可阻止)
unload 文档被卸载后(window)
abort 图像/视频/音频加载被中断
error 文档/图像加载错误
resize 调整窗口大小(window)
scroll 页面滚动(window)
可用document.documentElement.scrollTop获取滚动距离
focusin 获得焦点(冒泡)
focus 获得焦点(不冒泡)
focusout 失去焦点(冒泡)
blur 失去焦点(不冒泡)
mouseover 鼠标移动到元素上(冒泡)
mouseenter 鼠标移动到元素上(不冒泡)
mouseout 鼠标移出元素(冒泡)
mouseleave 鼠标移出元素(不冒泡)
mousedown 鼠标键按下
mouseup 鼠标键松开
click 鼠标单击
dblclick 鼠标双击
mousemove 鼠标移动
contextmenu 调出上下文菜单(鼠标单击右键)
mousewheel 鼠标滚轮滚动(非标准事件)
keydown 键盘任意键被按下/按住
keypress 键盘字符键被按下/按住
keyup 键盘任意键被松开
input 用于input/textarea元素,用户输入时触发
change 元素值发生变化(例如select更改选项,input输入框输入)
submit 提交按钮被点击
reset 重置按钮被点击
copy 用户复制内容
haschange URL参数(#号后的内容)变化时触发(window可用)

event

属性 内容
preventDefault() 阻止默认事件
stopPropagation() 阻止继续捕获/冒泡
stopImmediatePropagation() 阻止继续捕获/冒泡,绑定在同一元素上的其他事件也被阻止
clientX clientY 鼠标坐标(相对于视口)
pageX pageXY 鼠标坐标(相对于视页面)
screenX screenY 鼠标坐标(相对于屏幕)
shiftKey Shift键是否被按下
ctrlKey Ctrl键是否被按下
altKey Alt键是否被按下
metaKey Windows/Cmd键是否被按下
relatedTarget 鼠标从哪个元素移入/移出到哪个元素(仅mouseover mouseout可用)
button 鼠标按下/释放的键,左键:0 滚轮:1 右键:2
detail 短时间内点击次数
wheelDelta 鼠标滚轮滚动,向前滚动返回: wheelDelta120,向后返回wheelDelta-120(mousewheel可用)
注: 120不是指滚动的距离
key 返回按键名或输入字符,例如"Shift" "A"
keyCode keydown/keyup中调用返回按键ASCII码,keypress中调用返回输入文字的ASCII码
charCode 返回按键ASCII码(仅keypress可用,其它事件调用返回0)
which 同keyCode
location 按键所处位置, 默认键盘: 0 左侧键盘: 1 右侧键盘: 2,数字键盘: 3 虚拟键盘: 4 手柄: 5
oldURL 旧URL(hashchange可用)
newURL 新URL(hashchange可用)

事件

onload

也可以在img和script元素上触发onload事件

1
2
3
img.addEventListener('load', function(e){
  console.log('succeful');
});

注: img元素会在添加src属性时开始下载图片,而script元素添加到文档后才开始下载文件

onclick

只能绑定一次,先绑定的会被后绑定的覆盖,不需要去掉事件名前头的"on"
element.onclick = function

document.body.onclick = function(){
    alert(this);
}
//body...

其他事件同上,例如

//鼠标移动时,获取鼠标坐标
window.onmousemove = function(){
    console.log(`${event.clientX},${event.clientY}`)
};

oninput

用于input/textarea元素,当用户输入时触发.

//检测用户输入密码长度,小于5位提示密码不安全
<div class="container-9">
    <input type="password">
    <span></span>
</div>

var input = document.querySelector('.container-9 input');
var span = document.querySelector('.container-9 span');
input.oninput = function(){
    span.innerText = '';
    if (input.value.length < 5) {
        span.innerText = "密码太短"
    } else {
        span.innerText ="密码安全"
    }
}

onchange

当元素值(value)改变时触发,例如radio/checkbox/select/状态改变,input/textarea输入结束
类似oninput,区别是oninput立刻触发,而onchange失去焦点后才触发

onscroll

document.onscroll = function(){
    //获取滚动条到页面顶部的距离
    console.log(window.pageYOffset);
};

可用于向下滚动一定距离后,添加导航条/返回顶部按钮
例如向下滚动100px,修改背景颜色

window.onscroll = function() {myFunction()};
function myFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        document.body.style.background = "yellow";
    }
}

oncontextmenu

当用户单击鼠标右键时激活事件,可用于屏蔽鼠标右键

window.oncontextmenu = function(){
    return false;
}

onmouseenter 和 onmouseover的区别

两个事件都会在鼠标移入元素时激活.
当元素中没有子元素,两个事件所表现的效果是一样的.
如果元素中有子元素,鼠标从元素移动到子元素上,或从子元素移动到另一个子元素时,onmouseover会被多次激活.
而onmouseenter只会在移入元素时激活.
下边的这两个方块分别绑定了onmouseenter和onmouseover,可以把鼠标移动到元素/子元素上观察效果.

0
onmouseenter
0
onmouseover

onbeforeunload onunload的区别

两个事件都会在页面被关闭/刷新时激活,
区别是onbeforeunload可以阻止页面被关闭,而onunload不行

// 当用户关闭页面时,弹出选择框询问是否关闭
window.onbeforeunload = function(){
    // 如需需返回 true/任意字符(空字符串也行),如 return''
    // 只写return或返回false/null不会有任何效果,如 return null
    return true;
}

html5规定忽略onbeforeunload调用函数中的弹窗方法

// 下边的弹窗无效
window.onbeforeunload = function(){
    alert(''); //Blocked alert('') during beforeunload.
}

应慎用onbeforeunload,死循环会导致窗口无法关闭,甚至可能连浏览器都关不了.

// 死循环导致页面失去响应
var counter = 0;
window.onbeforeunload =function(){
    while(true) {
        console.log(counter++);
    }
}

onunload可与ajax结合,备份页面关闭时未保存的数据.

// 关闭页面后修改cookies
window.onunload = function(){
    document.cookie ="test";
}

绑定事件

addEventListener

向元素添加添加事件,可对同一个元素绑定多个事件,不支持ie8及以下浏览器
element.addEventListener(event, function);

var body = document.body;
body.addEventListener('click', function(){alert('')});

事件名应去掉开头的"on",例如

//正确
body.addEventListener('click', function(){alert('')});
//错误
body.addEventListener('onclick', function(){alert('')});

所调用函数中的this指向被绑定元素本身
如下所示,给容器元素绑定click事件,点击容器内子元素,事件仍可正常执行.且this指向容器本身,而非触发事件的子元素.

<div class="contain-1" style="border:1px solid;">
  <div style="width:100px;height:50px;background:yellow;"></div>
</div>

var node = document.querySelector('.contain-1');
node.addEventListener('click', function(event){
    alert(this.classList); // contain-1
})

可利用闭包储存变量

var temp = 1;
document.body.addEventListener('click', (function(){
    var that = temp ;
    return function(){
        alert(that);
    }
})())
var temp =2; 
//1

removeEventListener

移除addEventListener 方法绑定的事件,不支持ie8及以下.
element.removeEventListener(event, function)

var event = () => alert('');
//绑定点击事件
document.body.addEventListener('click', event);
//移出点击事件
document.body.removeEventListener('click', event);

注意 removeEventListener方法无法移除匿名函数
例如向body添加点击事件后尝试移除事件.但无效果,点击页面还是会弹出alert.

document.body.addEventListener('click', function(){alert('')});
document.body.removeEventListener('click', function(){alert('')});

attachEvent detachEvent

类似addEventListener,但只支持ie(edge也不支持)
element.attachEvent(event,function)
可对同一个元素绑定多个事件,需去掉事件名前的"on"

  document.body.attachEvent('onclick', function(){alert('')});

addEventListener中的this指向元素自身,而attachEvent中的this指向全局对象(window)

document.body.attachEvent('onclick', function(){alert(this)}); //window

绑定事件

addEventListener

向元素添加添加事件,可对同一个元素绑定多个事件,不支持ie8及以下浏览器
element.addEventListener(event, function);

var body = document.body;
body.addEventListener('click', function(){alert('')});

事件名应去掉开头的"on",例如

//正确
body.addEventListener('click', function(){alert('')});
//错误
body.addEventListener('onclick', function(){alert('')});

所调用函数中的this指向被绑定元素本身
如下所示,给容器元素绑定click事件,点击容器内子元素,事件仍可正常执行.且this指向容器本身,而非触发事件的子元素.

<div class="contain-1" style="border:1px solid;">
  <div style="width:100px;height:50px;background:yellow;"></div>
</div>

var node = document.querySelector('.contain-1');
node.addEventListener('click', function(event){
    alert(this.classList); // contain-1
})

可利用闭包储存变量

var temp = 1;
document.body.addEventListener('click', (function(){
    var that = temp ;
    return function(){
        alert(that);
    }
})())
var temp =2; 
//1

removeEventListener

移除addEventListener 方法绑定的事件,不支持ie8及以下.
element.removeEventListener(event, function)

var event = () => alert('');
//绑定点击事件
document.body.addEventListener('click', event);
//移出点击事件
document.body.removeEventListener('click', event);

注意 removeEventListener方法无法移除匿名函数
例如向body添加点击事件后尝试移除事件.但无效果,点击页面还是会弹出alert.

document.body.addEventListener('click', function(){alert('')});
document.body.removeEventListener('click', function(){alert('')});

attachEvent detachEvent

类似addEventListener,但只支持ie(edge也不支持)
element.attachEvent(event,function)
可对同一个元素绑定多个事件,需去掉事件名前的"on"

  document.body.attachEvent('onclick', function(){alert('')});

addEventListener中的this指向元素自身,而attachEvent中的this指向全局对象(window)

document.body.attachEvent('onclick', function(){alert(this)}); //window

Event

chrome和ie会默认传入一个event,但firefox不会.例如下代码能在chrome里正常执行,但firefox会报错

window.onclick = function(){
    alert(event.clientX);
}

event.clientX | event.clientY

返回事件触发时的鼠标位置
相对浏览器窗口计算,不考虑页面滚动

document.body.addEventListener('click',  function(event){
    alert(event.clientX);
})

event.target

返回触发事件的元素
父元素内有一50x50px子元素,用鼠标点击子元素,可看到target和this的指向不同元素.

<div class="container-9" style="border:1px solid;width:50px;">
    <div class="child-9" style="background:#aaa;height:50px;"></div>
</div>    

var node = document.querySelector('.container-9');
node.onclick = function(event){
    // target指向触发事件的元素,而this指向绑定事件的元素
    alert('event.target ' + event.target.classList); //"child-9"
    alert('this ' + this.classList); // "container-9"
}

event.which

触发onkeypress事件时,返回按键的unicode code.
触发onkeydown/onkeyup事件时,返回按键的Unicode key code

unicode code和Unicode key code的区别
字符A和a的unicode code值分别为65和97,但Unicode key code都是65.

event.key

触发键盘事件时,返回所按键字符
返回值有两类

  • 单个字符,例如 a A 1 !
  • 多字符,例如 Enter F1