html中的id与onmouse系列事件知识点

简介：最近做项目一直用vue框架，碰上了一些需要直接操作dom的情况，但是vue是数据驱动的框架，对于dom操作很弱，一个ref还不能操作组件中的dom，最后研究了一番发现dom可以直接操作，而且更简单。真是用多了框架把最原始最强大的方法都丢了。先来几个知识点铺垫然后做两个关于鼠标拖动的例子。

一：重视起来id

以前总是用jq，id都是用来定位元素的，但仅仅这么用就让费id的本质了，id是dom对象的入口，所有写在dom元素中的属性都可以用id来获取；
比如dom中的style属性用

```
```
id.style.width 就能获取到相应的值
```
除了这些添加上去的属性 还有很多方法（回调函数）也可以通过id进行绑定
```
 
#给div绑定了一个点击事件
#也可以在js中这么写
id.onclick = function(){}
```
总结:id是dom元素对象，可获取或者定义dom元素的属性或者方法
#####二：各种位置
在‘id’的回调事件函数中总有个event对象参数，这个对象玄机很深，只说关于位置的两个属性
1.  **event.clientX、event.clientY**
    鼠标相对于[浏览器](http://www.2cto.com/os/liulanqi/)窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

2. **event.offsetX、event.offsetY**
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

3. **id对象的位置参数**
    id.offsetTop对于父元素（position：absolute或relative）上边缘的像素位置
    id.offsetLeft对于父元素（position：absolute或relative）左边缘的像素位置

都是像素为单位的整形数
列：计算div坐标点
```
var baseY = ev.clientY-ev.offsetY;
var baseX = ev.clientX-ev.offsetX;
//或者
var baseY = ev.clientY-id.offsetTop;
var baseX = ev.clientX-id.offsetLeft;
//注 id指的是id那个名字
```
######三：各种id回调事件
1. onmousedown 
    按下鼠标时候会调用该回调函数
2. onmouseup
    松开鼠标时候
3. onmousemove
    鼠标滑动的时候
    该回调函数是个关于过程的函数，在整个鼠标移动的时候该函数一直有效，所以这个函数中的参数event的clientX,clientY会根据实际位置实时改变
4. onmouseout
    鼠标超出元素的时候

######四：实例1 点击拖动实例
```



    
    


    
    

        

            拖动我
        
    





```
#####五:实例2 点击拖动滚动实例
图片在含有滚动条的div里 点击拖动 实现拖动浏览
```



    
    


    

        

            ![](xxxxxx)
        
        
    



```
总结：例1是根据原始坐标计算left和top值 而例2是根据相对坐标计算scrollLeft和scrollTop应该滚动多少 个原理不同但所用知识点完全相同