JS常见事件

1.常见鼠标事件

(1)

鼠标事件	触发条件
（on)click	点鼠标左键
（on)mouseover	鼠标经过
（on)mouseout	鼠标离开
（on)focus	获得鼠标焦点
(on)blur	失去鼠标焦点
(on)mousemove	鼠标移动
（on)mousedown	鼠标按下
（on)mouseup	鼠标弹起
(on)mouseenter	鼠标指针进入被选元素【没有冒泡】
(on)mouseleave	当鼠标指针离开被选元素【没有冒泡】
(on)dblclick	鼠标双击
(on)dragstart	鼠标【开始】拖动元素/被选择的文本时
(on)dragend	鼠标【结束】拖动元素/被选择的文本（通过释放鼠标按钮/单击escape键）
(on)dragover	鼠标[在可拖动的元素或者被选择的文本【被拖进一个有效的放置目标时】（每几百毫秒）]触发

(a)传统注册事件方式e.g.

【同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数】

element.on 开头的事件=function(){}

(b)事件监听方式注册事件

【同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行】

element.addEventListener(' 没有on的鼠标事件'，function(){})

(c)手动调用事件【不需要鼠标触发】

e.g.1  li.click()  手动调用点击li

e.g.2  input.blur()  手动调用input文本框失去焦点

(2)禁止点鼠标右键后，菜单的显示

document.addEventListener('contextmenu', function (e) { 

e.preventDefault;//阻止默认行为

})

(3)禁止鼠标选中

document.addEventListener('selectstart', function (e) { 

e.preventDefault;//阻止默认行为

})

(4)阻止点击表单的提交按钮之后，页面的跳转 和 表单的提交

方法1：

$('#form1').submit(function(e) {

// 阻止表单的提交和页面的跳转

e.preventDefault()//阻止默认行为

})

方法2：

$('#form1').on('submit', function(e) {

// 阻止表单的提交和页面的跳转

e.preventDefault()//阻止默认行为

})

2.常见键盘事件

键盘事件	触发条件
（on)keyup	某个键盘按键被松开时
(on)keydown	某个键盘按键被按下时
(on)keypress	某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl shift 箭头等

3.其他事件

(1)

事件名称	触发条件
（on)load	等页面内容全部加载完毕（包括图像，脚本文件，CSS文件等）

e.g.

(a)传统注册事件方式

【同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数】

window.onload = function(){};

(b)事件监听方式注册事件

【同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行】

window.addEventListener('load'，function(){})

(2)

事件名称	触发条件
DOMCountentLoaded	仅当DOM加载完成（不包括图像，样式表，flash等）

【图片多的时候适用，ie9以上支持】

e.g.

document.addEventListener('DOMContentLoaded', function () { })

(3)

事件名称	触发条件
（on)scroll	滚动条变化

【要有滚动条，如果是文字溢出盒子，可以CSS中给盒子加overflow：auto;】

e.g.

(a)传统注册事件方式

【同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数】

element.οnscrοll=function(){}

(b)事件监听方式注册事件

【同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行】

element.addEventListener('scroll'，function(){})

(4)

事件名称	触发条件
（on)resize	窗口大小发生像素变化

e.g.

(a)传统注册事件方式

【同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数】

window.οnresize=function(){}

(b)事件监听方式注册事件

【同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行】

window.addEventListener('resize'，function(){})

• window.innerWidth 可以得到当前屏幕的宽度（不写单位）

e.g.JS中 if（window.innerWidth<=800）

(5)

事件名称	触发条件
transitionend	过渡完成

e.g.

ul.addEventListener('transitionend',function(){});

(6)

事件名称	触发条件
(on)change	<textarea>、 text、search、url、tel、email 或 password 类型的 <input> 元素的值发生变化，并且失去焦点（在提提交之前）的时候

e.g.

ul.addEventListener('change',function(){});

(7)

事件名称	触发条件
(on)submit	表单提交时

e.g.1原生JS

ul.addEventListener('submit',function(){});

e.g.2jquery

1.      $('#f1').submit(function () {})

2.      $('#f1').on('submit', function () {})

(8)音频audio/视频vedio的播放play+暂停pause

事件名称	触发条件
（on)play	音频/视频(audio/video)开始播放
(on)pause	音频/视频(audio/video)暂停播放

(9)input输入事件

事件名称	触发条件
（on)input	当一个 <input>, <select>, 或 <textarea> 元素的 value 被修改时

e.g.1原生JS

1.  onplay:

var vid = document.getElementById("myVideo");
vid.onplay = function() {
    alert("视频开始播放");
};

2.  onpause:

var vid = document.getElementById("myVideo");
vid.onpause = function() {
    alert("视频暂停播放");
};

e.g.2vue   html中，用v-on的简写@   

 e.g.v-on：click=“...”  简写是    @click=“...”

@play和@pause

<audio ref='audio' :src='musicUrl' @play="js中axios中的methods中关于play的事件" @pause="js中axios中的methods中关于pause的事件" controls autoplay loop class="myaudio"></audio>

e.g.悦听player（音乐播放器）案例

4.移动端常见事件

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

触屏touch事件	触发条件
touchstart	手指触摸到一个DOM 元素时触发
touchmove	手指在一个DOM 元素上滑动触发
touchend	手指从一个DOM 元素上移开触发