html event_id,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 点击拖动实例

```

点击拖动

拖动我

// box.onclick = function(){

// console.log(box.offsetWidth)

// }

inbox.onmousedown = function(event){

var basex = event.clientX-inbox.offsetLeft; //计算client初始位置x

var basey = event.clientY-inbox.offsetTop; //计算client初始位置y

var maxpointx = basex+(box.offsetWidth-inbox.offsetWidth) //最大值坐标 id.offsetWidth 获取宽度值 可以直接计算

var maxpointy = basey+(box.offsetHeight-inbox.offsetHeight)

// console.log(basex,basey);

// 移动事件

box.onmousemove = function(event){

// 计算边界 防止超出边界

if(event.clientX

posx = basex

}else if(event.clientX>maxpointx){

posx = maxpointx

}else{

posx = event.clientX

}

if(event.clientY

posy = basey

}else if(event.clientY>maxpointy){

posy = maxpointy

}else{

posy = event.clientY

}

var l = posx-basex; //计算clientx 差值

var t = posy-basey; //计算clienty 差值 差值即

inbox.style.left = l+"px";

inbox.style.top = t+"px";

}

}

// 鼠标弹起事件

inbox.onmouseup = function(ev){

box.onmousemove = null;

box.οnmοuseup=null;

}

// 超出事件

box.onmouseout = function(){

box.onmousemove = null;

box.οnmοuseup=null;

}

```

#####五:实例2 点击拖动滚动实例

图片在含有滚动条的div里 点击拖动 实现拖动浏览

```

点击拖动滚动


box.οnmοusedοwn=function(event){

var basex = event.clientX;

var basey = event.clientY;

var scrollLeft = box.scrollLeft;

var scrollTop = box.scrollTop;

box.onmousemove = function(event){

var movex = basex - event.clientX;

var movey = basey - event.clientY ;

box.scrollLeft = scrollLeft+movex;

box.scrollTop = scrollTop+movey;

}

}

box.onmouseup = function(){

box.οnmοusemοve=null;

}

box.onmouseout = function(){

box.οnmοusemοve=null;

}

```

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