offset、事件、拖拽等、

offset、事件、

offsetWidth:占位宽   元素的宽度(包括border和padding)
clientWidth：  可视宽高  (不包括border)
offsetleft： 获取距离具有定位的父级元素的left的值，
             没有定位的父级元素就以浏览器窗口为准

事件

什么是事件：onclick onmouseover onmouseout
           onblur onload等等
事件的组成：@1事件源：  触发的元素（点击的元素）
           @2事件类型：触发的事件类型（onclick...）
           @3事件处理函数：  触发后腰执行的代码
           *其中 函数中this指的是事件源           

事件对象

事件对象： 事件触发时记录的一些列与该事件相关的信息

事件对象的获取： 事件处理函数形参位置的第一个参数位置写e；

相关信息：鼠标点击的左边位置：clientX;clientY
               事件的类型、事件源（target）
 
 function fn（e）{alert（e.offsetX）}  ;
 e为事件对象  offsetX为相对元素本身；

 同理；clientX和clientY相对于浏览器窗口


 相对页面 pageX和pageY

 clientX和pageX的关系和区别：
   @1如果没有滚动条clientX=pageX；
   @2如果有滚动条pageX>clientX


一般  console.log(e.button)//输出为0
             

在window和于在document里鼠标的滑动事件，效果有可能不一样

鼠标的点击事件种类

 odiv.onclick = function(){
            console.log('我被单击了');
        }
        odiv.ondblclick = function(){
            console.log('我被双击了');
        }
        odiv.oncontextmenu = function(){
            console.log('我被右击了');
        }

键盘事件

如何实现组合键盘：
              altKey：按住其他键的同时按住Alt键；
              （按住了Alt键会返回TURE）
              ctrlKey:...............按住ctrl；
              shiftKey.............按住shift



eg：if（Key==13&&ev.shiftKey）{
avr oli=document.querySelector("#li")
oli.innerHTML="哈哈呵呵";
oul.appendChild(oli)}

onchange事件：

onchange事件应用于下拉框    select
        当你先择的内容发生变化时触发
<span>1</span>
<select>
<option value="+">+<option>
<option value="-">-<option>
<option value="*">*<option>
<option value="/">/<option>
</select>
<span>2</span>
<span>结果<span>
<script>
先 var到select
var osole =document.querySelector('#select');
osole.onchange=function(){
console.log(this.value)}


输出的就是+-*/



</script>

事件小练习

@1:onchange和oninput将输入的英文全部转为大写
（str.toUpperCase）
<script>



var oipt=document.querySelector("inpput")
var ospan=document.querySeletor("span");
oipt.oninput=funciton(){
console.log(this.value);
this.value=this.value.toUpCase()
}
ospan.onchange=function(){
console.log(this.value);
this.value=this.value.toUpCase()}



</script>

用onblur实现内容长度在6-10之间，提示正确信息，不在这个
范围提示错误信息
eg： oipt.οnblur=function (){
if(this.value.length>=6&&this.value.length<10)
{ospan.innerHTML="输入正确"；
ospan.style.backgroundColor="green"}
else{ospan。innerHtml=“输入超出范围”;
ospan.style.backgroundColor="red"}
}

给下拉框遍历点击事件

var oitp=document.querySelector("input");

var oul=document.querySelector("ul")

var olis=oul.children
for（var i =0；i<olis.length;i++）{
olis[i].οnclick=function(){
oipt.value=this.innerHTML}
}
//*联想平时百度输出框当你输入的时候下面二级菜单给的提示
   然后你点击提示的内容，内容就会自动复制到输入框里

事件绑定的方式

DOM0级事件绑定方式：元素.on+type=function(){}
缺点：不能给同一个元素的同一个事件多次绑定
优点：兼容性好

DOM二级事件绑定方式：
事件监听法  元素.addEventListener(type,fn,false);
eg:元素.addEventListener("oncilck",function(){},false)
false代表冒泡     ture代表捕获
优点：可以给同一元素的同一个事件进行多次绑定
缺点：兼容性不好，不能支持IE低版本

IE低版本处理方式:元素.attachEvent(on+type,fn);

事件的拖拽

思路：按下 ->在移动->抬起时移动停止；
eg：odiv.οnmοusedοwn=function(e){     //按下
//光标位置距离元素本身的left和top值
 var x=e.clientX-this.offsetLeft;
 
 var y=e.clientY-this.offsetTop;

//鼠标按下移动时元素距离浏览器窗口的宽高，动态值；
document.οnmοusemοve=function(e){   //移动
var newx=e.clientX-x;
var newy=e.clientY-y;
odiv.style.left=newx+"px";
odiv.style.top=newy+"px"
}
//鼠标抬起时
document.οnmοuseup=function(e){
odiv.οnmοusemοve=null;
}

}