jquery-事件

Posted 2020-10-09 狼来的日子里！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery-事件相关的知识，希望对你有一定的参考价值。

　一：jquery事件绑定有4种方法

方法1：直接绑定事件，如

                $(‘.c1‘).click()
                    $(‘.c1‘).....

方法2：通过bind方法

　　bind(“事件名”，“方法”) 绑定事件

　　unbind(“事件名”，“方法”) 去除绑定事件

                    $(‘.c1‘).bind(‘click‘,function(){
                        
                    })
                    
                    $(‘.c1‘).unbind(‘click‘,function(){
                        
                    })

方法3：通过on方法

　　on(“事件名”，“方法”) 绑定事件

　　off(“事件名”，“方法”) 去除绑定事件

$(‘.c1‘).on(‘click‘, function(){

})
$(‘.c1‘).off(‘click‘, function(){

})

方法4：delegate方法

　　delegate("标签",“事件名”，“方法”) 绑定事件

　　undelegate(“标签”，“事件名”，“方法”) 去除绑定事件

                    $(‘.c‘).delegate(‘a‘, ‘click‘, function(){
                    
                    })
                    $(‘.c‘).undelegate(‘a‘, ‘click‘, function(){
                    
                    })

上面3种方法都差不多，但是对于增加内容，比如表格数据后面跟有操作，比如编辑等。

原的表格在编译的时候已绑定了事件，但是新增加的表格数据，并没有绑定事件，用上面的方法都不行，

可以使用delegate，指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

，使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
<script src="jquery-1.12.4.js"></script>
    <script>
        $(‘#a1‘).click(function () {
            var v = $(‘#t1‘).val();
            var temp = "<li>" + v + "</li>";
            $(‘#u1‘).append(temp);
        });

//        $(‘ul li‘).click(function () {
//            var v = $(this).text();
//            alert(v);
//        })

//        $(‘ul li‘).bind(‘click‘,function () {
//            var v = $(this).text();
//            alert(v);
//        })

//        $(‘ul li‘).on(‘click‘, function () {
//            var v = $(this).text();
//            alert(v);
//        })

        $(‘ul‘).delegate(‘li‘,‘click‘,function () {
            var v = $(this).text();
            alert(v);
        })

    </script>
</body>
</html>

二：事件列表

事件切换
- hover([over,]out)
- toggle([spe],[eas],[fn])^1.9*
事件

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])

三：阻止默认事件发生

　　1）标签a等默认有跳转事件。如果给a标签在绑定个事件，谁会先执行？

　　　　是绑定的事件先执行，默认的后执行。

　　2）如何阻止默认事件执行？

　　　　在给绑定的事件前加return ；如果return返回的是true继续执行默认事件，如果是false则不执行。如下例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>

    <a id="i1" href="http://www.oldboyedu.com">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return true;
        }
        $(‘#i1‘).click(function () {
            alert(456);
            return false;
        })
    </script>
</body>
</html>