EVENT 事件

一、EVENT  事件

1、什么是事件？

- 一个事件由什么东西组成

  - 触发谁的事件：事件源       某个标签

  - 触发什么事件：事件类型     onclick   点击

  - 触发以后做什么：事件处理函数   写一个函数 执行这个操作

2、事件对象

- 就是你触发了一个事件（点击  双击  拖拽），对该事件的一些描述信息  比如在浏览器的位置  或者点击键盘或者那个按钮   -----对你的触发的事件进行精确描述的

-- 浏览器给了我们一个 **黑盒子**，叫做 `window.event`，就是对事件信息的所有描述

 3、**兼容性问题**

- 在 `IE低版本` 里面这个东西好用，但是在 `高版本IE` 和 `Chrome` 里面不好使了 

 ```javascript

  oDiv.onclick = function (e) {

    e = e || window.event            e为高版本    window.event低版本

    console.log(e.X轴坐标点信息)

    console.log(e.Y轴坐标点信息)

  }

  ```

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

- 例如：

  - 相对事件源（你点击的元素）

  - 相对页面

  - 相对浏览器窗口

①相对于你点击的元素

- `offsetX` 和 `offsetY`

- 是相对于你点击的元素的边框内侧开始计算 (就是你的内容区 0,0)

②相对于浏览器窗口你点击的坐标点

- `clientX` 和 `clientY`

- 是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标（可视窗口的大小）

③相对于页面你点击的坐标点

- `pageX` 和 `pageY`

- 是相对于整个页面的坐标点，不管有没有滚动，都是相对于页面拿到的坐标点

** 注意 **

-offsetWidth：自身宽度+内边距+boderWidth      元素.offsetWidth    该盒子的大小

- clientWidth：自身宽度+内边距       内容+内边距

offsetLeft:

1.没有定位：相对于页面的偏移量      就是外边距的距离

2.有定位：相对于父级的偏移量    相对定位于父盒子的的距离

clientLeft：border-left：边框的宽度

###浏览器事件

- `load` ： 页面全部资源加载完毕

- `scroll` ： 浏览器滚动的时候触发

- `resize`   事件会在窗口或框架被调整大小时发生。

### 鼠标事件

- `click` ：点击事件

- `dblclick` ：双击事件

- `contextmenu` ： 右键单击事件

- `mousedown` ：鼠标左键按下事件

- `mouseup` ：鼠标左键抬起事件

- `mousemove` ：鼠标移动

- `mouseover` ：鼠标移入事件

- `mouseout` ：鼠标移出事件

- `mouseenter` ：鼠标移入事件

- `mouseleave` ：鼠标移出事件

### 键盘事件

- `keyup` ： 键盘抬起事件 

- `keydown` ： 键盘按下事件

- `keypress` ： 键盘按下再抬起事件

- 判断键盘的按键

        // keycode 在最新浏览器标准中废弃了，虽然废弃但是还可以使用

var keycode = event.keyCode || event.which;   // 火狐2.0 需要用event.which来获取keycode

### 组合按键

- 组合案件最主要的就是 `alt` / `shift` / `ctrl` 三个按键

 - `altKey` ：alt 键按下得到 true，否则得到 false

  - `shiftKey` ：shift 键按下得到 true，否则得到 false

  - `ctrlKey` ：ctrl 键按下得到 true，否则得到 false

### 表单事件

- `change` : 表单内容改变事件,失去焦点,并且内容改变的时候触发；

- `input` : 表单内容输入事件

- `focus`聚焦的时候触发事件  focus:福克斯 焦点

- `blur` 失去焦点的时候

### 触摸事件

- `touchstart` ： 触摸开始事件

- `touchend` ： 触摸结束事件

- `touchmove` ： 触摸移动事件

- `transitionend` ：过度结束触发   一个属性的变化

- `onanimationend` ：动画结束

# 事件的绑定方式

- 我们现在给一个注册事件都是使用 `onxxx` 的方式

 - 但是这个方式不是很好，只能给一个元素注册一个事件

### 事件监听

- `addEventListener` :  非 IE 7 8 下使用

- 语法： `元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)`  默认值是false（冒泡） true（捕获）

冒泡的就是从内到外    捕获就是从外到内

①、 阻止事件冒泡

// // stopPropagation ：停止传播；

// // cancelBubble= true;阻止冒泡

### 阻止默认行为

 - `e.preventDefault()` : 非 IE 使用

  - `e.returnValue = false` ：IE 使用

        // boxEle.onclick = function(e){

        //     // 方式一：

        //     // e.stopPropagation();

        //     // 方式二

        //     e.cancelBubble = true;

        //     this.style.background = "black";

        // }

②触发目标e.target 如果是ie8或者以下；e.srcElement

        //    var ulEle =  document.querySelector("ul");

        //    ulEle.addEventListener("click",function(e){

        //         console.log(e.target);

        //    })

        bindEvent(ulEle,"click",function(event){

            var e = event || window.event;

            var target = e.target || e.srcElement;

            console.log(target);

        })

function bindEvent(ele, eventName, fn) {

            // 判断浏览器是否支持 addEventListener方法

            if (window.addEventListener) {

                // 有addEventListener 是chrome浏览器

                ele.addEventListener(eventName, fn);

            } else {

                // ie8或者以下；

                ele.attachEvent("on" + eventName, fn);

            }

        }

- 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行

  - 先打印 `我是第一个事件` 再打印 `我是第二个事件`

  - 注意： **事件类型的时候不要写 on，点击事件就是 click，不是 onclick**

- `attachEvent` ：IE 7 8 下使用

- 语法： `元素.attachEvent('事件类型'， 事件处理函数)`

  - 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行

  - 先打印 `我是第二个事件` 再打印 `我是第一个事件`

  - 注意： **事件类型的时候要写 on，点击事件就行 onclick**

****事件委托***

var ulEle =  document.querySelector("ul");

        ulEle.onclick = function(e){                    、、target = e.target || e.srcElement;

            if(e.target.nodeName=="LI"){

                console.log("点击了li");

            }

        }

获取ul节点的，然后再ul中找到节点name为li的节点

        var btn = document.querySelector("button");

        btn.onclick = function(){

            var liEle = document.createElement("li");

            liEle.innerHTML = "添加的li";

            ulEle.appendChild(liEle);

        }