鼠标事件
属性 | 描述 | DOM |
---|---|---|
onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 | |
ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
onmousedown | 鼠标按钮被按下。 | 2 |
onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
onmouseleave | 当鼠标指针移出元素时触发 | 2 |
onmousemove | 鼠标被移动。 | 2 |
onmouseover | 鼠标移到某元素之上。 | 2 |
onmouseout | 鼠标从某元素移开。 | 2 |
onmouseup | 鼠标按键被松开。 | 2 |
键盘事件
属性 | 描述 | DOM |
---|---|---|
onkeydown | 某个键盘按键被按下。 | 2 |
onkeypress | 某个键盘按键被按下并松开。 | 2 |
onkeyup | 某个键盘按键被松开。 | 2 |
表单事件
属性 | 描述 | DOM |
---|---|---|
onblur | 元素失去焦点时触发 | 2 |
onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
onfocus | 元素获取焦点时触发 | 2 |
oninput | 元素获取用户输入时触发 | 3 |
onreset | 表单重置时触发 | 2 |
onsearch | 用户向搜索域输入文本时触发 ( <input="search">) | |
onselect | 用户选取文本时触发 ( <input> 和 <textarea>) | 2 |
onsubmit | 表单提交时触发 | 2 |
剪贴板事件
属性 | 描述 | DOM |
---|---|---|
oncopy | 该事件在用户拷贝元素内容时触发 | |
oncut | 该事件在用户剪切元素内容时触发 | |
onpaste | 该事件在用户粘贴元素内容时触发 |
拖动事件
事件 | 描述 | DOM |
---|---|---|
ondrag | 该事件在元素正在拖动时触发 | |
ondragend | 该事件在用户完成元素的拖动时触发 | |
ondragenter | 该事件在拖动的元素进入放置目标时触发 | |
ondragleave | 该事件在拖动元素离开放置目标时触发 | |
ondragover | 该事件在拖动元素在放置目标上时触发 | |
ondragstart | 该事件在用户开始拖动元素时触发 | |
ondrop | 该事件在拖动元素放置在目标区域时触发 |
动画事件
事件 | 描述 | DOM |
---|---|---|
animationend | 该事件在 CSS 动画结束播放时触发 | |
animationiteration | 该事件在 CSS 动画重复播放时触发 | |
animationstart | 该事件在 CSS 动画开始播放时触发 |
过渡事件
事件 | 描述 | DOM |
---|---|---|
transitionend | 该事件在 CSS 完成过渡后触发。 |
框架/对象(Frame/Object)事件
属性 | 描述 | DOM |
---|---|---|
onabort | 图像的加载被中断。 ( <object>) | 2 |
onbeforeunload | 该事件在即将离开页面(刷新或关闭)时触发 | 2 |
onerror | 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>) | |
onhashchange | 该事件在当前 URL 的锚部分发生修改时触发。 | |
onload | 一张页面或一幅图像完成加载。 | 2 |
onpageshow | 该事件在用户访问页面时触发 | |
onpagehide | 该事件在用户离开当前网页跳转到另外一个页面时触发 | |
onresize | 窗口或框架被重新调整大小。 | 2 |
onscroll | 当文档被滚动时发生的事件。 | 2 |
onunload | 用户退出页面。 ( <body> 和 <frameset>) | 2 |
Event 对象:
代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
在ie中,event是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的。
所以好多事件函数都是这样写:
mydiv.onclick = function(ev){
if(!ev){ev = window.event;} //这句也可以简写成:ev=window.event||ev;
alert(ev.pageX+”,”+ev.pageY);
}
事件冒泡:
当事件发生后,这个事件就要从里到外开始传播
<BODY onclick="alert('aaa');">
<div onclick="alert('bbb');">
<a href="#" class="cooltip" title="超链接。" onclick="alert('ddd');">提示</a>
</div>
</BODY>
上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。
这就是事件冒泡引起的现象。事件冒 泡的过程是:a --> div --> body 。a冒泡到div冒泡到body。
<!--取消冒泡-->
<a href="#" class="cooltip" title="超链接。" onclick="a_check(this,ev);">提示</a>
function a_check(obj,ev){
alert('ddd');
ev=window.event||ev;
ev.cancelBubble=true;
//或者return false 即阻止了默认的事件行为并停止了事件通过dom向上冒泡。
}
事件委派:
将事件统一绑定给元素共同的祖先元素(后代元素事件触发时,通过冒泡,通过祖先元素的响应函数来处理事件)
这样可以只绑定一次,即可应用到多个元素上
事件的委派利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
event中的target表示的触发事件的对象
使用它对触发事件的元素进行判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function(){
var u1 = document.getElementById("u1");
//点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
//将li添加到ul中
u1.appendChild(li);
};
//获取所有的a
var allA = document.getElementsByTagName("a");
//为ul绑定一个单击响应函数
u1.onclick = function(event){
event = event || window.event;
//如果触发事件的对象是我们期望的元素,则执行否则不执行
if(event.target.className == "link"){
alert("我是ul的单击响应函数");
}
};
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
<li>
<p>我是p元素</p>
</li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
</html>
事件监听
背景:js中,同一个对象无法多次绑定相同的事件
<button id='btn'>点我</button>
<script>
var btn=document.getElementById('btn')
/* 事件不用加on
* 将false改为true,代表在捕获阶段执行
* 不兼容ie8,
btn.addEventListener('click',function(){
alert('***')
},false)
*/
bind(btn,'click',function(){
alert('****')
})
/*兼容方式*/
function bind(obj,eventName,callback){
try{
obj.addEventListener(eventName,callback,false)
}catch(e){
obj.attachEvent('on'+eventName,function(){
//在匿名函数中调用回调函数,并改变this对象为obj
callback.call(obj)
})
}
}
</script>
事件对象
方法 | 描述 | DOM |
---|---|---|
preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 | 2 |
stopPropagation() | 不再派发事件。 | 2 |
通用属性 | 描述 | DOM |
---|---|---|
target | 返回触发此事件的元素(事件的目标节点)。 | 2 |
timeStamp | 返回事件生成的日期和时间。 | 2 |
鼠标/键盘事件属性 | 描述 | DOM |
---|---|---|
altKey | 返回当事件被触发时,"ALT" 是否被按下。 | 2 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 | 2 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 | 2 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 | 2 |
ctrlKey | 返回当事件被触发时,"CTRL" 键是否被按下。 | 2 |
Location | 返回按键在设备上的位置 | 3 |
charCode | 返回onkeypress事件触发键值的字母代码。 | 2 |
key | 在按下按键时返回按键的标识符。 | 3 |
keyCode | 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 | 2 |
which | 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 | 2 |
metaKey | 返回当事件被触发时,"meta" 键是否被按下。 | 2 |
relatedTarget | 返回与事件的目标节点相关的节点。 | 2 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 | 2 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 | 2 |
shiftKey | 返回当事件被触发时,"SHIFT" 键是否被按下。 | 2 |