jQuery Simulate

With jQuery, it’s very easy to trigger mouse event handlers by calling functions such as click, mousedown and trigger. They even propagate events so that event handlers registered higher up the DOM tree through delegate() and on() would get called as well. So in most of the cases I could just use them instead of triggering real browser events when writing tests. However recently, I had to write a couple components that need to listen to mouse events such as control click, shift click and mouse drag. Looking at the jQuery API, I couldn’t find any built in functions that could trigger mouse events but at the same time specify extra properties such as control or shift click.

Googling a bit on firing real browser events and thanks to the great documentation on MDN, first an event needs to becreated, then initialized and lastly dispatched. The initMouseEvent sure makes me dizzy by looking at it. On top of that, older IE browsers has a different API for doing the same thing. This got me thinking there gotta be a better way. What I wanted to do was just something other JavaScript UI projects must have had done. Then I took a look at the tests injQuery UI project and sure enough, I found the jquery.simulate.js to simulate real browser events and it already handles the cross browser event creation. Now let’s see how it helps me create those events that I want.

jquery.simulate.js is just another jQuery plugin and its API is fairly simple. The first parameter of the plugin is the name of the event. Here you can use the names of the browser mouse events such as click, mousemove, mouseout, etc. For example, if we want to trigger a mouse click on elements with class name “target”. We can simply call this.

1	`$('.target').simulate('click');`

The plugin can also take a second argument to override the default event properties. These default properties include pretty much the same arguments required to call the browser native event initialization method, event.initEvent. Two of these properties are ctrlKey and shiftKey. With them, I can now easily test my event handlers for control click and shift click.

$('.target').simulate('click', { ctrlKey: true });
$('.target').simulate('click', { shiftKey: true });

To test mouse dragging, although “drag” is not a real browser event, the plugin comes with support to handle the case when the event name specified is “drag”. We just need to specify the name as drag and the change in x and y of the mouse position. Internally, the plugin will perform a series of events including mousedown, mousemove, mouseup and click to simulate mouse drag.

1	`$('.target').simulate('drag', { dx: 200, dy: 100 });`

Here is a sample page that shows how the plugin works.

<!doctype html>
<html>
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="https://raw.github.com/jquery/jquery-ui/master/tests/jquery.simulate.js"></script>
        <script type="text/javascript">
            $(function() {
                $('.target').click(function(e) {
                    if (e.ctrlKey) {
                        console.log('control click');
                    } else if (e.shiftKey) {
                        console.log('shift click');
                    } else {
                        console.log('regular click');
                    }
                }).mousedown(function(e) {console.log('mousedown', e);})
                .mouseup(function(e) { console.log('mouseup', e); });
 
                $('button').click(function() {
                    if($(this).hasClass('drag')) {
                        $('.target').simulate('drag', {dx: 100, dy: 50});
                    } else if($(this).hasClass('ctrl')) {
                        $('.target').simulate('click', {ctrlKey: true});
                    } else if($(this).hasClass('shift')) {
                        $('.target').simulate('click', {shiftKey: true});
                    } else {
                        $('.target').simulate('click');
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="target" style="background-color: yellow; height: 300px; width: 500px">Test Target</div>
        <div>
            <button class="ctrl">Ctrl Click</button>
            <button class="shift">Shift Click</button>
            <button class="regular">Regular Click</button>
            <button class="drag">Drag</button>
        </div>
    </body>
</html>

There are other options that are supported in the plugin. For complete list of options, please refer to the plugin on GitHub.

Have fun coding!

출처 - http://wingkaiwan.com/2012/09/23/triggering-mouse-events-with-jquery-simulate-when-testing-in-javascript/

랄라라

jQuery Simulate

http://jsfiddle.net/Ignitor/Psjhf/

Triggering Mouse Events with jQuery SimulateWhen Testing in JavaScript

'Language > jQuery' 카테고리의 다른 글

티스토리툴바