js笔记8-event

最新推荐文章于 2022-10-23 10:44:57 发布

8笔

最新推荐文章于 2022-10-23 10:44:57 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/weixin_43899694/article/details/100583398

版权

事件

句柄绑定方式
ele.onxxx = function(){}
兼容性很好，但一个元素的同一事件上只能绑定一个处理函数；
基本等同于写在html的行间上

事件执行时，this是dom元素本身

obj.addEventListener(type,fn,false) ----(事件类型，处理函数，false)
ie9以下不兼容，可为一个事件绑定多个处理程序

事件执行时，this是dom元素本身

obj.attachEvent(‘on’ + 事件类型,处理函数)
ie独有
一个事件同样可以绑定多个程序

事件执行时，this指向window
解决：

    dom.attachEvent('onclick',function(){
        test.call(dom);
    })
    function test(){
        ...
        this....
    }

解除事件

onxxx
ele.onclick = null/false/"" ;
addEven…
ele.removeEventListener(type,fn,false);
若绑定的fn是匿名函数，则无法解除
attachE…
ele.detachEvent(‘on’ + type,fn);
若绑定的fn是匿名函数，则无法解除

事件处理模型 —冒泡、捕获

    <div>                    ↑      |
        <div>                |      |
            <div></div>      |      ↓
        </div>                        
    </div>

冒泡

结构上（非视觉上）嵌套关系的元素，同一事件，自子元素冒泡向父元素。（自底向上）
addEventListener(type,handle,false)

捕获

结构上（非视觉上）嵌套关系的元素，同一元素，自父元素捕获至子元素（事件源元素）。（自顶向下）
ie没有捕获事件

addEventListener(type,handle,true)

（过时）第二种捕获，真实捕获。仅在ie好使，元素会捕获发生的所有动作到自己身上。ele.setCapture(); ele.releaseCapture();

触发顺序：先捕获，后冒泡
focus、blur、change、submit、reset、select等事件不冒泡

取消冒泡和阻止默认事件

取消冒泡

w3c标准 event.stopPropagation(); ie9以下不兼容
ie独有 event.cancelBubble = true;(谷歌也有)

阻止默认事件

默认事件：

右键出菜单事件： document.oncontextmenu
表单提交
a标签跳转等

阻止方法：

return false; 以对象属性的方式注册的事件才生效。（句柄方式）
event.preventDefault(); W3C标准，ie9以下不兼容
event.returnValue = false; 兼容ie
封装阻止默认事件方法：cancelHandler(event)

// 封装addEvent(), 各浏览器事件绑定
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
            handle.call(elem);
        })
    } else {
        elem['on' + type] = handle;
    }
}

// 取消冒泡
function stopBubble(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancleBubble = true;
    }
}

// 阻止默认事件
function cancelHandler(event) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}

事件对象

非ie浏览器，点击等事件，会返回一个事件对象event。ie的保存在window.event中。
event || window.event 用于ie

事件源对象

event.target 火狐只有这个
event.srcElement ie只有这个
谷歌两者都有

    .... = function(e){
        var event = e || window.event;
        var target = event.target || event.scrElement;
    }

事件委托

利用事件冒泡和事件源对象进行处理

优点：

性能，不需要循环所有元素，一个个绑定事件
灵活，当有新的子元素时不需要重新绑定事件（自动绑定动态添加的元素）

一些事件

mouseenter 鼠标移入
mouseleave 鼠标移出
mousemove 鼠标在元素内移动

事件分类

鼠标事件

click、mousedown、mouseup。
mouseenter、mouseleave；mouseover、mouseout。
contextmenu、mousemove

用button区分鼠标的按键，0/1/2 event.button
DOM3标准规定：click事件只能监听鼠标左键，只能通过mousedown、mouseup来判断鼠标键
解决mousedown 和 click 冲突:

    var firTime = 0,
        lasTime = 0,
        key = false;        
    document.onmousedown = function(){
        firTime = new Date().getTime();
    }
    document.onmouseup = function(){
        lasTime = new Date().getTime();
        if(lasTime - firTime < 300){
            key = true;
        }
    }
    document.onclick = function(){
        if(key){
            console.log('onclik');
        }
        key = false;

    }

键盘事件

keydown、keyup、keypress

keydown > keypress > keyup
keydown 可以响应任意键盘按键，keypress 只能响应字符类键盘按键
keypress 返回ASCII码，可以转为相应字符

string.fromCharCode(e.charCode); 将按下的字符类按键转换为相应字符

文本操作事件

input（输入就触发）、change（聚焦与失焦有改变才触发）、focus、blur

窗体操作类（window上的事件）

scroll、 load

fixed定位兼容版（ie6没有fixed）

    <body>
        <div style = 'width: 100px; height: 100px;position: fixed; left: 200px; top: 300px;'></div>
    </body>

    var div = document.getElementsByClassName('div')[0];
    window.oncroll = function(){
        if(!(div.position = 'fixed')){
            div.style.left = getScrollOffset().x + parseInt(div.style.left) + 'px';
            div.style.top = getScrollOffset().y + parseInt(div.style.top) + 'px';
        }
    }