-
事件绑定
- dom0级事件
- 语法：事件源.onclick = function(){}
- dom2级事件
- 标准浏览器语法语法：事件源.addEventListstener('事件类型'，事件处理函数),可以同时给一个事件绑定多个事件处理函数，多个事件处理函数时，顺序绑定顺序执行，至少两个参数
- 低版本语法：事件源.attachEvent('on事件类型'，事件处理函数)，可以同时给一个事件绑定多个事件处理函数，多个事件处理函数时，顺序绑定倒叙执行，只有两个参数
- dom0级事件
-
事件的解绑
- 解绑0级事件
- 因为赋值的行为，所以直接再次赋值伪null就把之前的事件处理函数覆盖了
- 绑定事件
- div.onclick =function(){console.log('hello world')}
- 解绑
- btn.onclick = function(){//要给div解绑0级事件 div.onclick = null}
- 解绑2级事件
- removeEventListener('事件类型'，要解绑的事件处理函数) 。如果想解绑事件，在绑定事件的时候，一定要把函数单独书写成一个具名函数的形式，一函数名的形式解绑事件处理函数
- 绑定事件
- cliclHandler()表示把函数执行掉
- clickHandler 表示一个函数的地址
- div.addEventListener('click',clickHandler)
- btn.onclick = function(){//给div解绑dom2级事件 div。removeEventListener('click',clickHandler)}
- 向一个事件类型身上绑定多个事件处理函数的时候
- click：[事件处理函数1，事件处理函数2，事件处理函数3]，当行为触发时，找到对应的这个数组，遍历循环，依次执行
- detachEvent('on事件类型'，要解绑的事件)
- function clickHandler(){console.log('hello world')}
- div.attachEvent('onclick',clickHandler)
- btn.onclick = function(){//解绑div的dom2级事件 div.detachEvent('onclick',clickHandler) console.log('我执行了')}
- removeEventListener('事件类型'，要解绑的事件处理函数) 。如果想解绑事件，在绑定事件的时候，一定要把函数单独书写成一个具名函数的形式，一函数名的形式解绑事件处理函数
- 解绑0级事件
-
事件对象。当一个事件触发的时候，对本次事件的描述
- 兼容写法：e = e||window.event
- on(div,'click',function(e){//处理事件兼容 e = e||window.event console.log(e) })
-
鼠标事件。
- 按下的按键。事件对象中有一个叫做button的属性，它来表示你按下的时哪一个键，0表示左键，1表示滚轮键，2表示右键 *
- 光标的坐标
- clientX和clientY，距离可视窗口左上角的距离
- pageX和pageY，光标距离文档流左上角的位置
- offsetX和offsetY,光标触发事件的元素
- 左键单击
- 语法：元素.onclick = function(){}
- 双击事件 元素.ondblclick = function(){}
- 右键事件 元素.oncontextmenu = function(){}
- 鼠标按下事件 元素.onmousedown = function(){}
- 鼠标抬起事件 元素.onmouseup = fucntion(){}
- 鼠标移入事件 元素.onmouseover = function(){}移入元素盒子和移入元素都可以触发
- 鼠标移出事件 元素.onmouseout = function(){}移出元素和元素盒子都可以触发
- 鼠标移动事件 元素.onmousemove = function(){}
- 鼠标移入事件2 元素.onmouseenter = function(){}只在移入元素时触发
- 鼠标移出事件2 元素onmouseleave = function(){} 只在移入元素时触发
-
键盘事件（docoment.on键盘事件的事件类型 = function(){}）
- 键盘抬起事件 document.onkeyup = function(){}
- 键盘按下事件 document.onkeydown = function (){}
- 键盘按下抬起事件 document.onkeypress = function (){}
-
表单事件
- 获得焦点事件 表单元素.onfocus = function(){}
- 失去焦点事件 表单元素.onblur = fucntion(){}
- 文本框内容改变事件 表单元素.onchange = function (){}
- 文本框输入内容事件 表单元素.oninput = function(){}
-
事件传播
- 在触发子元素的事件时，会将行为传播给父级的同类事件，在传递行为时，会将行为一直向上传递
- 阻止事件传播：元素.stopPropagetion()
-
目标冒泡捕获
- 冒泡: 事件传播时, 从目标开始传播, 一直到到父级, body...window
- 捕获: 从最顶层开始, 逐层向下传递, 一直到 目标
- addEventListener 第三个参数 默认值 为 false 代表传播方式 为 冒泡如果想改变传播方式为 捕获, 那么需要 将第三个参数传递为 true
- myBody.addEventListener('click', function () { console.log('触发了 body 的点击事件') }, true)
-
事件委托。e.target: 触发事件的事件源
- 为什么要用事件委托 动态的添加了 li 时, 新加的li没有绑定上事件, 需要动态添加完成后重新绑定事件, 这样操作比较麻烦 所以此时可以利用 事件委托
-
阻止默认事件
- 点击了 a 标签, 但是因为有 return false 所以默认的跳转功能被拦截
- 通过事件对象拦截 元素.preventDefault() 拦截之后, 取消了 a标签的默认跳转功能
