定义
事件就是用户或浏览器自身执行的某种动作,click、load、mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序,click的事件处理程序就是onclick,load事件处理程序就是onload
三种方式
1、Html事件处理程序
<input type="button" value="Click me" onclick="alert(clicked)" />
在HTML中指定事件处理程序有两个缺点,一是存在时间差,如果页面已经出现了HTML元素,但是js还没加载完,这时候就会报错。还有就是会造成js代码与HTML代码耦合。
2、将一个函数赋值给一个事件处理程序属性
var btn = document.getElementById('mybtn');
btn.onclick = function () {
alert(this.id); //mybtn
}
可以使用 btn.onclick = null取消
3、添加事件监听
addEventListener()和 removeEventListener()。
所有DOM节点都包含这两个方法,并且它们都接收三个参数,要处理的事件名、事件处理函数、一个布尔值。最后一个参数如果是true,表示在捕获阶段调用,如果是false,表示在冒泡阶段调用。
事件流
同时点击多个元素时的事件触发顺序
事件流包含三个阶段,事件捕获阶段、处于目标阶段和事件冒泡阶段。
<div id="calldiv">
<p id="callp">
<span id="callspan">
sss
</span>
</p>
</div>
var mydiv = document.getElementById('calldiv');
var myp = document.getElementById('callp');
var myspan = document.getElementById('callspan');
mydiv.addEventListener('click', calldiv, true);
myp.addEventListener('click', callp, true);
myspan.addEventListener('click', callspan, true);
function calldiv() {
alert('div');
}
function callp() {
alert('p')
}
function callspan() {
alert('span')
}
事件委托:也称事件代理 就是利用冒泡的原理 把加事件加到父级上,触发执行效果
事件对象
绑定的函数会默认传入一个事件对象,事件对象的currentTarget == this
在元素标签中用onclick等绑定的事件没有事件对象,this == window
event.preventDefault():取消事件对象的默认动作。
event.stopPropagation()/ event.cancelBubble = true:阻止事件传播。
事件
事件可以是用户行为,也可以是浏览器行为
用户行为
鼠标事件
click:单击事件。
dblclick:双击事件。
mousedown:按下鼠标键时触发。
mouseup:释放按下的鼠标键时触发。
mousemove:鼠标移动事件。
mouseover:移入事件。
mouseout:移出事件。
mouseenter:移入事件。
mouseleave:移出事件。
contextmenu:右键事件。
键盘事件
keydown:按键按下
keyup:按键抬起
keypress:按键按下抬起
HTML事件
load:文档加载完成
select:被选中的时候
change:内容被改变
focus:得到光标
resize:窗口尺寸变化
scroll:滚动条移动
表单事件
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发
onfocus 元素获取焦点时触发
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
oninput 元素获取用户输入时触发
onreset 表单重置时触发
onsearch 用户向搜索域输入文本时触发 ( <input="search">)
onselect 用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit 表单提交时触发
浏览器行为
onload 页面加载完成后触发
ononline 该事件在浏览器开始在线工作时触发。
onoffline 该事件在浏览器开始离线工作时触发。
onstorage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发
onwheel 该事件在鼠标滚轮在元素上下滚动时触发
transitionend 该事件在 CSS 完成过渡后触发。
animationend 该事件在 CSS 动画结束播放时触发
animationiteration 该事件在 CSS 动画重复播放时触发
animationstart 该事件在 CSS 动画开始播放时触发