JavaScript-事件 event对象下

一、Event对象的概念

Event 事件对象的概念

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

二、Event对象

1、Event对象相关属性

event.clientX 当前鼠标的x轴的坐标

event.clientY 当前鼠标的y轴的坐标

对象.clientWidth 当前对象的宽度   不包含左右边框

对象.clientHeight 当前对象的高度  不包含上下边框

对象.offsetWidth  当前对象的宽度 包含左右边框

对象.offsetHeight 当前对象的高度 包含上下边框

对象.offsetLeft  当前层距离左侧边缘距离

对象.offsetTop   当前层到浏览器顶端的距离

event.keyCode 获取键盘码

注意：
获取event的对象需要兼容多种浏览器，现在event的对象的获取基本上就event和window.event两种写法，所以我们一般在使用的时候采用兼容性写法

var event = event||window.event;

2、Event对象相关方法

event.stopPropagation()  阻止事件冒泡的方法
event.preventDefault()  取消事件的默认操作

3、Event对象实例

1 鼠标跟随

鼠标跟随的操作是当鼠标移动的时候，div层跟随着鼠标移动，
原理：当鼠标移动的时候鼠标的坐标一直在改变，于此同时，我们同时修改div层的left值和top值让它跟鼠标的坐标一致，就达到了跟随的效果，
知识点:
1. div设置绝对定位，不然无法移动
2. 鼠标移动事件，获取鼠标的坐标
3. style属性修改div的偏移量即可

2 拖拽

鼠标拖拽:当我们在一个div上按下鼠标，鼠标移动的过程中，div层跟随者我们的鼠标移动，当鼠标松开，div盒子停止运动，再次点击移动，重复上面的运动，这个过程就类似于一个拖拽的效果。
知识点:
1. 鼠标按下事件，鼠标移动事件，鼠标释放事件
2. 获取div盒子的偏移量，以及鼠标异动前后坐标
3. 根据偏移量和坐标计算移动后div的left值和top值

三、Event常见的keyCode码

1、点击展示键盘的keyCode码

    document.onkeydown = function (e) {
        console.log(e.keyCode);
    }

2、留言板点击回车和空格留言

<input type="text" id="user"><br>
<textarea id="content"></textarea><br>
<input type="button" value="发表" onclick="createLi()">

<ul id="uu"></ul>
<script>
    var user = document.getElementById('user');
    var content = document.getElementById('content');
    var uu = document.getElementById('uu');

    function createLi() {
        var li = document.createElement('li');
        li.innerHTML = user.value + ':' + content.value;
        uu.appendChild(li);
    }

    content.onkeydown = function (e) {
        if (e.key == 'Enter') {
            createLi();
            user.value = '';
            content.value = '';
        }
    }
</script>

四、事件绑定

事件绑定的三种方式

事件绑定的三种方式:
DOM0级事件绑定程序:
1)html事件处理程序，直接在html中绑定js的事件，但是这种会导致代码不易读，造成代码耦合性

<button onclick=”add()”>点击</button>
<script type=”text/javascript”>
function add(){
}
</script>


2)先获取绑定的对象，然后在js中直接给对象设置事件属性
<button id=“btn”>点击</button>
<script type=”text/javascript”>
var btn = document.getElementById(“btn”);
btn.onclick = function(){
alert(“点击”);
}
</script>

3)DOM2级事件绑定:
用到的是addEventListener(事件名,函数名)函数来进行调用的,可以使用removeEventListener(事件名,函数名)进行删除，但是不能删除绑定匿名函数的方法

五、事件委托

1、什么是事件委托

事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。

2、事件委托的优点

事件委托，
可以节省资源，减少事件的调用，而且节省代码，减少代码冗余。
随时可以添加子元素，添加的子元素会自动有相应的处理事件。