一次关于js事件出发机制反常的解决记录

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

起因：正常情况下我点击s2时是先弹出我是children，再弹出我是father，但是却出现了先弹出我是father，后弹出我是children的情况，这种情况是在和安卓app交互的h5页面中出现的，本地测试没有问题，但是在安卓打包的内嵌h5页面就出现了问题。简单化的代码先展示出来。

html代码如下

<div id="father" class="ss1">s1

    <div id="children" class="ss2">s2

    </div>

</div>

事件绑定如下

$('#father').on('click',function (e) {

　　　alert('我是father')

　})

$('#children').on('click',function (e) {

　　　alert('我是children')

　　　e.stopPropagation();

　})

借此问题，复习了一下js事件，先看一下几个定义

先来看事件注册

// IE以外的其他浏览器

// target ：文档节点、document、window 或 XMLHttpRequest。

// type ：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。

// listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

// useCapture ：是否使用捕捉，一般用 false,事件触发时，会将一个 Event 对象传递给事件处理程序。

target.addEventListener(type,listener,useCapture);//添加

target.removeEventListener(type,listener,useCapture);//删除

// IE浏览器

// target ：文档节点、document、window 或 XMLHttpRequest。

// type ：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

// listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

target.attachEvent(type, listener);//添加

target.detachEvent(type, listener);// 移除

兼容写法

兼容后的方法

var func = function(){};

//例：addEvent(window,"load",func)

function addEvent(elem, type, fn) {

    if (elem.attachEvent) {

        elem.attachEvent('on' + type, fn);

        return;

    }

    if (elem.addEventListener) {

        elem.addEventListener(type, fn, false);

    }

} 

//例：removeEvent(window,"load",func)

function removeEvent(elem, type, fn) {

    if (elem.detachEvent) {

        elem.detachEvent('on' + type, fn);

        return;

    }

    if (elem.removeEventListener) {

        elem.removeEventListener(type, fn, false);

    }

}

获取事件对象和事件源(触发事件的元素)

function eventHandler(e){

     //获取事件对象

    e = e || window.event;//IE和Chrome下是window.event FF下是e

     //获取事件源

     var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target

 }

事件委托

myTable.onclick = function () {

    e = e || window.event;

    var targetNode = e.target || e.srcElement;

    // 测试如果点击的是TR就触发

    if (targetNode.nodeName.toLowerCase() === 'tr') {

        alert('You clicked a table row!');

    }

}

事件函数的解除绑定

和事件的绑定其实是相对应的，如果需要接触事件的绑定，运行对应的函数就可以了。如果是原生JS绑定则对应运行removeEventListener()和detachEvent()。

如果是jQuery的bind()和delegate()绑定，也是存在对应的解绑函数用以清除注册事件，比如unbind()和undelegate()。

看一个代码示例：

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;

        }

    }

};

再来看看事件流

几个概念

捕获阶段 ：事件对象通过目标的祖先从传播窗口到目标的父。这个阶段也被称为 捕获阶段 。

目标阶段 ：本次活动对象到达事件对象的事件的目标。这个阶段也被称为 目标阶段 。如果事件类型指示事件不起泡，则在完成此阶段后，事件对象将停止。

冒泡阶段 ：事件对象通过目标的祖先中传播以相反的顺序，开始与目标的父和与所述结束窗口。这个阶段也被称为 冒泡阶段 。

默认行为 ：事件通常由实现作为用户操作的结果分派，以响应任务的完成，或者在异步活动（例如网络请求）期间发信号通知进度。有些事件可以用来控制下一个实现可能采取的行为（或者撤销实现已经采取的行动）。这个类别中的事件被认为是 可取消的 ，他们取消的行为被称为他们的 默认行为 。

取消事件： 可取消的事件对象可以与一个或多个“默认动作”相关联。要取消事件，请调用该 preventDefault() 方法。

一个图片

再上个小demo

<ul>

    <li>点我试试</li>

</ul>

<div id="s1" class="ss1">s1

    <div id="s2" class="ss2">s2</div>

</div>

var ul = document.getElementsByTagName('ul')[0];

var li = document.getElementsByTagName('li')[0];
element.addEventListener(event, function, useCapture)

document.addEventListener('click',function(e){console.log('document clicked')},true);//第三个参数为true使用捕获，false为冒泡,false为默认

ul.addEventListener('click',function(e){console.log('ul clicked')},true);

li.addEventListener('click',function(e){console.log('li clicked')},true);

//IE低版本兼容写法

li.attachEvent('onclick',function(event){

    debugger

    console.log('li clicked');

    event.cancelBubble=true;

});

s1.addEventListener('click',function () {

    console.log('s1 捕获方式')

},true)

s1.addEventListener('click',function () {

    console.log('s1 冒泡方式')

},false)

s2.addEventListener('click',function (e) {

    console.log('s2 捕获方式')

    // e.stopPropagation();

},true)

s2.addEventListener('click',function () {

    console.log('s2 冒泡方式')

},false)

点击li时，打印依次为

ul clicked li clicked

点击s1时，打印依次为

s1 捕获方式    s1 冒泡方式

点击s2时，打印依次为

s1 捕获方式 s2 捕获方式 s2 冒泡方式 s1 冒泡方式

处理事件冒泡和默认事件

1、e.preventDefault()

var a = document.getElementById("testA");

a.onclick =function(e){

    if(e.preventDefault){

        e.preventDefault();//

    }else{

        window.event.returnValue = false;//IE

　　　　//注意：这个地方是无法用return false代替的

　　　　//return false只能取消元素

    }

}

2、return false javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

//原生js，只会阻止默认行为，不会停止冒泡

var a = document.getElementById("testA");

a.onclick = function(){

    return false;//当然 也阻止了事件本身

};

//既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。

//仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。

1 //jQuery，既阻止默认行为又停止冒泡

2 $("#testA").on('click',function(){

3     return false;//当然 也阻止了事件本身

4 });

总结使用方法

当需要停止冒泡行为时

function stopBubble(e) {

    //如果提供了事件对象，则这是一个非IE浏览器

    if ( e && e.stopPropagation ){

        e.stopPropagation(); //因此它支持W3C的stopPropagation()方法

    }else{

        window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡

    }

}

当需要阻止默认事件时

function stopDefault( e ) {

    if ( e && e.preventDefault ){

        e.preventDefault(); //阻止默认浏览器动作(W3C)

    }else {

        window.event.returnValue = false; //IE中阻止函数器默认动作的方式

    }

    return false;

}