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 阅读(179) 评论(0) 收藏举报

刷新页面返回顶部

ahaii

jQuery中的事件

公告