Object

Module

Class

Class Detail

class event.Object
Object ( event )
对 dom 原生事件进行兼容性处理,
API 基本遵循 DOM-Level-3-Events 规范.
该类用于 event 模块内部调用, 实例传入绑定的事件处理器作为第一个参数.
Parameters:event (HTMLEvent) – dom 原生事件.

Properties Detail

下面的列表都是该类实例的属性, 虽然有些随着不同的事件类别值会是 undefined :

事件属性

altKey, attrChange, attrName, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, fromElement, handler, keyCode, layerX, layerY, metaKey, newValue, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedNode, relatedTarget, screenX, screenY, shiftKey, srcElement, target, toElement, view, wheelDelta, which

KISSY 对下列属性做了兼容性处理

  • target
  • relatedTarget
  • pageX
  • pageY
  • which
  • metaKey
event.currentTarget

{Object} - 返回 Event.Object, 当前事件处理器的 dom 节点或对象, 通常和 this 相同.

Note

如果你在 on() 中指定了 this , 则 currentTarget 和 this 不相同.

var $=KISSY.Node.all;
$("p").on('click',function(event) {
  alert( event.currentTarget === this ); // true
});
event.pageX

{Number} - 鼠标当前位置相对文档左边界的距离

event.pageY

{Number} - 鼠标当前位置相对文档上边界的距离

显示当前鼠标位置相对于 iframe 文档的距离:

<!DOCTYPE html>
<html>
<head>
    <style>body {
        background-color: #eef;
    }

    div {
        padding: 20px;
    }</style>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
<div id="log"></div>
<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;
        $(document).on('mousemove', function (e) {
            $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
        });
    });
</script>

</body>
</html>
event.relatedTarget

{HTMLElement} - 和当前事件对象关联的 dom 节点.

Hint

对于 mouseout/leave 事件为将要进入的节点. 对于 mouseover/enter 为将要离开的节点.

当鼠标移出链接时, alert 将要进入的元素节点名称

var $=KISSY.Node.all;
$("a").mouseout(function(event) {
  alert(event.relatedTarget.nodeName); // "DIV"
});
event.target

{HTMLElement} - target 属性可以是绑定事件的元素的子孙节点. 常被用来和 this 比较来确定是否这个事件是冒泡过来的. 这个属性在委托情况下非常有用, 可以得到事件的真正触发源.

显示点击事件触发源的节点名称

<!DOCTYPE html>
<html>
<head>
    <style>
        span, strong, p {
            padding: 8px;
            display: block;
            border: 1px solid #999;
        }
    </style>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>

<div id="log"></div>
<div>
    <p>
        <strong><span>click</span></strong>
    </p>
</div>
<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;
        $("body").on('click', function (event) {
            $("#log").html("clicked: " + event.target.nodeName);
        });
    });
</script>

</body>
</html>

简单的委托实现, 点击处理器被绑定到 ul 上面, 点击 li 会使得该 li 下的子 ul 菜单显示与隐藏.

<!DOCTYPE html>
<html>
<head>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>

<ul>
    <li>item 1
        <ul>
            <li>sub item 1-a</li>
            <li>sub item 1-b</li>
        </ul>
    </li>
    <li>item 2
        <ul>
            <li>sub item 2-a</li>
            <li>sub item 2-b</li>
        </ul>
    </li>
</ul>
<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;

        function handler(event) {
            var $target = $(event.target);
            if ($target.test("li")) {
                $target.children().toggle();
            }
        }

        $("ul").on('click', handler).all("ul").hide();
    });
</script>

</body>
</html>
event.type

{String} - 描述当前事件的类型

var $=KISSY.Node.all;
$("a").on('click',function(event) {
  alert(event.type); // "click"
});
event.which

{String} - 对于键盘和鼠标按键, 这个属性代表键盘或鼠标按键的代码. which 对 charCode 和 keyCode 以及 button 进行了兼容. 推荐使用 which 来代替这些属性.

显示当前按键信息

<!DOCTYPE html>
<html>
<head>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>

<input id="whichkey" value="type something with keyboar or mouseup">

<div id="log"></div>
<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;
        $('#whichkey').on('keydown mouseup', function (e) {
            $('#log').html(e.type + ': ' + e.which);
        });
    });
