JS事件

1、事件
HTML的事件：是用户和浏览器之间产生行为，这个行为称之为事件
比如：鼠标点击、双击、滑动、滚动等

2、JS的事件有三种模型，
1）内联模型 2）脚本模型 3）DOM2模型

内联模型
1、内联模式支持不支持多参？
2、变参是否支持？

onload 延迟加载/懒加载,
onload 是一个事件，是当文档以及内容（包括引入JS/css）加载完
之后才会触发该事件
一个页面里，一个文档，如果还有其他onload事件，只会执行最后一个，
有且只有一个onload方法

只要有事件，就写到懒加载里，比较安全
标签加载完，才能进行懒加载

鼠标事件
DOM 中事件基本上是 on + 事件名称 两部分组成
onclick onload
onclick 鼠标的单击事件
ondbclick 鼠标的双击事件

div.onmousedown = function(){
console.log(‘鼠标按下’)
}

div.onmouseup = function(){
console.log(‘鼠标弹起’)
}
div.onmouseover = function(){
console.log(‘hover in’)
console.log(‘鼠标进入’)
this.style.backgroundColor = ‘red’
}
div.onmouseout = function(){
console.log(‘hover out’)
console.log(‘鼠标移出’)
this.style.backgroundColor = ‘#f60’
}
div.onmousemove = function(){
console.log(‘鼠标移动’)
}

键盘事件
// 键盘按下
window.onkeydown = function(ev){
console.log(‘key down’)
// console.log(this)
console.log(ev.key) // 打印出按下的键
}
// 键盘长按
window.onkeypress = function(){
console.log(‘key press’)
}
// 键盘弹起window.onkeyup = function(){
console.log(‘key up’)
}

焦点事件
var input_el = document.querySelector(‘input’)
// 焦点事件 focus
input_el.onfocus = function(){
console.log(‘获取焦点’)
}
// 失去焦点
input_el.onblur = function(){
console.log(‘失去焦点’)
if(this.value != ‘’){ // ‘’==false
console.log(this.value)
}else{
this.style.border = ‘1px solid red’
// console.log(this.value)
}
}

    // 获取input 内容发生改变时触发
    // onchange 当文本内容发生改变且失去焦点时才会被触发
    
    // 输出两次
    input_el.onchange = function(){
        console.log(this.value)
    }

    // 失去焦点时获取全部输入内容
    input_el.onselect = function(){
        console.log(this.value)
    }

    // 如何获取 用户动态输入时的文字跟踪
    // 现代浏览器
    // oninput 是现代浏览器用来监听 input的文本内容发生改变
    // 跟踪每一次输入的变化
    
    input_el.oninput = function(){
        console.log(this.value)
        // 如何做到本次输入的和上次输入的有差别
    }

窗口事件
// resize 当窗口大小发生改变时触发
window.onresize = function(){
console.log(this.innerWidth)
}
// scroll 当用户滚动滚动条的元素时触发
window.onscroll = function(){
console.log(‘scroll’)
}

// 为了能做兼容 IE 和主流浏览器 IE必须带window
var e = ev || window.event
// target 就是当前事件所作用在哪个 目标元素上
console.log(arguments,arguments.length)

事件流