Javascript事件

事件介绍

---

事件介绍：

        当我们点击一个按钮的时候，会弹出一个对话框。

        在JavaScript中，“点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事

事件三要素

        事件源——触发事件的元素 -> 如：按钮

        事件类型——事件如何触发，点击，双击，移动 ... 如：click 点击事件

        事件处理函数——事件做什么

事件对象 

---

1.处理事件，与事件相关的

2.当触发事件，自动生成一个事件对象

        window--打开浏览器窗口生成window对象

3.获取事件对象

        在事件处理函数中  获取名为event

        更改事件对象名

                事件处理函数定义一个形参，接收事件对象

4.事件对象兼容性

        非IE浏览器与 IE浏览器

        兼容写法

element.onclick = function(e){
    e = e || window.event // 兼容写法
    // 接着写自己的代码
}

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

---

每一个点击事件的坐标点都不是一对，因为要有一个相对的坐标系

        1.相对事件源（你点击的元素）offsetX,soffsetY

        2.相对与浏览器窗口（clientX,clientY）

        3.相对与页面（pageX,pageY）

常见的事件 

---

大致分为几类，浏览器事件/鼠标事件/键盘事件/表单事件/触摸事件

具体用法 自己去搜，懒得写

事件绑定方式 

---

事件属性

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

                <input type = "button"  onclick = "alertMessage()"  value = "按钮"/>

事件绑定

        缺点：只能给一个元素注册一个事件，绑定一个事件，后一个会覆盖前一个

button.onclick = function(){
    console('我是第一个事件')
}
button.onclick = function(){
    console.log('我是第二个事件')
}
// 当你点击的时候，只会执行第二个，第一个就没有了

事件监听

        addEventListener : 非 IE 7 8 下使用

         attachEvent ：IE 7 8 下使用

         两个方式的区别

​​​​​​​​​​​​​​

事件的执行机制 

---

事件的传播        

        当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件

        注意：传播过程中只会传播同类事件，只会从点击元素开始按照html的结构逐层向上元素的事件会被触发，内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发

事件传播方向

        目标：你是点击在那个元素身上了，那么这个事件的  目标  就是什么

        事件冒泡：就是从事件   目标  的事件处理函数开始，依次向外，直到window的事件处理函数触发，也就是从下向上的执行事件处理函数

        事件捕获：就是从window的事件处理函数开始，依次向内，只要事件  目标  的事件处理函数执行，也就是从上向下的执行事件处理函数

        实现：事件捕获和事件冒泡

                                addEventListener的第三个参数决定了是事件捕获还是事件冒泡

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

                                false：表示注册的事件在冒泡阶段触发——默认值

事件处理三个阶段

        事件的处理过程主要有三个阶段：捕获阶段，目标阶段，冒泡阶段

        W3C ： 任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达事件源，再从事件源向上进行事件捕获（事件冒泡）。

        标准浏览器：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低版本

        兼容写法

if(e.stopPropagation){
    e.stopPropagation()
}else{
     e.cancelBubble = true
}
// 或者
e.stopPropagation?e.stopPropagation():e.cancelBubble = true

事件委托

        

         为什么要用事件委托

         事件委托的好处

                减少了事件绑定的数量

                对后来动态创建的元素依然有效

                解决动态添加的元素节点无法绑定事件的问题

                减少事件的冗余绑定，节约了事件资源

        缺点：

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

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

                理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托

                把所有事件都用代理就可能会出现事件误判

默认行为

---

比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面

阻止默认行为

        两个方法来阻止默认事件

                e.preventDefault()  =>  非IE使用

                e.returnValue = false  =>  IE使用

        兼容写法