js中的事件

一丶事件类型

1.鼠标事件

click                   左键单击

contextmenu     右键单击

dblclick              双击

mousedown      左键按下

mouseup           左键弹起

mouseover        鼠标放上去(在子元素上也会触发)             mouseout          鼠标离开

mouseenter       鼠标放上去                                                mouseleave      鼠标离开

mousemove       鼠标移动事件                                            mousewheel      鼠标滚轮事件

2.浏览器事件

load      加载

scroll    滚动

resize   大小改变

3.键盘事件

keydown     按下           keypress     敲打(跟keydown一样)

keyup         弹起

4.表单事件

submit      提交表单(给form标签绑定,点击表单域中的提交按钮的时候触发,在跳转前触发)

focus        获取焦点

blur           失去焦点

change     内容改变并失去焦点(改变下拉框选项/单选框选项/复选框状态时发生改变)

input         input的value值改变(input事件在低版本中的IE中不兼容,使用onpropertychange代替)

二丶事件流

事件流:事件从开始触发到执行结束所经历的整个过程

事件流分为3个阶段:

1.捕获阶段:由内向外查找目标元素的过程

2.目标阶段:开始执行目标元素事件函数(触发当前自身的事件)

3.冒泡阶段:由内向外离开目标元素的过程

//目标元素的祖宗标签如果有同类型的事件,会在冒泡阶段执行

三丶事件侦听器(另一种事件绑定方式)

1.绑定事件

语法:  标签.addEventListener(事件类型,函数代码,当前事件是否在别人的捕获阶段执行,默认是false)

同类型事件不能绑定多次 

使用事件侦听器 -- 同类型事件可以绑定多次

2.事件解绑

语法: 标签.removeEventListenter(事件类型,绑定的函数)(解绑与绑定必须是同一个函数,匿名函数不能解绑)

btn.onclick这种绑定方式  - ---  解绑:btn.οnclick=null

四丶事件对象

事件对象包含了事件的类型丶鼠标点击的位置丶在屏幕中和浏览器中的位置.还以其他很多信息

btn.οnclick=function(e){console.log(e);}   (不兼容低版本浏览器)

btn.οnclick=function(e){

         var  ev  = e || window.event

         console.log(ev)

}                       (兼容所有浏览器的写法)           

行内绑定的事件就讲事件对象当作参数传进来且必须是event

1.获取事件类型  (e.type)

2.获取鼠标按键信息 (e.button)     

左键 0   滚轮 1  右键 2

3.获取键盘按键码(e.keyCode)

回车键:13      空格键:  32    上下左右:  38  40  37  39

字母获取的键盘按键码是大写的字母的阿斯克码

数字是数字的阿斯克码

组合键

e.ctrlKey  -布尔值  表示是否是ctrl+其他键在使用

e.shiftKey  - 布尔值   表示是否是shift+其他键在使用

e.altKey - 布尔值  表示是否是alt+其他键在使用

4.阻止事件冒泡

在事件对象中不让它进行事件冒泡   

语法:

e.stopPropagation()  (普通浏览器)

e.cancelBubble = true (低版本的ie浏览器)

5.阻止默认行为

例如a标签 天生就有点击跳转地址行为 不用绑定事件

取消行为方法

e.preventDefault()

低版本ie浏览器  

var e = e  ||  window.event  

e.returnValue = false

通常会在事件函数的最下边写一行代码,就能阻止默认行为

return  false

五丶鼠标位置

1.鼠标相对当前标签的位置:  事件对象.offsetX      事件对象.offsetY

2.鼠标相对浏览器的位置:   事件对象.clientX      事件对象.clientY

3.鼠标相对整个网页的位置:  事件对象.pageX    事件对象.pageY

六丶事件委托

事件委托:子标签委托父标签处理他的事件

精准查找 .target

var lis = document.querySelectorAll('li')

for(var a = 0; a < lis.length; a++) {

    lis[a].onclick = function() {

        console.log(this.innerText);

    }

}

使用事件委托

var ul = document.querySelector('ul')

ul.onclick = function(e) {

    var target = e.target

    // 获取他的标签名

    var tagName = target.tagName

    if(tagName === 'LI') console.log(target.innerText);

}

// 点击按钮就给ul新增一个li

document.querySelector('button').onclick = function() {

    var li = document.createElement('li')

    li.innerText = '5555'

    ul.appendChild(li)

}

总结：

    概念：父标签处理子标签事件

    原理：事件冒泡

    好处：

        1.节约了绑定效率

        2.动态新增的子标签页可以有事件