• [妙味DOM]第三课:Event-事件详解1


    知识点总结

    • 焦点事件
    onfocus  获取焦点
    onblur    失点焦点
    
    obj.focus()   给指定元素设置焦点
    obj.blur()     取消指定元素的焦点
    obj.select()  选择指定元素里的文本内容,只能选择用户输入的内容,例如:全选后就可以复制,input textarea
    •  event对象
    var ev = ev(标准下)||event(非标准下,即IE)
    • clientX,clientY
    鼠标到可视区的距离
    
    ev.clientX/clientY

    例子:方块跟随鼠标移动,注意client是到可视区的距离,还需要加上鼠标滚动的距离,即scrollTop/scrollLeft,还需要兼容,即scrollTop = document.documentElement.scrollTop ||document.body.scrollTop;
    •  事件冒泡
    ev.cancelBubble = true  阻止冒泡
    •  事件绑定
    在IE下:
        obj.attachEvent('onclick',fn);
        
        1、没有捕获;
        2、事件名称有‘on’;
        3、事件函数执行的顺序,在标准下:正序,IE9以下(不包括IE9):倒序;
        4、函数中的this指向的是window,除非用了call方法,即:
             obj.attachEvent('onclick',function(){
                     fn.call(obj);   //call方法的第一个参数:可以改变this指向,第二个参数开始:就是实际的传参。
             })
    
    
    在标准下:
        obj.addEventListener('click',fn,false);
    
        1、有捕获;
        2、事件名称没有'on'
        3、事件函数执行的顺序:正序
        4、函数中的this指向:触发该事件的对象
    
    
    因此,需要做兼容,见“JS框架处”
    http://www.cnblogs.com/joya0411/p/3557400.html
  • 相关阅读:
    JS时间自动更新
    浏览器一般兼容问题
    实现笛卡尔心形线的重复循环绘制
    js判断是否为ie6以外的浏览器,若是,则调用相应脚本
    html+css+js实现标签页切换
    实现跨浏览器的背景渐变
    IE8支持HTML5的占位符placeholder
    JS打造的跟随鼠标移动的酷炫拓扑图案
    JS获取阴历阳历和星期
    svn up时提示跳过某节点
  • 原文地址:https://www.cnblogs.com/joya0411/p/3564258.html
Copyright © 2020-2023  润新知