JavaScript Tutorial/jQuery/Event

Материал из Web эксперт
Версия от 18:52, 25 мая 2010; (обсуждение)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

30. Cancel a default action and prevent it from bubbling up

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function(){
              $("div").live("click", function() { return false; })

        });
    </script>

  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>


30. Cancel only the default action by using the preventDefault method

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function(){
              $("adiv").live("click", function(event){
                   event.preventDefault();
               });

        });
    </script>

  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>


30. Define custom event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        
            
                $("div").bind("myCustomEvent", function(e, myName, myValue){
                  $(this).text(myName + ", hi there!");
                });
                $("button").click(function () {
                  $("div").trigger("myCustomEvent", [ "asdf" ]);
                });
            
               

        });
    </script>
<style>
  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
  
</style>
  </head>
  <body>
    <body>
          <div>asdf</div>
          <button>bn</button>
                 
    </body>
</html>


30. Dynamically tracking the dimensions of an element

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(function(){
                report();
            });
            function report() {
                $("#display").html(
                $("#testSubject").width()+"x"+$("#testSubject").height()
            );
            }
        });
    </script>
<style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
<div id="testSubject">
</div>
<div id="display"></div>
    </body>
</html>


30. Establishing event handlers with the DOM Level 2 Model

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
$(function(){
    var element = $("#my")[0];
    element.addEventListener("click",function(event) {
        say("once!");
    },false);
    element.addEventListener("click",function(event) {
        say("twice!");
    },false);
    element.addEventListener("click",function(event) {
        say("three times!");
    },false);
});
function say(text) {
$("#console").append("<div>"+text+"</div>");
}
        });
    </script>
<style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
      <img id="my" src="my.jpg"/>
<div id="console"></div>
    </body>
</html>


30. Event instance properties

Property                Description
altKey                  true if the Alt key was pressed.
ctrlKey                 true if the Ctrl key was pressed.
data                    passed as the second parameter to the bind() command.
keyCode                 For keyup and keydown events, returns the pressed key.
metaKey                 true if the Meta key was pressed.
pageX                   For mouse events, horizontal coordinate.
pageY                   For mouse events, vertical coordinate.
relatedTarget           For some mouse events, cursor left or entered when the event was triggered.
screenX                 For mouse events, horizontal coordinate.
screenY                 For mouse events, coordinate from the screen origin.
shiftKey                Set to true if the Shift key was pressed.


30. Get click event coordinates

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("h1").bind("click", function(e){
                 var str = "( " + e.pageX + ", " + e.pageY + " )";
                 $("h1").text("Click happened! " + str);
             });


        });
    </script>

  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>


30. Get event target

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("#container").click(function (e) {
              
              alert(e.target.tagName);
              e.preventDefault();
              return false;
            });
        });
    </script>
  </head>
  <body>
    <body>
    <div id="container">
        <div>
          <p>This <span>is the <em>way</em> we</span> 
          write <em>the</em> demo,</p>
        </div>
    </div>
  </body>
</html>


30. Get tag name from event target

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("#container").click(function (e) {
              
              alert(e.target.tagName);
              e.preventDefault();
              return false;
            });
        });
    </script>
  </head>
  <body>
    <body>
    <div id="container">
        <div>
          <p>This <span>is the <em>way</em> we</span> 
          write <em>the</em> demo,</p>
        </div>
    </div>
  </body>
</html>


30. Pass some extra data before the event handler:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)


30. Prevent default event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
 $(document).ready(function(){
   $("a").click(function(event){
     alert("the link no longer works");
     event.preventDefault();
   });
 });

    </script>
  </head>
  <body>
    <a href="http://wbex.ru/">wbex.ru</a>
  </body>
</html>


30. Removes a bound live event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function(){
              $("div").die("click", function(event){
                   event.preventDefault();
              });

        });
    </script>

  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>


30. Stop only an event from bubbling by using the stopPropagation method.

$("form").bind("submit", function(event){
  event.stopPropagation();
});


30. To cancel only the default action by using the preventDefault method.

$("form").bind("submit", function(event){
  event.preventDefault();
});


30. Tracking event propagation with bubble and capture handlers

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(function(){
                $("*").each(function(){
                    var current = this;
                    this.addEventListener("click",function(event) {
                      say(current.tagName + "#"+ current.id + " target is " + event.target.id);
                    },true);
                    this.addEventListener("click",function(event) {
                      say(current.tagName + "#"+ current.id + " target is " + event.target.id);
                    },false);
                });
            });
            function say(text) {
            $("#console").append("<div>"+text+"</div>");
            }
        });
    </script>
<style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
        <div id="a">
        <div id="b">
        <img id="c" src="my.jpg"/>
        </div>
        </div>
        <div id="console"></div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Event&oldid=9722»