JavaScript 事件（下）

事件（Event）

1.事件的绑定
2.事件的传播
3.常用事件

1.事件的绑定

addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

这个方法不支持IE8及以下的浏览器

btn01.addEventListener("click",function(){  alert(1);
},false);  btn01.addEventListener("click",function(){  alert(2);
},false);

attachEvent()

在IE8中可以使用attachEvent()来绑定事件
参数：
1.事件的字符串，要on
2.回调函数

这个方法也可以同时为一个事件绑定多个处理函数，
不同的是它是后绑定先执行，执行顺序和addEventListener()相反

btn01.attachEvent("onclick",function(){
alert(1);
});  btn01.attachEvent("onclick",function(){
alert(2);
});

//定义一个函数，用来为指定元素绑定响应函数
/*  * addEventListener()中的this，是绑定事件的对象  * attachEvent()中的this，是window  *  需要统一两个方法this  */
/*  * 参数：  *     obj 要绑定事件的对象  *     eventStr 事件的字符串(不要on)  *  callback 回调函数  */
function bind(obj , eventStr , callback){  if(obj.addEventListener){  //大部分浏览器兼容的方式  obj.addEventListener(eventStr , callback , false);  }else{  /*  * this是谁由调用方式决定  * callback.call(obj)  */  //IE8及以下  obj.attachEvent("on"+eventStr , function(){  //在匿名函数中调用回调函数  callback.call(obj);  });  }
}

2.事件的传播

关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
然后在向内传播给后代元素
W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

IE8及以下的浏览器中没有捕获阶段

3.常用事件

鼠标事件
拖拽事件

<!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <title></title>
<style type="text/css">  #box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}  #box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;  left: 200px;
top: 200px;
}  </style>  <script type="text/javascript">  window.onload = function(){  /*  * 拖拽box1元素  *  - 拖拽的流程  *        1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown  *         2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove  *      3.当鼠标松开时，被拖拽元素固定在当前位置    onmouseup  */  //获取box1  var box1 = document.getElementById("box1");  var box2 = document.getElementById("box2");  var img1 = document.getElementById("img1");  //开启box1的拖拽  drag(box1);  //开启box2的  drag(box2);  drag(img1);  };  /*  * 提取一个专门用来设置拖拽的函数  * 参数：开启拖拽的元素  */
function drag(obj){  //当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown  obj.onmousedown = function(event){  //设置box1捕获所有鼠标按下的事件  /*  * setCapture()  *  - 只有IE支持，但是在火狐中调用时不会报错，  *        而如果使用chrome调用，会报错  */  /*if(box1.setCapture){  box1.setCapture();  }*/  obj.setCapture && obj.setCapture();  event = event || window.event;  //div的偏移量 鼠标.clentX - 元素.offsetLeft  //div的偏移量 鼠标.clentY - 元素.offsetTop  var ol = event.clientX - obj.offsetLeft;  var ot = event.clientY - obj.offsetTop;  //为document绑定一个onmousemove事件  document.onmousemove = function(event){  event = event || window.event;  //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove  //获取鼠标的坐标  var left = event.clientX - ol;  var top = event.clientY - ot;  //修改box1的位置  obj.style.left = left+"px";  obj.style.top = top+"px";  };  //为document绑定一个鼠标松开事件  document.onmouseup = function(){  //当鼠标松开时，被拖拽元素固定在当前位置    onmouseup  //取消document的onmousemove事件  document.onmousemove = null;  //取消document的onmouseup事件  document.onmouseup = null;  //当鼠标松开时，取消对事件的捕获  obj.releaseCapture && obj.releaseCapture();  };  /*
* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
*   此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
*   如果不希望发生这个行为，则可以通过return false来取消默认行为
*
* 但是这招对IE8不起作用
*/  return false;  };
}  </script>
</head>
<body>  我是一段文字  <div id="box1"></div>  <div id="box2"></div>  <img src="img/an.jpg" id="img1" style="position: absolute;"/>  </body>
</html>

滚轮事件：

onwheel都支持

<!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <title></title>
<style type="text/css">  #box1{
width: 100px;
height: 100px;
background-color: red;
}  </style>
<script type="text/javascript">  window.onload = function(){  //获取id为box1的div  var box1 = document.getElementById("box1");  //为box1绑定一个鼠标滚轮滚动的事件  /*  * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，  *  但是火狐不支持该属性  *   * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件  *    注意该事件需要通过addEventListener()函数来绑定  */  box1.onmousewheel = function(event){  event = event || window.event;  //event.wheelDelta 可以获取鼠标滚轮滚动的方向  //向上滚 120   向下滚 -120  //wheelDelta这个值我们不看大小，只看正负  //alert(event.wheelDelta);  //wheelDelta这个属性火狐中不支持  //在火狐中使用event.detail来获取滚动的方向  //向上滚 -3  向下滚 3  //alert(event.detail);  /*  * 当鼠标滚轮向下滚动时，box1变长  *   当滚轮向上滚动时，box1变短  */  //判断鼠标滚轮滚动的方向  if(event.wheelDelta > 0 || event.detail < 0){  //向上滚，box1变短  box1.style.height = box1.clientHeight - 10 + "px";  }else{  //向下滚，box1变长  box1.style.height = box1.clientHeight + 10 + "px";  }  /*  * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false  * 需要使用event来取消默认行为event.preventDefault();  * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错  */  event.preventDefault && event.preventDefault();  /*  * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，  * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为  */  return false;  };  //为火狐绑定滚轮事件  bind(box1,"DOMMouseScroll",box1.onmousewheel);  };  function bind(obj , eventStr , callback){  if(obj.addEventListener){  //大部分浏览器兼容的方式  obj.addEventListener(eventStr , callback , false);  }else{  /*  * this是谁由调用方式决定  * callback.call(obj)  */  //IE8及以下  obj.attachEvent("on"+eventStr , function(){  //在匿名函数中调用回调函数  callback.call(obj);  });  }
}  </script>
</head>
<body style="height: 2000px;">  <div id="box1"></div>  </body>
</html>

键盘事件
键盘事件：
onkeydown
按键被按下
对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。
onkeyup
按键被松开

键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

keyCode

可以通过keyCode来获取按键的编码
通过它可以判断哪个按键被按下
除了keyCode，事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
这个三个用来判断alt ctrl 和 shift是否被按下
如果按下则返回true，否则返回false

//console.log(event.keyCode);  //判断一个y是否被按下
//判断y和ctrl是否同时被按下
if(event.keyCode === 89 && event.ctrlKey){  console.log("ctrl和y都被按下了");
}

input.onkeydown = function(event) {  event = event || window.event;  //数字 48 - 57  //使文本框中不能输入数字  if(event.keyCode >= 48 && event.keyCode <= 57) {  //在文本框中输入内容，属于onkeydown的默认行为  //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中  return false;  }
};