版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_22689423/article/details/55664231
1.焦点事件
onfocus //不是所有的元素都接受焦点,有相应用户操作的元素才行
obj.focus() //百度效果
onblur
obj.blur()
obj.select() //选择全选的内容
2.event事件对象和clientX,clientY
event 事件对象 (在事件函数中调用才有效)
兼容性
内置的全局对象 event:
IE 显示为 null
chrome 显示为 undefine
Firefox 事件对象通过事件函数的第一个函数参数调用 function fn(ev){}
ev 标准
//查看ev对象
for(var attr in ev){
console.log(rv[attr]);
}
- clientX(左到右), clientY (右到左) 鼠标的位置
- onmousemove 时间间隔变化来触发
//鼠标移动oDiv跟着移动
var ev = ev || event; //兼容解决方法
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left = ev.clientX+'px';
oDiv.style.top = ev.clientY+ scrollTop+'px';
3.事件流、事件冒泡机制
事件冒泡 (有时事件处理函数的事件(事件和函数的绑定))从内到外, 传播到父级
当前要阻止冒泡的事件函数中调用 ev.cancelBubble = true 只能单独阻止
4.事件绑定的第二种形式
- 为了解决事件函数的覆盖,同个事件绑定多个不同的函数
ie: 事件捕获 obj.attachEvent(事件名称,事件函数)
特点:
1.没有捕获
2.事件有on
3.事件函数的执行顺序 标准ie -》正序 非标准ie -》倒序
4.this 指向window
解决方法call 第一个参数可以改变函数this执行的指向, null 指向 原本的执行,调用函数 fn() == fn().call()
使用:
document.attachEvent(‘onclick’,fn);
标准: obj.addEventListener(事件名称,事件函数,是否捕获) false: 冒泡 true:捕获
特点:
1.有捕获
2.事件没有on
3.事件函数的执行顺序 正序
4.this 指向触发该事件的对象 (正常)
document.addEventListener(‘click’,fn,false);
兼容封装绑定
function bind(obj,evname,fn){}
if(obj.addEventListener){
obj.addEventListener(obj,evname,false);
}else{
obj.attachEvent('on'+evname,function(){
fn.call(obj);
});
}
bind(document,'click',function(){alert(1)});