事件的组成
- 示例代码
obox.onclick = function(){ console.log("123") }
- 组成
- 事件源 绑定事件的元素 obox
- 绑定事件的方式 赋值式
- 事件类型 click
- 赋值 = 赋值式绑定的标志
- 数件处理函数 function(){…},触发指定行为时要做的事情
- 事件目标 触发事件的元素
- 隐藏信息 事件对象
- 记录事件发生时产生的信息
- 默认隐藏,需要手动获取
获取事件对象
- 通过形参获取
obox.onclick = function(a){ console.log(a) }
- 通过window获取
- window.event
- 兼容低版本IE
- 兼容写法
- var e = a || window.event
- 事件对象的子对象
- 相对于当前触发事件的元素的点击位置
- .offsetX .offsetY
- 相对于浏览器可视区域的点击位置
- .clientX .clientY
- 相对于页面的坐标
- .pageX .pageY
- 相对于显示器的坐标
- .screenX .screenY
- 相对于当前触发事件的元素的点击位置
键盘事件
- 键盘事件只能被获取焦点的元素触发
- 主动失去焦点 .blur()
- 通过事件对象去找键盘事件按下的键是什么
- 事件对象.keyCode
- 输出内容是ASCII码
- 特殊按键的状态
- .ctrlKey
- .shiftKey
- .altKey
- .metaKey win键,IE不支持
事件流
在js中,事件并不是绑定了才存在,所有的事件都是已经被系统绑定好的,只是没有事件处理函数
- 事件冒泡
- 一个元素的事件被触发后,会依次向上触发所有父元素的相同事件 从里往外触发
- 事件冒泡是一种现象,根据需要有时候需要阻止事件冒泡
- 阻止事件冒泡
- 事件所在的对象.event里的cancelBubble属性,属性值为true时取消冒泡兼容IE
- 所在对象.stopPropagation()
- 兼容问题的解决办法
利用了if内对undefined的隐式转换(false)if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; }
- 事件捕获
- 一个元素的事件被触发后,会从根元素依次向内触发所有关联子元素的相同事件 从外向内触发
- 不会主动触发,IE浏览器没有捕获
- 如果要实现事件捕获,需要配合监听式绑定 IE不支持
- 事件流的执行顺序
捕获–>事件目标–>冒泡
绑定事件的方式
赋值式绑定
-
- DOM0级绑定
- 绑定方式
- 元素.onclick = function(){}
- 一个元素相同事件无法绑定多个事件处理函数,因为赋值会覆盖
- 删除方式
- 利用赋值覆盖
- 元素.onclick = null;
监听式绑定
-
- DOM2级绑定
- 绑定方式
- 元素.addEventListener(1,2,3)
- 参数1 “事件类型”
- 参数2 事件执行函数
- 参数3 布尔值,true为捕获,false为冒泡
- 可以重复绑定,不会覆盖
- 元素.addEventListener(1,2,3)
- 删除事件处理函数的方法
- 元素.removeEventListener(1,2,3)
- 参数1 要删除的事件类型
- 参数2 要删除的事件处理函数
- 参数3 布尔值
- 需要找到同一个函数才能删除,可以给函数起名字方便删除
- 元素.removeEventListener(1,2,3)
- IE不支持
默认事件
-
- 没有主动写,系统默认存在的事件
- 阻止方式
- e.returnValue = false
- e.preventDefault()
事件委托
-
- 将多个子元素的相同事件利用事件冒泡委托给父元素,通过事件目标找到真正触发事件的子元素,完成事件处理的过程,叫做事件委托
- 事件委托的好处
- 节省内存
- 可以给页面上暂时不存在的元素绑定事件(给动态的HTML绑定)
事件源和事件目标
-
- 事件源 绑定事件的元素 通过this拿到
- 事件目标 触发事件的元素 可以通过事件对象拿到
- var target = e.target || e.srcElement