javascript event

版权声明:本文为博主原创文章,未经博主允许不得转载。 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)});  

猜你喜欢

转载自blog.csdn.net/sinat_22689423/article/details/55664231