美文网首页
绑定事件bind

绑定事件bind

作者: 暴走的金坤酸奶味 | 来源:发表于2018-09-25 07:57 被阅读0次

    click

    
    $(function(){
                只能绑定click事件,不能绑定其他的了
                 $('#btn').click(function() {
                //  /* Act on the event */
                });
    

    bind方式可绑定多个事件
                $('#btn').bind('click mouseover', function() {
                    alert('hello!');
    
                    //取消绑定事件
                    $(this).unbind('mouseover');
    

    主动触发与自定义事件

    主动触发

    可使用jquery对象上的trigger方法来触发对象上绑定的事件。

    自定义事件

    除了系统事件外,可以通过bind方法自定义事件,然后用tiggle方法触发这些事件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义事件</title>
        <style type="text/css">
            
        </style>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //自定义事件只能用bind方式绑定,第一个参数是事件的名字,第二个参数是事件发生时执行的函数
                $('#btn1').bind('hello', function(){
                    alert('hello');
                })
                $('#btn1').bind('click', function(){
                    alert('click');
                })
                $('#btn2').click(function() {
                    // trigger即可以触发自定义事件,也可以触发原始的事件
                    $('#btn1').trigger('hello');
                    $('#btn1').trigger('click');
                });
                
                //不一定点击按钮触发,也可页面加载时触发,也可在满足某种if条件时触发
                // $('#btn1').trigger('hello');
            })
        </script>
    </head>
    <body>
        <input type="button" value="按钮" id="btn1">
        <input type="button" value="按钮2" id="btn2">
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:绑定事件bind

          本文链接:https://www.haomeiwen.com/subject/ksrkoftx.html