事件:发生了一件事
事件处理程序:一个函数,当某件事发生时运行
事件注册: 将一个处理程序绑定在某个事情上 利用on来绑定
DOM 0 每个dom对象只能绑定一个事件和一个事件处理程序
DOM2 每个DOM 对象可以绑定多个事件和多个事件处理程序 执行顺序谁先绑定谁先执行
事件解绑 DOM 在注册事件中给绑定事件类型赋值: undefined和 null
DOM 2 事件removeEventListener('事件类型',需要被移除的处理程序 函数名不加括号);
// DOM 0中的事件注册的方法
btn.onclick=function(){
// 随便打印一句话!
console.log('什么时间,做什么事!');
// btn中的解绑方法 给onclick赋值为 undefined 或者 null
btn.onclick=null;
// console.log(btn.onclick);
}
// 第二种 DOM 2 的添加事件注册方法
btn.addEventListener('click',text);
// 解绑添加的事件注册
btn1.addEventListener('click',function(){
btn.removeEventListener('click',text);
});
function text(){
console.log('搞钱就对了!');
}
事件流:
事件发生时,页面中该元素的父级元素会监听到点击事件
ie:事件应该时冒泡事件(默认) 先触发点击的事件目标然后依次向父级传递 监听
网景:事件应该时捕获出发,最先触发最外面的父级元素的点击事件 让后触发点击目标事件
冒泡事件
捕获事件
事件对象封装了一系列的与事件相关的信息,浏览器封装好了传递给事件
获取:通过事件处理的函数的参数
获取事件对象的兼容问题
ie 兼容的方法: e=e||e.event; 事件的通用对象 e
e.target && e.srcElement 都是指向的事件目标 (事件目标:谁被点击谁就是事件目标)
事件委托
理解就是:在父级元素上添加点击事件,用子元素来点击显示效果在事件处理程序中判断事件目标并进行其它的操作
e.currentFargt与this全等 都是指向的是绑定事件的元素
e.preventDofault() 阻止默认事件
// 首先获取元素的节点
var form=document.forms[0];
var input=document.getElementsByTagName('input')[0];
var btn=document.getElementsByTagName('input')[1];
// console.log(btn);
// 给form表单元素添加事件处理
form.addEventListener('click',function(e){
// 判断如果输入框中没有输入,着阻止默认事件
if(input.value==""){
e.preventDefault();
}
})
// 检测是否可以阻止跳转
btn.addEventListener('click',function(){
console.log(input.Value);
})
e.stopPropagation() 阻止冒泡事件 ,阻止设置元素,他的父级事件触发冒泡事件
// 给按钮添加点击事件 利用循环每个都可以点击
btn[i].addEventListener('click',function(){
console.log('btn');
// for(var j=0;j<btn.length;j++){
// ul.removeChild(li[j]);
// }
// console.log(li[i]);
// console.log(e.target===e.srcElement);
})
// 给a标签添加点击事件
a[i].addEventListener('click',function(e){
console.log('a');
// 给标签添加一个阻止冒泡事件,理解就是不让其事件监听到父级元素 阻断冒泡事件的发生
e.stopPropagation();
})
// 给li添加点击事件
li[i].addEventListener('click',function(){
console.log('li');
})
}
tagName 等同于 nodeName 都是获取元素节点的标签名