DOM事件

事件流

事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)
事件捕获:不太具体的节点应该更早接收到事件而最具体的节点最后接收到事件
IE——事件冒泡流

事件对象:在触发DOM上的事件时都会产生一个对象

DOM中的事件对象

  1. type属性 用于获取事件类型
  2. target属性 用于获取事件目标
  3. stopPropagation 阻止事件冒泡
  4. preventDefault() 阻止事件的默认行为

IE中的事件对象

  1. type属性 用于获取事件类型
  2. srcElement属性 用于获取事件的目标
  3. cancelBubble属性 用于阻止事件冒泡 设置为true表示阻止冒泡 设置为false表示不阻止冒泡
  4. returnValue属性 用于阻止事件的默认行为 设置为false表示阻止事件的默认行为

事件处理程序

html事件处理程序

html事件缺点:html和js紧密耦合在一起

<input type="button" value="按钮1" id="btn1" onclick="alert('hello')">
<input type="button" value="按钮2" id="btn2" onclick="showMes()">

DOM0级事件处理程序

较传统的方式:把一个函数赋值给一个事件的处理程序的属性
用的比较多的方法 简单 跨浏览器的优势

btn3.onclick = function() {
     alert('这是通过DOM0级添加的事件');
}
btn3.onclick = null;

DOM2级事件处理程序

DOM2级定义了两个方法:用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListener()
接收三个参数:要处理的事件名作为事件处理程序的函数布尔值

var btn4 = document.getElementById('btn4');
    btn4.addEventListener('click',showMes,false);   
    // false冒泡
    btn4.addEventListener('click',function(){
        alert(this.value);
    },false);
    删除事件
    btn4.removeEventListener('click',showMes,false);

IE事件处理程序

attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数:事件处理程序的名称事件处理程序的函数
不使用第三个参数的原因:IE8及更早的浏览器版本只支持事件冒泡

var btn5 = document.getElementById('btn5');
    btn5.attachEvent('onclick',showMes);
    btn5.detachEvent('onclick',showMes);

跨浏览器的事件处理程序

var eventUtil = {
        // 添加句柄
        addHandler: function(element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler);
            } else {
                element['on' + type] = handler;
            }
        },
        // 删除句柄
        removeHandler: function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false)
            } else if (element.detachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        getEvent: function(event) {
            // event = event || window.event;
            return event ? event : window.event;
        },
        getType:function(event){
             return event.type;
        },
        getElement:function(event){
             return event.target||event.srcElement;
        },
        preventDefault:function(event){
             if(event.preventDefault){
                  event.preventDefault();
             }else{
                  event.returnValue=false;
             }
        },
        stopPropagation:function(event){
             if (event.stopPropagation) {
                  event.stopPropagation();
             }else{
                  event.cancelBubble=true;
             }
        }

    }
eventUtil.addHandler(btn5, 'click', showMes);
    eventUtil.addHandler(box, 'click', function(){
        alert('父盒子');
    });
    eventUtil.addHandler(go, 'click', function(e){
        e=eventUtil.getEvent(e);
        alert(eventUtil.getElement(e));
        eventUtil.stopPropagation(e);
        eventUtil.preventDefault(e);
    });

转载于:https://www.cnblogs.com/xjuan/p/5438331.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值