JavaScript DOM-事件操作

事件

注册事件

给元素添加事件，为注册事件或者绑定事件

注册事件两种方式

1. 传统方式
2. 监听事件方式

 

事件监听

• addEventListener() 事件监听 (IE9以上)

eventTarget.addEventListener(type, listener, [useCapture])

1. 参数type：            事件类型字符串，不要on 如click，mouseover
2. 参数listener：       事件处理函数，触发的时候要做的事情
3. 参数useCapture： 可选，是一个布尔值，默认false

• attacheEvent() 事件监听 (IE678支持)

evetagrget.attachEvent(eventNameWithOn, callback)

1. 参数eventNameWithOn： 事件类型字符串，不要on 如click，mouseover
2. 参数callback：                   事件处理函数，触发的时候要做的事情

    传统注册事件
    addEventListener  ie9以上
    attachEvent  ie678
    

示例代码

删除事件

• 传统方式

btns.onclick = null

• 方式删除监听事件

eventTarget.removeEventListener(type, listener, [useCapture])

1. 参数type：            事件类型字符串，不要on 如click，mouseover
2. 参数listener：       事件处理函数，触发的时候要做的事情
3. 参数useCapture： 可选，是一个布尔值，默认false

    addEventListener  ie9以上
    attachEvent  ie678
    

示例代码

 

事件冒泡

• onblur，onfocus，onmouseenter，onmouseleave 没有冒泡

dom 事件流，在js代码中

1. 只能执行捕获或者冒泡其中的一个阶段；
2. onclick 和 attachEvent（ie） 只能得到冒泡阶段；
3. 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son；
4. 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html –> document

class="father">
        
class="son">son盒子
    
    

事件捕获代码

class="father">
    
class="son">son盒子

事件冒泡代码

事件对象

• 事件触发发生时会产生事件对象，并且系统会以实参形式传给事件处理函数

    
123
    

示例代码

事件对象属性和方法:

 

e.target和this区别

    
123
    

        
1
        
2
        
3
    
    

示例代码

阻止默认行为

html的一种默认行为

    http://www.baidu.com">百度
    
http://www.baidu.com">
        submit" value="提交" name="sub">
    
    

示例代码

阻止事件冒泡

e.stopPropagation()

    
class="father">
        
class="son">son儿子
    

    

示例代码

事件委托

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

    

        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
    
    

示例代码

常用鼠标事件

鼠标事件对象

示例代码

 

相关代码: https://github.com/1515806183/html-code/tree/master/wapapi-01