1、行间的绑定
- <div id="box" onclick="事件处理函数"></div>
- 特点：方便
- 缺点：不方便维护，不方便封装
2、DOM对象属性的形式绑定
- ele.onclick = function(){}
- 特点：js跟html完全分离，便于封装
- 缺点：同一个DOM对象，同时间只能绑定一个同事件，如果给这个事件绑定多个事件处理函数，只执行最后一个事件处理函数
3、事件监听
-
ele.addEventListener("事件类型"，"事件处理函数"，bool){}
-
事件类型: 字符串类型 要加引号
比如说"onclick"
没有 on 直接写 click -
事件处理函数：函数类型
匿名函数、命名函数、对象(可以直接触发对象的方法) -
bool：布尔值（只有true和false）
可以省略不写，默认为false
true 此事件会触发事件捕获
false 此事件会触发事件冒泡 -
特点：
1、DOM2级 不会跟DOM0级事件冲突，同时存在两个都执行
2、DOM2级可以绑定多个事件函数，不会起冲突
4、第二种绑定事件的函数，也叫DOM 0级绑定
box.onclick = function(){
console.log(1);
}
5、第三种绑定事件的方式，也叫DOM 2级绑定
//匿名函数的绑定
box.addEventListener('click',function(){
console.log(11);
},false)
//命名函数的绑定
function add(){
console.log(111);
}
box.addEventListener('click',add,false)
//命名函数再绑定的时候不要带括号
//只要带上括号，就是函数的调用，直接默认执行
//不带括号，是函数的绑定，只有在被事件触发的时候才执行
6、对象中方法的绑定
var obj = {
name : "娜娜",
age : "20",
say : function(){
console.log("帅气哥哥");
},
handleEvent : function(){
//在对象中可以通过this来使用对象自身的方法和属性
this.say();
console.log(this.name);
}
}
//如果想通过事件监听(DOM2级)的形式来触发对象中的方法
//则这个方法就必须在键值对为 handleEvent:function(){}这个方法中被调用
box.addEventListener('click',obj,false);
7、DOM 2级事件可以随时取消
- 事件移出通过 removeEventListener
- 写法跟addEventListener类似，也有相同的三个参数
- 只能移除命名函数
- 不能移除匿名函数和DOM 0级事件
- 在事件绑定的时候，推荐使用DOM 2级命名函数的形式来绑定事件
//双击box后 移出 box上的单击事件
box1.addEventListener('click',function(){
//先触发双击事件
//然后移出单击事件
box.removeEventListener('click',function(){
console.log("单机事件以及移出");
})
},false)
8、jquery 绑定事件
//jquery 绑定DOM 0级事件
$('#box').on('click',function(){
console.log("DOM 0级 单击事件");
})
//jquery 绑定DOM 2级事件
$('#box').click(function(){
console.log("DOM 2级 单击事件 匿名函数");
})
//同样使用 jquery绑定 DOM 2级事件也有命名函数 和匿名函数
function a(){
console.log("DOM 2级 单击事件 命名函数");
}
$('#box').click(a);
//绑定一个鼠标双击事件
$('#box').dblclick(function(){
console.log("DOM 2级 双击事件");
})
//绑定一个鼠标移入事件
$('#box').mouseover(function(){
console.log("DOM 2级 鼠标移入事件");
})
9、jquery DOM 2级 事件的移除
- jquery 事件移除 使用off("事件类型",方法名)方法
- 如果写上方法名，就会移除指定的方法 $('#box').off('click',a);
- 如果不写方法名，会将这个事件类型全部移除，包括DOM 0级 以及 匿名函数 $('#box').off('click');
- 如果不写方法名，也不写事件类型，移出绑定在DOM上的所有事件，包括DOM 0级事件
$('#box').off();
10、jQuery的事件绑定
- 当绑定事件写在按钮外面的时候，事件不生效
- 因为绑定的时候 还没有生成子元素，按钮被点击后才会生效
- 一般情况下，给当前不存在的标签是无法绑定点击事件的
- 标签只有渲染到页面后，我们才能通过代码获取到并绑定点击事件的
- 在实际的项目中，很多情况下，我们需要在标签被创建前就将事件绑定好
这个时候我们可以使用事件委托
事件委托是给其父元素绑定事件
但是 让这个事件作用在子元素上
$('#box').on('click','.item',function(){
/*
事件委托只能用DOM 0级来写
第一个参数 ：事件类型
第二个参数 ：事件作用的子元素
第三个参数 ： 绑定的事件函数
*/
console.log($(this));
})
网友评论