</script>

</body>
</html>

Methods Detail

event.preventDefault()
preventDefault ()
阻止默认行为的发生.例如点击链接不会使浏览器跳转到新的地址. 我们可以使用 isDefaultPrevented() 来判断是否某个事件处理器里调用了这个方法.

阻止链接的跳转

<!DOCTYPE html>
<html>
<head>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>

<a href="http://www.taobao.com">default click action is prevented</a>

<div id="log"></div>

<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;
        $("a").on('click', function (event) {
            event.preventDefault();
            $('<div/>')
                    .append('default ' + event.type + ' prevented')
                    .appendTo('#log');
        });
    });
</script>

</body>
</html>
event.stopImmediatePropagation()
stopImmediatePropagation ()
停止当前事件冒泡. 不光停止冒泡到下一个事件目标, 当前目标上的任何后续监听函数, 也马上取消执行.
isImmediatePropagationStopped() 来判断是否调用了该方法.

阻止其他的事件处理器执行

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            height: 30px;
            width: 150px;
            background-color: #ccf;
        }

        div {
            height: 30px;
            width: 150px;
            background-color: #cfc;
        }
    </style>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
<p>paragraph</p>

<div>division</div>
<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;
        $("p").on('click', function (event) {
            event.stopImmediatePropagation();
        });
        $("p").on('click', function (event) {
            // This function won't be executed
            $(this).css("background-color", "#f00");
        });
        $("div").on('click', function (event) {
            // This function will be executed
            $(this).css("background-color", "#f00");
        });
    });
</script>

</body>
</html>
event.stopPropagation()
stopPropagation ()
停止事件沿 dom 树向上冒泡, 组织祖先节点的所有事件处理器执行.我们可以使用 isPropagationStopped() 来判断当前方法是否执行过.
该方法在 fire() 中也起作用.

Note

调用该方法不会组织该节点其他事件处理器的运行, 如果要需要调用 stopImmediatePropagation()

阻止 click 事件的冒泡

var $=KISSY.Node.all;
$("p").on('click',function(event){
  event.stopPropagation();
  // do something
});
event.halt()
halt (stopImmediatePropagation)
如果 stopImmediatePropagation==true 则相当于调用 stopImmediatePropagation + preventDefault
否则相当于调用 stopPropagation + preventDefault
Parameters:stopImmediatePropagation (boolean) – 是否立即停止冒泡
event.isImmediatePropagationStopped()
isImmediatePropagationStopped ()
是否停止了该事件的后续所有事件处理器执行, 通过调用 stopImmediatePropagation() 设置状态.
检查是否 stopImmediatePropagation() 被调用了
<!DOCTYPE html>
<html>
<head>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>

<button>click me</button>
<div id="stop-log"></div>

<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;

        function immediatePropStopped(e) {
            var msg = "";
            if (e.isImmediatePropagationStopped()) {
                msg = "called"
            } else {
                msg = "not called";
            }
            $("#stop-log").append("<div>" + msg + "</div>");
        }

        $("button").on('click', function (event) {
            immediatePropStopped(event);
            event.stopImmediatePropagation();
            immediatePropStopped(event);
        });
    });
</script>

</body>
</html>
event.isDefaultPrevented()
isDefaultPrevented ()
判断 preventDefault() 是否被调用了.
$("a").click(function(event){
  alert( event.isDefaultPrevented() ); // false
  event.preventDefault();
  alert( event.isDefaultPrevented() ); // true
});
event.isPropagationStopped()
isPropagationStopped ()
判断 stopPropagation() 是否被调用了.
判断 stopPropagation 是否被调用
<!DOCTYPE html>
<html>
<head>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>

<button>click me</button>
<div id="stop-log"></div>

<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;

        function propStopped(e) {
            var msg = "";
            if (e.isPropagationStopped()) {
                msg = "called"
            } else {
                msg = "not called";
            }
            $("#stop-log").append("<div>" + msg + "</div>");
        }

        $("button").on('click', function (event) {
            propStopped(event);
            event.stopPropagation();
            propStopped(event);
        });
    });
</script>

</body>
</html>