Jquery 事件绑定使用整理

一、常见事件类型

1.鼠标事件

2.键盘事件

3.触屏事件

4.BOM/DOM/Element 自带事件

5.自定义事件

事件的理解：

事件 ： 在xxxx情况下触发 一个方法/代码

事件命名 onXXXX 的模式，当xxx的时候执行。

//自定义事件 案例,当页面加载成功后3秒钟，触发
var num = 0;
var timer=null;
timer=setInterval(function () {
    num++;
    console.info(num);
    if (num == 3) {
        sayHello();//自定义事件
        clearInterval(timer);
    }
}, 1000);

function sayHello() {
    console.info('Hello word!');
}

二、JQuery的事件注册方式

    <div class="btn-block">
        <div class="btn">
            按钮1
        </div>

        <p></p>

        <div class="btn btn-add">
            追加按钮
        </div>
    </div>

1.简单方式  在dom原生方法onXXX基础上，相同的名称注册onClick=>click

        $('.btn').click(function () {
            var txt = $(this).text();
            alert(txt);
        });

2.on/off 方式，注册或者取消注册事件，可以注册多个

        $('.btn').on({
            click: function () {
                var txt = $(this).text();
                alert(txt);
            },
            mouseenter: function () {
                $(this).css('font-size', '20px');
            },
            mouseleave: function () {
                $(this).css('font-size', '15px');
            }
        });

3.on 注册事件在父元素上，子元素触发，针对“动态加载的元素”可以使用这种注册方式

        //事件注册再父元素上
        var index=0;
        $('.btn-block').on({
            click: function () {
                var txt = $(this).text();
                alert(txt);

                index++;
                $('.btn-block').append('<p></p>')
                    .append('<div class="btn">新增按钮' + index + '</div>');
            },
            mouseenter: function () {
                $(this).css('font-size', '20px');
            },
            mouseleave: function () {
                $(this).css('font-size', '15px');
            }
        }, '.btn');

4.取消注册事件

off(events,[selector],[fn])

取消所有事件

$("p").off()

取消click事件，取消指定名称的事件

$("p").off( "click", "**" )

三、几个常用的Dom事件

1.document.ready Html文本加载完成触发

        $(function () {
            //document.ready
            console.info('ready');
        });

        $(document).ready(function () {
            console.info('ready');
        });

2.window.onload 页面加载完毕 触发（包含了html，css，js，图片以及其他链接）

$(window).on('load', function () {
            console.info('onload');
        });

3.window.resize 浏览器窗体大小改变触发

        $(window).resize(function () {
            var winWidth = $(window).width();
            console.info(winWidth);
        });

4.window.scrool/element.scroll 滚动条滚动触发

        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); //已经隐藏的内容的高度 ； 已经卷起来高度；已经滚起来的高度
            var winHeight = $(window).height(); //当前展示出来的高度
            var docHeight = $(document).height(); //所有内容的高度
            console.info('scrollTop:' + scrollTop + '----height:' + winHeight + '----docHeight:' + docHeight);

            //触底加载更多
            if ((scrollTop + winHeight) >= docHeight) {
                console.info('到底了，可以加载更多，自定义事件可以触发');
            }
        });

四、事件其他使用等待下期分享。

更多：

 jquery.fancybox图片预览组件使用整理_fancyBox3使用整理

网页在线打开PDF_网站中在线查看PDF之TouchPDF

JS 自定义实现数字滚动处理