event事件对象属性
通过type可以获取事件发生的类型
<body>
<div style="width: 256px;height: 256px;background-color: #096;"></div>
<script>
var div=document.getElementsByTagName('div')[0];
div.addEventListener("click",function(event){
event = event || window.event;
console.log(event.type);//click
console.log(event.target);//<div style="width: 256px;height: 256px;background-color: #096;"></div>
//target和this差不多
// target属性 可返回事件的目标节点 这个事件是由谁来触发的
// ie8及以下的兼容
target = event.target || event.srcElement;
},false)
</script>
</body>
event鼠标事件属性
鼠标位置
<script>
document.addEventListener("click",function(){
// 参考对象：屏幕
console.log(event.screenX);
console.log(event.screenY);
// 参考对象：浏览器窗口
console.log(event.clientX);
console.log(event.clientY);
// 参考对象：文档
console.log(event.pageX);
console.log(event.pageY);
},false);
</script>
event键盘事件属性
通过键码值进行操作
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input回车添加</title>
</head>
<body>
<input type="text">
<button>添加</button>
<ol></ol>
<script>
var ipt=document.getElementsByTagName("input")[0];
var btn=document.getElementsByTagName("button")[0];
var ol=document.getElementsByTagName("ol")[0];
//普通的添加方法
// btn.οnclick=function(){
// if(ipt.value==""){
// alert("请输入!!!");
// return false;
// }else{
// ol_li=document.createElement("li");
// ol.appendChild(ol_li);
// ol_li.innerHTML = ipt.value;
// ipt.value = "";
// }
// }
//获取键码值
ipt.addEventListener("keydown",function(event){
// console.log(event.keyCode);
if(event.keyCode==13){
if(ipt.value==""){
alert("请输入!!!");
return false;
}else{
ol_li=document.createElement("li");
ol.appendChild(ol_li);
ol_li.innerHTML = ipt.value;
ipt.value = "";
}
}
},false);
btn.addEventListener("click",function(){
if(ipt.value==""){
alert("请输入!!!");
return false;
}else{
ol_li=document.createElement("li");
ol.appendChild(ol_li);
ol_li.innerHTML = ipt.value;
ipt.value = "";
}
},false);
</script>
</body>
</html>
事件委托
// 事件委托/事件代理
// 官方解释：利用事件冒泡，指定一个事件处理程序，就可以管理某一类的所有事件
// 人话：利用事件冒泡，通过event事件对象找到触发的元素
//利用冒泡bai的原理，把事件加到父级上，触发执行效果
优化页面的效果
<ol>
<li>卡卡西</li>
<li>卡卡西</li>
<li>卡卡西</li>
<li>卡卡西</li>
</ol>
<script>
//普通写法
// var ol=document.getElementsByTagName("ol")[0];
// var ol_li=document.getElementsByTagName("li");
// for(var i=0;i<ol_li.length;i++){
// ol_li[i].οnmοuseοver=function(){
// this.style.backgroundColor="#096";
// }
// ol_li[i].οnmοuseοut=function(){
// this.style.backgroundColor="";
// }
// }
//事件委托
var ol=document.getElementsByTagName("ol")[0];
var ol_li=ol.getElementsByTagName("li");
ol.addEventListener("mouseover",function(event){
event = event||window.event;
target =event.target||event.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.backgroundColor="#096";
}
},false);
ol.addEventListener("mouseout",function(event){
event = event||window.event;
target =event.target||event.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.backgroundColor="";
}
},false);
</script>