jQuery中的事件

Dom中可以绑定事件,但是比较繁琐,比如onclick,每行都要绑定一个。

在jQuery中可以使用选择器,来绑定事件,这样就不需要每行都绑定一个事件了。

1、click事件

如下实例,最基本的click事件:

<html lang="en">                                                                               
<head>                                                                                         
    <meta charset="UTF-8">                                                                     
    <title>Title</title>                                                                       
</head>                                                                                        
<body>                                                                                         
    <div>                                                                                      
        <ul>                                                                                   
            <li>1</li>                                                                         
            <li>2</li>                                                                         
            <li>3</li>                                                                         
            <li>4</li>                                                                         
            <li>5</li>                                                                         
            <li>6</li>                                                                         
            <li>7</li>                                                                         
        </ul>                                                                                  
    </div>                                                                                     
                                                                                               
                                                                                               
    <script src="jquery-2.2.4.min.js"></script>                                                
    <script>                                                                                   
        $('li').click(function(){                                                              
            var temp = $(this).text();                                                         
            alert(temp);                                                                       
        });                                                                                    
    </script>                                                                                  
</body>                                                                                        
</html>                                                                                        

 

2、$(document).ready(function(){...})用法:

该方法表示当前文档树准备好之后,执行function()。例如,一个页面结构加载完成,但是请求的图片还未加载完时,可以先执行function()中的功能。他还有另外一种写法:$(function(){...}),功能一样。

如此这般,页面中的js代码就可以写在该function()中了,例如上例:

    <script>                                 
        $(document).ready(function(){        
            $('li').click(function(){        
                alert($(this).text());       
            });                               
        });                                   
    </script>                                

 

3、事件委托:

上面实例中,当页面刷新时,就会绑定事件。现在,在页面不刷新的情况下,新添加一个<li>8</li>标签。然后再点击8,并不会弹出内容8。

若此时让第8个<li>标签也出发事件,就要用到事件委托geledate():

.geledate ()事件委托,这种事件的触发方式是,当鼠标点击该标签时,才绑定该事件,并执行该事件。即用的时候(点击的时候)才会绑定、执行事件。默认不会把所有的<li>标签都绑定事件,这样相对于上面的触发方式,比较高效。

<html lang="en">                                           
<head>                                                     
    <meta charset="UTF-8">                                 
    <title>Title</title>                                   
</head>                                                    
<body>                                                     
    <div>                                                  
        <input type="button" value="添加" onclick="addli()"> 
        <ul>                                               
            <li>1</li>                                     
            <li>2</li>                                     
            <li>3</li>                                     
            <li>4</li>                                     
            <li>5</li>                                     
            <li>6</li>                                     
            <li>7</li>                                     
        </ul>                                              
    </div>                                                 
                                                           
    <script src="jquery-2.2.4.min.js"></script>            
    <script>                                               
        function addli(){                                  
            $('ul').append('<li>8</li>');                  
        }                                                  
                                                           
        $('ul').delegate('li','click',function(){          
            alert($(this).text());                         
        })                                                 
    </script>                                              
</body>                                                    
</html>                                                                           

 

4、.bind()事件:

.bind()事件与.click()一样,都是直接绑定事件。

$('li').bind('click',function(){    
    alert($(this).text());          
})                                  

 

posted @ 2016-07-18 15:04  ahaii  阅读(172)  评论(0编辑  收藏  举报