1.事件
-
什么是事件 * 一个事件的组成 * 事件源 * 事件类型 * 事件触发函数
-
事件分类： * 浏览器事件(onload等) * 鼠标事件(onclick等) * 键盘事件 * 表单事件 * 触摸事件
-
鼠标事件：
js var box = document.getElementsByClassName('box')[0] box.onclick = function(){ console.log('触发单机事件') } box.onmouseover = function(){ console.log('鼠标移入事件') } box.onmouseout = function(){ console.log('鼠标移出事件') } box.onmouseenter = function(){ // 移动到子元素不会触发 console.log('鼠标移入事件') } box.onmouseleave = function(){ // 移动到子元素不会触发 console.log('鼠标移出事件') } -
键盘事件 // 了解即可 * 注：键盘事件只能绑定给window或者输入框
js var inp = document.querySelector('input') inp.onkeydown = function(){ console.log('按下了某个按键') } inp.onkeyup = function(){ console.log('抬起了某个按键') } -
表单事件 // 了解即可
js var inp = document.querySelector('input') inp.onfocus = function(){ console.log('输入框获取焦点时会触发') } inp.onblur = function(){ console.log('输入框失去焦点时会触发') } inp.onchange = function(){ console.log('输入框内容更改后触发') // 改变内容并且失去焦点会触发 } inp.oninput = function(){ console.log('输入时会触发') // 输入内容就会触发 } -
事件对象： * 含义：触发一个事件后对这个事件的描述信息 * 每一个事件都有一些事件描述信息，我们吧这个事件描述信息叫做事件对象
js window.event // 浏览器提供的黑盒子，存在兼容性问题只有低版本的IE浏览器可以用（这种方法了解即可）* 每一个事件处理函数都有一个默认的参数js var a = b.onclick('写一个任意的数'/event){ // 起什么名字都可以 console.log('这个参数'/event) event = event || window.event // 兼容性写法，了解即可 console.log(event) // 打印事件 console.log(event.target) // 打印事件源 } -
鼠标的光标信息 * 光标信息有一个相对坐标系，(1.相对于事件源)(2.相对于当前页面)(3.相对于浏览器)
js var box = document.querySelector('#box') box.onclick = function(e){ console.log(e.button) // 获取按键信息，点击的话只有0这个值 console.log(e.offsetX,e.offsetY) // 相对于事件源 console.log(e.clientX,e.clientY) // 相对于浏览器 console.log(e.pageX, e.pageY) // 相对于当前页面 } -
键盘事件的对象 // 不需要背
var inp = document.querySelector('input')
inp.onkeyup = function(e){ // 不需要背
console.log(e.key) // 输入的键
console.log(e) // 会得到一个对象
console.log(e.keyCode) // 会得到这个键对应的编码
}
// 在开发的时候可能会出现组合键，事件对象给我们提供了三个属性altKey,ctrlKey,shiftKey,这三个组合键按下单时候为true，不是的情况为false
inp.onkeyup = function(e){ // 不需要背
console.log(e.altKey) // 按住alt跟一个键会输出true，否则输出false
console.log(e.ctrlKey) // 按住ctrl跟一个键会输出true，否则输出false
console.log(e.shiftKey) // 按住shift跟一个键会输出true，否则输出false
}
- 事件的绑定方式
// 我们现在常用的事件绑定方式是onXXX,问题存在是如果绑定多个事件函数，后续添加的事件会把前面的事件覆盖掉，如果想要给一个元素绑定多个事件，需要使用事件监听的方式
// 事件监听：节点.addEventListener('事件类型(不需要加on)', 事件处理函数, '第三个参数，可以不写')，执行顺序按照你书写的顺序从上往下，适用于非IE7, 8浏览器，日常开发建议绑定一个点击事件即可
// 在IE中需要使用attachEvent('事件类型(需要加on)', 事件处理函数)，执行顺序按照你书写的顺序从下往上来，适用于IE7,8 了解即可
var div = document.getElementsByTagName('div')[0]
div.addEventListener('click', function(){
console.log('我是第一个点击事件')
})
var div = document.getElementsByTagName('div')[0]
div.addEventListener('click', function(){
console.log('我是第二个点击事件')
})
var div = document.getElementsByTagName('div')[0]
div.addEventListener('click', function(){
console.log('我是第三个点击事件')
})
