学习js第十二天（事件）

JS事件：

事件概念：当我们点击一个按钮时，会弹出一个对话框，在js中‘点击’这个事情就是一个事件，‘弹出对话框’就是在点击事件中做的事情

事件的组成：事件源、事件类型、事件处理函数

事件对象event：每触发一个事件都会生成事件对象，而事件对象也就包含了对事件的描述信息（比如触发一个键盘事件，按的是哪个按钮），

获取事件对象：在事件处理函数的形参位置，默认第一个就是事件对象

div.οnclick=function(e){

        e=e||window.event //兼容性

}

---

点击事件的光标坐标点获取：

offsetX和offsetY:是相对于点击元素的边框内侧开始计算

clientX和clientY:是相对于浏览器窗口计算，不管页面滚动到哪，都是根据窗口来计算

pageX和pageY:是相对于整个页面，不管是否有滚动，都是相对于页面拿到坐标点

---

常见的事件：

浏览器事件：

        load:页面全部资源加载完毕触发

        scroll:浏览器滚动的时候触发

        resize:页面大小事件

鼠标事件：

        click ：点击事件
        dbclick ：双击事件
        contextmenu ：右键单击事件
        mousedown ：鼠标左键按下事件
        mouseup ：鼠标左键抬起事件
        mousemove ：鼠标移动
        mouseover ：鼠标移入事件
        mouseout ：鼠标移出事件
        mouseenter ：鼠标移入事件
        mouseleave ：鼠标移出事件

mouseover与mouseenter区别: 

1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有） ，支持冒泡
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有） ，不支持冒泡

---

 

键盘事件：

         keyup ： 键盘抬起事件
        keydown ： 键盘按下事件
        keypress ： 键盘按下再抬起事件

表单事件：

        change : 表单内容改变事件
        input : 表单内容输入事件
        submit : 表单提交事件

触摸事件：  （移动端）      

        touchstart ： 触摸开始事件
        touchend ： 触摸结束事件
        touchmove ： 触摸移动事件

焦点事件：

        onblur:失去焦点

        onfocus:获取焦点

---

事件绑定方式： 

事件属性：把事件写在标签属性里面

事件绑定：如divEle.οnclick=function(){}

事件监听：

        方式1：语法：元素.addEventListener('事件类型'，事件处理函数，冒泡还是捕获)

                如divEle.addEventListener('click',function(){},false)

        方式2：语法：元素.attachEvent('事件类型'，事件处理函数)

                如：divEle.attachEvent('onclick',function(){})

两个方式的区别：

 

---

事件传播方向： 

事件冒泡：由内向外。从目标事件处理函数开始，依次向外直到window事件处理函数触发

事件捕获：由外向里。从window事件处理函数开始，依次向内直到目标事件处理函数执行

 

在事件监听中，addEventListener的第三个参数就决定了事件是冒泡还是捕获

        true:表示注册事件在捕获阶段触发

        false:表示注册事件在冒泡阶段触发（默认值） 

 

---

事件处理三个阶段：捕获阶段，目标阶段，冒泡阶段

标准浏览器：addEventListener("click",function,"true")方法,若第三参数为true,则采用事件捕获。若为false，则采用事件冒泡。

IE浏览器只支持事件冒泡，不支持事件捕获，所以它不支持addEventListener("click",function,"true")方法,所以ie浏览器使用ele.attachEvent("onclick",doSomething)。

事件传播的阻止方法:

在W3C中，使用stopPropagation()方法。

在IE下使用cancelBubble = true方法。

---

事件目标对象target:

target 这个属性是事件对象里面的属性，表示你点击的目标

当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

这个 target 也不兼容，在 IE 下要使用 srcElement

target和currentTarget属性：

 点击哪个元素时，event.target返回的是点击的元素节点

event.currentTarget返回的是绑定事件的元素

---

阻止事件传播 ：

e.stopPropagation()   标准浏览器
e.cancelBubble=true  IE低版本

兼容写法：e.stopPropagation?e.stopPropagation():e.cancelBubble = true

---

事件委托：把原本需要绑定在子元素身上的响应事件委托给父元素

 事件委托的好处：
        减少了事件绑定的数量；
        对后来动态创建的元素依然有效，
        解决动态添加的元素节点无法绑定事件的问题;
        减少事件的冗余绑定，节约了事件资源。

事件委托缺点：

        事件委托基于冒泡，对于不冒泡的事件不支持。

        层级过多，冒泡过程中，可能会被某层阻止掉。

        理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。

        把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。

---

阻止默认行为：，

有的时候，我们不希望浏览器执行默认事件，比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么而不是直接跳转链接，那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件

两个方法阻止默认事件：e.preventDefault()        非IE使用

                                        e.returnValue=false        IE使用

兼容写法：e.preventDefault ? e.preventDefault() : e.returnValue=false