JS中事件处理机制

在js中事件的处理分三个阶段 目标阶段 捕获阶段 冒泡阶段(以下未申明均为标准浏览器下)
在DOM2级事件中

    ele.addEventListener("click",fn1,true);//第三个参数:是否在捕获阶段处理这个事件 同一个方法先捕获再冒泡
    ele.addEventListener("click",fn1,false);

这样的写法 当点击的时候回执行两次fn1,而且执行的先后是 为true的那个fn1
但是在标准浏览器下,相同的方法 进行监听只会绑定一次 但是如果第三个参数的不同 表示在不懂的阶段出发了这个函数,但是 绑定 也只是绑定了一次,值为true的胃捕获阶段处理 false 为冒泡阶段触发

在IE(IE6 7 8)中的事件监听会有 很多的兼容性问题,晚点我会详细的在写个博客介绍
再说下 IE下的一些简单的兼容性问题
前面的是标准浏览器 后面的是IE

e=e||window.event;
e.target= e.srcElement;//事件源
e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY;
e.preventDefault=function(){e.returnValue=false};//阻止事件默认行为
e.stopPropagation=function(){e.cancelBubble=true};//阻止事件冒泡

什么是事件委托 我们如何运用事件委托
举个简单的例子

<div id="outer">
    我是outer
    <div id="middle">
        我是middle
        <div id="inner">
            我是inner
            <p id="p1">
                我是p1
                <span id="span1">
                    我是span
                </span>
            </p>
        </div>
    </div>
</div>

如果我要给span添加一个点击事件弹出其ID 那么如果我们不阻止事件的冒泡的话 就会弹出其所有的父级对应的ID,但是 我们可以吧这一点击事件委托给outer 然后再通过事件源判断是不是span 如果是则 弹出其ID 不是则跳过 这就是一个简单的事件委托的应用
事件委托我觉得用简单的话来说就是把所有的事件处理,都委托给一个顶级的元素去处理,它就是利用了JS中事件传播的机制
那么哪些 情况下我们使用这种方式呢?
在一些动态元素上 我们使用这个方法 能很好的解决了我们绑定事件 的麻烦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值