JavaScript Tutorial/jQuery/Event

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

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

   <source lang="javascript">

<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>

header 1

   </body>

</html></source>


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

   <source lang="javascript">

<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>

header 1

   </body>

</html></source>


30. Define custom event

   <source lang="javascript">

<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>
asdf
         <button>bn</button>
                
   </body>

</html></source>


30. Dynamically tracking the dimensions of an element

   <source lang="javascript">

<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>

   </body>

</html></source>


30. Establishing event handlers with the DOM Level 2 Model

   <source lang="javascript">

<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("
"+text+"
");

} 

       });
   </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"/>

   </body>

</html></source>


30. Event instance properties

   <source lang="javascript">

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.</source>


30. Get click event coordinates

   <source lang="javascript">

<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>

header 1

   </body>

</html></source>


30. Get event target

   <source lang="javascript">

<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>

This is the way we write the demo,

 </body>

</html></source>


30. Get tag name from event target

   <source lang="javascript">

<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>

This is the way we write the demo,

 </body>

</html></source>


30. Pass some extra data before the event handler:

   <source lang="javascript">

function handler(event) { 

 alert(event.data.foo);

} $("p").bind("click", {foo: "bar"}, handler)</source>


30. Prevent default event

   <source lang="javascript">

<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></source>


30. Removes a bound live event

   <source lang="javascript">

<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>

header 1

   </body>

</html></source>


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

   <source lang="javascript">

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

 event.stopPropagation();

});</source>


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

   <source lang="javascript">

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

 event.preventDefault();

});</source>


30. Tracking event propagation with bubble and capture handlers

   <source lang="javascript">

<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("
"+text+"
"); 
           }
       });
   </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="c" src="my.jpg"/>

   </body>

</html></source>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Event&oldid=9723»