28-js中的事件绑定

js里面的交互事件绑定

键盘的事件

2. dom.onkeyup=function(){
检查键盘按钮是否按下触发需要执行的函数
}

鼠标的事件

1. dom.onclick=function(){
//   点击该元素  执行的函数
}

---

2. dom.onmousedown=function(){
//鼠标在该元素按下时触发 执行的的函数
}

---

3. dom.onmouseup=function(){
// 鼠标在该元素左键抬起时触发 执行的的函数
}

---

4. dom.onmousemove=function(){
//鼠标在该元素的上移动时触发 执行的函数 
}
//多次触发没移动一次就触发一次

---

5. dom.oncontextmenu=function(){
//鼠标在该元素右键时触发 执行的函数
}

---

鼠标移入移除 第一种

dom.onmouseover=function(){
// 鼠标移入该元素触发 执行的函数
}

dom.onmouseout=function(){
//鼠标移出该元素触发 执行的的函数
}

//鼠标移入移除触发  这个会触冒泡事件！！！

---

鼠标移入移除 第二种

dom.onmouseenter=function(){
// 鼠标移入该元素触发 执行的函数
}

dom.onmouseleave=function(){
//鼠标移出该元素触发 执行的的函数
}

//鼠标移入移除触发这个不会触冒泡事件

---

2. 窗口事件

1.窗口加载事件
window.onload = function(){
当整个窗口页面加载成功后执行的代码
}

---

2.窗口大小事件
window.onresize = function(){
窗口页面大小发生变化时后执行的代码
}

---

3.窗口滑动触发事件（scroll）
window.scroll = function(){
当滚动条滑动时所执行的代码
}

3-1.获取滚动条位置
语法格式：
window.onresize = function(){
var scrollTop = document.documentElement.scrollTop
     console.log(scrollTop);
}
//得到滚动条距离上方的间距
/*
这里的documentElement就便是根元素也就就是HTML标签
得到的数值是页面超出窗口的部分
*/

3-2. scrollTo 控制滚动条的位置

语法格式：
window.scrollTo(X轴的位置 , Y轴的位置)

它也是一个可以写成一个对象（这里的window也可是其他的对象）
一般用来设置返回顶部的操作
window.scrollTo({ 
  top:  , //填写事件触发的时滚动条的位置
  behavior:"smooth" //设置滚动条的方式 smooth丝滑
})

input里面的事件交互

dom.onchange = function(){

//当里面内容发生改变时触发该函数

}

---

dom.oninput = function(){

//输入内容时触发该函数

}

---

dom.onblur = function(){

//输入input框失去焦点时触发该函数

//我们也可以当if语句个input做一个先限定当达到某种条件时取消焦点
        dom.blur()
        因为t它一个对象函数所以需要加（）
}

---

dom.onfocus = function(){

//当input框获取焦点时触发该函数

---

dom.onselecr = function(){

//当鼠标按住拖动选中内容时触发该函数   不经常使用！！！

---

键盘按键的事件

dom.onkeyup = function(){
//当键盘上面的主键盘区域和数字键盘区域的按键抬起时触发

当然还有dom.onkeydown

通过事件对象的信息e.keycode 获取用户点击的是那个按键 返回的是数字

}