事件的绑定方式
DOM0级
1. 事件属性方式
2. 赋值式
DOM2级
3. 事件监听
ele.addEventLisitner(事件类型,functiion(){
})
兼容性问题
兼容IE7、8
ele.attachEvent(事件类型,事件处理函数)
注: 事件类型前加'on' onclick
区别:
1. 事件赋值与事件监听 同 事件属性相比,实现了结构与行为分离
2. 事件赋值与事件监听
事件监听方式 后面的事件不会覆盖前面的事件(事件源和事件类型相同)
事件解绑
1. 解绑赋值式绑定事件
btn2.onclick = null
2. 解绑事件监听
btn3.removeEventListener('click',事件处理函数名)
事件目标对象
事件对象
event
事件目标对象
target
当前选中的元素节点
e.target
兼容IE
e.srcElement
var target = e.target || e.srcElement
this关键字: 在事件处理函数中this表示事件源
console.log('this ',this)
事件传播
1. 嵌套的元素, 事件会传播
2. 事件传播方向问题
+ 事件冒泡
从事件目标对象开始 -> window对象结束
由内向外传播的事件方式称为事件冒泡 (默认传播行为)
+ 事件捕获
由外向内传, window对象 -> 事件目标对象
3. 事件监听第三个参数设置true表示事件捕获,默认false表示事件冒泡
4. 阻止事件传播
e.stopPropagation()
兼容ie浏览器
e.cancelBubble = true
e.stopPropagation?e.stopPropagation():e.cancelBubble = true
事件委托
事件代理
现实生活 事件代理
点外买 -> 小哥 -> 你们
放到前台
王老师 代收
软件技术 事件代理
事件代理(委托) 利用 事件冒泡实现
事件委托使用场景
当要给多个元素循环绑定事件的时候可以考虑使用事件委托简化操作
注: 不支持事件冒泡的不能使用 如:焦点事件
好处:
减少了事件绑定的数量;
对后来动态创建的元素依然有效,
解决动态添加的元素节点无法绑定事件的问题
默认行为
1. a标签 默认行为 href执行链接跳转
2. form表单action
3. 右键事件 contextmenu
阻止默认行为
e.preventDefault()
扩展
<a href="javascript:void(0)" >确定</a>
函数
自调用函数
函数定义和调用写在一块
(function(){
// 函数体
})()
封装代码
封装私有变量,独立于全局变量
arguments 对象
=> 函数所有实参的集合
=> 函数体中直接使用
=> 类数组
=> 函数可变参数
this关键字
=> this表示当前对象
=> 在同场景下this表示不同的对象
1. 事件处理函数中的this
this->事件源
//===============================
2. 普通函数中this
this -> window对象
3. 定时器中this
this -> window对象
4. 自调用函数中this
this -> window对象
//===============================
5. 对象方法中的this
Object
var obj = {
name:'jack',
say:function(){
this
}
}
调用该方法引用变量指向的对象