JavaScript事件
JavaScript事件
事件基础
1.绑定事件
- 1.把事件当做HTML元素的属性
<button onclick="code...">
<button onclick="alert('啊')">我是按钮</button>
-
2.把事件当做dom对象的方法
dom.onclick = function(){code....}<button id="btn">你是按钮</button> //获取button元素 var btn = document.getElementById("btn"); //给btn元素绑定事件 btn.onclick = function(){ document.body.style.backgroundColor = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")"; } -
3.事件监听方式
-
addEventListener(eventName,fn,true/false)
-
attachEvent(eventName,fn)
<button id="btn1">它是按钮</button> //获取 btn1 对象 var btn1 = document.getElementById("btn1"); //给btn1绑定事件 btn1.addEventListener("click", function(){ document.body.style.color = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")"; });
事件监听的正规写法
<body>
<h1>事件监听</h1>
<hr>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById('btn');
try{
btn.addEventListener("click",randColor);
}catch (e) {
btn.attachEvent("onclick", randColor);
}//catch (e) 为了兼容IE
//if{}else{}也可以实现效果不过更推荐try{}catch{}
// if(btn.addEventListener){
// btn.addEventListener("click",randColor);
// }else{
// btn.attachEvent("onclick",randColor);
// }
function randColor(){
document.body.style.color = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")";
document.body.style.backgroundColor = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")";
}
</script>
</body>
2.解除事件的绑定
- 1.绑定方式：把事件当做html元素属性/把事件当做dom对象的方法
重新绑定一个空的function,覆盖前面
-
绑定方式 是事件监听方式
-
removeEventListener(event,fn)
-
detachEvent(event,fn)
//获取按钮bth2 var btn2=document.getElementById('btn2'); //给btn btn0 btn1取消绑定 btn2.onclick=function(){ btn.onclick=function(){ }; document.getElementById('btn0').onclick=function(){ }; btn1.removeEventListener("click",randomColor) }
3.this的用法
-
循环给一组元素绑定事件的时候
-
事件作为html元素属性的时候函数调用，传this表示该元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同时给多个元素绑定相同的事件</title> <style> ul{ width: 600px; list-style:none; } li{ margin-top:10px; padding: 20px; border:1px solid #ccc; background:#f5f5f5; } </style> </head> <body> <ul id="myList"> <li>哈哈哈</li> <li>嘿嘿嘿</li> <li>嘻嘻嘻</li> <li>呵呵呵</li> <li>咦咦咦</li> </ul> <script> var lis=document.getElementById('myList').getElementsByTagName('li'); //遍历 for(var i=0;i<=lis.length;i++){ lis[i].onclick=function(){ this.style.backgroundColor="green"; } } </script> </body> </html>
事件类型
1.鼠标事件
-
click 单击
<button onclick="alert('啊，我被单击了')">单击</button> -
dblclick 双击
-
contextmenu 右击
-
mouseover 鼠标放上
-
mouseout 离开
-
mousedown 按下
-
mouseup 抬起
-
mousemove 鼠标移动
2.键盘事件
-
keydown 键盘按键按下
-
keyup 抬起
-
keypress 键盘按键按下，并不是所有的按键都可以触发（只有可以输入字符的按键）
<div id="box"></div> <script> document.onkeypress=function(ev){ var e=ev || window.event; var key=String.fromCharCode(e.keyCode); document.getElementById("box").innerHTML+=key; } </script>
3.文档事件
- load 加载完成
- unload 关闭
- beforeunload 文档关闭
4.表单事件
- submit 提交事件
- reset 表单重置
- blur 失去焦点
- focus 获得焦点
- change 改变
- select input或textarea内容被选中的时候触发
5.图片事件
- abort 图片加载中断
- load 图片加载完成
- error 图片加载错误
6.其他事件
- scroll 滚动事件
- resize 绑定给window,窗口尺寸发生变化
Event对象
Event种类
- mouseEvent
- keyboardEvent
- focusEvent
属性
-
clientX
-
clientY
-
keyCode
-
target 具体触发事件的元素
<script> document.onclick=function(ev){ ev.target.style.backgroundColor="green"; } </script>
event.target的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event.target的应用</title>
<style>
ul{
list-style:none;
width: 600px;
}
li{
border:1px solid #ccc;
padding:20px;
}
li.current{
background:#ccc;
}
</style>
</head>
<body>
<ul id="myList">
<li>小丽丽</li>
<li>小丽丽</li>
<li>小丽丽</li>
<li>小丽丽</li>
<li>小丽丽</li>
<li>小丽丽</li>
</ul>
<hr>
<button onclick="addLi()">添加</button>
<script>
var myList=document.getElementById("myList");
myList.onmouseover=function(ev){
var e=ev || window.event;
var currentEle=e.target;
if(currentEle.tagName === "LI"){
currentEle.className = "current";
}
}
myList.onmouseout=function(ev){
var e=ev || window.event;
var currentEle=e.target;
if(currentEle.tagName === "LI"){
currentEle.className="";
}
}
function addLi(){
//创建元素
var liObj=document.createElement("li");
liObj.innerHTML="我是新的";
myList.appendChild(liObj);
}
</script>
</body>
</html>
方法
- stopPropagation() 阻止冒泡
- preventDefault() 阻止默认动作
事件的冒泡和捕获
- 捕获阶段先找大的后找小的
- 冒泡从小到大（冒泡阶段触发）
- 先捕获后冒泡
