DOM的重点核心
document object model 文档对象模型
注册事件(绑定事件)
传统注册事件 有一个唯一性的特点。
同一个注册事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数。
事件监听事件 addEventListener(),
1、里面的事件是字符串,必须加引号
2、同一个元素 同一个事件可以添加多个监听器
var divs = document.querySelectorAll('div');
divs[0].addEventListener('click',function(){
alert('我大羲哇');
})
divs[0].addEventListener('click',function(){
alert('哪里痛');
})
删除事件
var divs = document.querySelectorAll('div');
divs[0].addEventListener('click',fn); //这里不能使用匿名函数
function fn(){
alert('wodaxiwa');
divs[0].removeEventListener('click',fn);//这里输入要移除的方法 和 函数
}
DOM事件流
事件按照节点顺序传播,传播的过程叫做事件流
//dom 事件流三个阶段
//1、js只能执行捕获或者冒泡中的一个阶段
//2、onclick 和 attachEvents(ie) 只能得到冒泡阶段。
//3、捕获阶段 如果 addEvenetListener 第三个参数是 true 那么则处于捕获阶段
//document -> html -> body -> father -> son
var son = document.querySelector('#son');
son.addEventListener('click',function(){
alert('son');
},true);
var father = document.querySelector('#father');
father.addEventListener('click',function(){
alert('father');
},true);
//js捕获阶段 如果写false或者不写默认是false
//document <- html <- body <- father <- son
1、js只能执行捕获或者冒泡中的一个阶段
2、onclick 和 attachEvents(ie) 只能得到冒泡阶段。
3、捕获阶段 如果 addEvenetListener 第三个参数是 true 那么则处于捕获阶段
4、document -> html -> body -> father -> son
5、js捕获阶段 如果写false或者不写默认是false
6、有一些事件是没有冒泡的,比如: onblur、onfocus、onmouseenter、onmouseleave
阻止冒泡
e.stopPropagation(); 停止传播冒泡
e.cancelBubble = ture; 兼容标准写法
target 和 this的区别
常见事件对象属性和方法
var div = document.querySelector('div');
div.addEventListener('click',function(e){
console.log(e.target);
console.log(this);
})
e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)
事件委托(事件代理)addEventListener—事件冒泡的用法
原理:不是给每个子节点添加事件监听器,而是事件监听器设置在父节点上,利用冒泡原理影响设置每个子节点。
方法:给父节点添加事件监听
点击小li 因为事件冒泡机制,会传播到父级元素,父级元素有点击监听事件,所以就会指向方法
var ul = document.querySelector('ul'); //事件监听添加在li的父节点上(委托)
ul.addEventListener('click',function(){
。。。
})
鼠标事件对象 MouseEvent
点击鼠标界面后 返回的事件
clientX/clientY 相对于浏览器窗口可视范围得坐标(滚动窗口依旧位置不变)
document.addEventListener('click',function(e){
console.log(e.clientX);
console.log(e.clientY);
})
重点记pageX和pageY
跟随鼠标移动的小案例 mouseMove
document.addEventListener('mousemove',function(e){ //mousemove 鼠标移动1px就触发事件
var x = e.pageX;
var y = e.pageY;
pic.style.left = x +'px'; //小鼠标跟随移动
pic.style.top = y +'px';
})
鼠标触发事件
document.addEventListener('onkeyup',function(){
...
})
三个按键的执行顺序 keydown–keypress–keyup
keycode来判断键盘输入是哪一个值
document.addEventListener('keyup',function(e){
console.log(e.keyCode);
})
注意:如果要区分字母大小写,只能通过keyperss的方法来获取。
获取搜索框的焦点 ***.focus()
var ser = document.querySelector('.search');
document.addEventListener('keyup',function(e){
if(e.keyCode === 83){
ser.focus();
console.log('执行了')
}
})
注意:最好是选择keyup 当键盘弹起时候再执行,不然按下的键盘会传入输入框内。
ent.addEventListener(‘keyup’,function(e){
if(e.keyCode === 83){
ser.focus();
console.log(‘执行了’)
}
})
**注意**:最好是选择keyup 当键盘弹起时候再执行,不然按下的键盘会传入输入框内。