0

Добрый вечер, вот есть вот такой код JavaScript:

<?xml version="1.0" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<head>
    <script>
        < ![CDATA[
        var dx, dy;
        var circle;

        function init() {
            circle = document.getElementById('circ');
            circle.addEventListener("mousedown", mousedown_listener, false);
        }

        function mousedown_listener(evt) {
            dx = circle.cx.baseVal.value - evt.clientX;
            dy = circle.cy.baseVal.value - evt.clientY;
            document.addEventListener("mousemove", mousemove_listener, true);
            document.addEventListener("mouseup", mouseup_listener, true);
        }

        function mouseup_listener(evt) {
            document.removeEventListener("mousemove", mousemove_listener, true);
            document.removeEventListener("mouseup", mouseup_listener, true);
        }

        function mousemove_listener(evt) {
            var id = circle.ownerSVGElement.suspendRedraw(1000);
            circle.cx.baseVal.value = evt.clientX + dx;
            circle.cy.baseVal.value = evt.clientY + dy;
            // alternatively we could set the corresponding attributes:
            // (slower method)
            //      circle.setAttribute("cx", evt.clientX + dx);
            //      circle.setAttribute("cy", evt.clientY + dy);
            circle.ownerSVGElement.unsuspendRedraw(id);
        }

        ]] >
    </script>
</head>

<body onload="init();">
    <h3>SVG + event handler demo</h3>
    <p>Drag the circle with the mouse!</p>
    <svg:svg width="600px" height="400px">
        <svg:polyline points="0,0 600,0 600,400 0,400 0,0" style="stroke:black; fill:none;" />
        <svg:circle id="circ" r="1cm" cx="5cm" cy="3cm" style="fill:red; stroke:blue; stroke-width:3;" /></svg:svg>
</body>

</html>

Объясните, пожалуйста, как он работает. Заранее благодарен за любую помощь. Вот тут наглядный пример работы этого кода.

2 ответа 2

7

не понятен JavaScript, так как я изначально учил jQuery...

Может так станет понятнее:

js:

circle = document.getElementById('circ');
circle.addEventListener("mousedown", mousedown_listener, false);

jQuery:

circle = $('#circle');
circle.on("mousedown", mousedown_listener);

js:

dx = circle.cx.baseVal.value - evt.clientX;
dy = circle.cy.baseVal.value - evt.clientY;
document.addEventListener("mousemove", mousemove_listener, true);
document.addEventListener("mouseup", mouseup_listener, true);

jQuery:

dx = circle[0].cx.baseVal.value - evt.clientX;
dy = circle[0].cy.baseVal.value - evt.clientY;
$(document).on("mousemove", mousemove_listener);
$(document).on("mouseup", mouseup_listener);

js:

document.removeEventListener("mousemove", mousemove_listener, true);
document.removeEventListener("mouseup", mouseup_listener, true);

jQuery:

$(document).off("mousemove", mousemove_listener);
$(document).off("mouseup", mouseup_listener);

js:

var id = circle.ownerSVGElement.suspendRedraw(1000);
circle.cx.baseVal.value = evt.clientX + dx;
circle.cy.baseVal.value = evt.clientY + dy;
circle.ownerSVGElement.unsuspendRedraw(id);

jQuery:

var id = circle[0].ownerSVGElement.suspendRedraw(1000);
circle[0].cx.baseVal.value = evt.clientX + dx;
circle[0].cy.baseVal.value = evt.clientY + dy;
circle[0].ownerSVGElement.unsuspendRedraw(id);
1
  • Огромное, Вам спасибо!
    – spoilt
    12 авг 2012 в 18:18
1

А что именно не понятно?

Грубо говоря, при загрузки документа на объект с id =circ вешается обработчик события нажатия мыши mousedown_listener, который также вешает события на отпускании кнопки мыши над объектом function mouseup_listener(evt), и передвижении function mousemove_listener(evt).

3
  • не понятен JavaScript, так как я изначально учил jQuery...
    – spoilt
    12 авг 2012 в 17:36
  • 1
    Скоро наверно JavaScript будет считаться низкоуровневым языком.
    – ReinRaus
    12 авг 2012 в 18:11
  • те, кто юзают CoffeScript уже так считают
    – Spectre
    12 авг 2012 в 18:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.