js - 玖 、事件

一、单击事件

onclick:  鼠标的单击事件

方式一：  获取元素，在js中给元素绑定

btn.onclick = function(){       

 }

方式二： 定义好函数， 在html标签中 绑定函数

function myClick(){

 }

二、键盘事件

onkeydown:  用户按下键位的时候触发

onkeyup :   用户抬起键位时

onkeypress: 用户按下该键位 再抬起时触发

备注：event对象： 表示事件源本身（我们在使用的时候，以形参的形式来使用，实参由事件本身传递

使用时，一定符合见名知意： 例如： event  ev  evt  e）

event相关：

ev.target :  返回 事件源

ev.button：　返回鼠标被按下的那个键

ev.offsetX :  鼠标在元素上 X轴的位置

ev.clientX: 鼠标 在浏览器可视区域 x轴上的位置(左边距)

ev.clientY: 鼠标 在浏览器可视区域 y轴上的位置(上边距)

ev.keyCode : 返回键盘的编码，以此来确定是哪个键位（keyCode： 键盘编码）

三、事件类型

onload : 当页面(html,图片之类)加载完成后，执行的方法

onblur： 失去焦点

onfocus: 获得焦点

onselect: 选中文本时触发

onchange: 在内容发生改变是触发

onreset: 重置时触发

ondblclick: 双击时触发

onmousedown :  用户在指定元素身上 按下时触发

四、事件监听:

 addEventListener()

参数1 ： 事件类型

参数2 ： 触发事件后执行的函数

参数3 ： 布尔值   默认值是 false 事件冒泡  ；   true 事件捕获

    gf.addEventListener("click",function abc(ev) {

        console.log("3");

    },false);

普通事件绑定和 事件监听的区别：

    1. 普通的只能给元素相同类型的事件绑定一个，如果绑定相同的第二个，会将上一个覆盖事件监听可以给 同一个元素的相同类型事件绑定多个

    2. 事件监听可以控制事件的传播方式(冒泡或捕获)

    3. 事件监听可以通过删除的方法，来取消事件，而普通绑定只能通过 null来取消

五、事件委托

原理：事件冒泡

六、选项卡

for(var j = 0 ; j < but.length; j++){

          but[j].index = j;

          but[j].onclick = function(){

（1.将所有div隐藏）

           for(var i = 0; i < box.length; i++){

                 box[i].style.display = "none";

           }

（2.将指定的元素显示）

                    box[this.index].style.display = "block";

   }

 }