jQuery事件绑定，事件注销和自定义事件

2018-12-11 本文已影响0人 moly琴

jQuery

事件

1. 事件注册

1.1 普通事件注册
.bind() --- 重点

2.1.2 事件委派(事件委托)
.on() --- 重点
.delegate() --- 了解

窗口加载事件

原生：
window.onload = function(){}
```
// DOM加载事件
window.onload = function(){
        //原生获取
        var box = document.querySelector("#box");
        //console.log(box);
    }
```
作用：等待页面中所有的资源加载完毕后执行的代码
所有资源：图片 css样式 htmlDom 视频...
缺点：同一事件只能注册一次，如果重复注册多次，那么后面的将会覆盖之前的
jQuery中DOM加载事件
语法：

       $(document).ready(function(){})
       })

方式一：

    $(document).ready(function(){
            //jq获取
            var box2 = $("#box");
            console.log(box2.html());
            console.log(box2.attr("title"));
        });

方式二（常见书写方式）:

       $(function(){
            //jq获取
            var box2 = $("#box");
            console.log(box2.html());
            console.log(box2.attr("title"));
        });

作用：当html DOM资源加载完毕后执行的代码

简写：
$().ready(function(){})
$(function(){}) --- 推荐使用

注意：
jQuery的DOM加载事件，可以注册多次，从加载速度上比较，jQuery的DOM加载事件相比原生的窗口加载事件要快一些，由于需要加载的资源少一些，并且有简写形式，原生只有一种书写方式

jq窗口加载事件(补充)

    $(window).load(function(){});

1.普通事件注册

语法： jq对象.bind("不带on事件类型",事件处理函数)
案例：

        $("div").bind("click",function(){
           alert(12);
        });

简写： jq对象.事件类型(事件处理函数)

2.一个事件注册一个事件处理函数

    $("div").bind("click",function(){
       alert(12);
    });

3.一个事件注册多个事件处理函数

链式DOM操作----jQuery的特点，内部函数功能代码之后会返回对象

    $("div").click(function () {
        alert(3);
    }).click(function () {
        alert(4);
    });

4.两个事件类型同时注册一个事件处理函数

    //需求： 移入div框，如果当前含有类名test,就删除,否则就添加
    //需求： 移出div框，如果当前含有类名test,就删除,否则就添加
    $("div").bind("mouseover mouseout",function(){
        $(this).toggleClass("test");
    });

5.多个事件类型对应不同的事件处理函数

    $("div").click(function(){
        alert(1)
    }).mouseover(function () {
        $(this).css("background" ,"deepskyblue")
    }).mouseout(function () {
        $(this).css("background" ,"red")
    })

链式DOM操作是jQuery的一种特点。
理解 jQuery中可以实现链式DOM操作的原因，由于this关键字问题（jQuery中让this永远指向调用者）

    ;(function ($) {
        var _that;
        // 实现插件功能函数
        function _插件名 () {
            // 保留this
            _that = this;

            // 插件功能代码

            // 返回this 方便链式调用
            return _that;
        }
        // 挂在jQuery的原型上
        $.fn.插件名 = _插件名；
    })(jQuery)

6. 普通事件注册出现的bug

问题： 对于未来新增的元素不存在事件行为

2.事件委派

事件委派原理

1.1 子元素的事件冒泡到父元素委托给父元素绑定事件

把注册的事件委托给父辈元素，然后再由父辈元素派发给子级元素
注意：父辈元素一定是存在的元素

1.2 事件委派可以解决的问题

事件重复绑定问题
动态元素无法直接绑定事件问题

事件委派
2.1 语法

jq对象(父辈元素).delegate(子级元素,事件类型,事件处理函数);
注意：早期使用比较多，现在不怎么使用

//需求：点击button按钮，在box框中追加新的段落元素
$("button").click(function () {
    //对于未来新增的元素不存在事件行为
    $("<p>这是新增元素</p>").appendTo("#box");
});
//需求：给box框中所有段落注册点击事件
$("#box").delegate("p","click" ,function(){
            alert(2);
        })

2.2语法 -- 推荐使用

jq对象(父辈元素).on(事件类型,子级元素，事件处理函数)

现在都用on给绑定事件

 $("#box").on("click" ,"p",function(){
            alert(2);
        })

1. 事件注销 -- 了解

普通事件注销：
语法： jq对象.unbind()
案例：

        $("div").unbind();//注销所有事件
        $("div").unbind("click");//注销所有指定类型的事件
        $("div").unbind("click",a);//注销所有指定类型的指定处理函数事件

事件委派注销：
语法： jq对象.off()
案例：

        $("div").off();//注销所有事件
        $("div").off("click");//注销所有指定类型的事件
        $("div").off("click",a);//注销所有指定类型的指定处理函数事件

值得注意的是：
注销指定类型的指定事件处理函数事件，要使用该函数的名称，才是指代同一个函数，函数为引用数据类型，存放在堆中，要使用引用地址才指代同一个，如果形式一样，也不是指代同一个函数，而只是长相一样的不同的两个函数

注销指定事件处理函数，函数要抽出去

1. 合成事件

语法：

        jq对象.hover(function(){
            //相当于mouseenter  mouseover
        },function(){
            //相当于mouseleave  mouseout
        });

mouseover和mouseenter的区别：

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover事件
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件

1. 事件对象

语法：作为事件处理函数的参数传入
案例： jq对象.事件类型(事件处理函数(event){})
属性：
event.pageX : 离窗口的水平坐标
event.pageY : 离窗口的垂直坐标
方法：
event.stopPropagation() : 阻止事件传播
event.preventDefault() : 阻止浏览器的默认行为

// 需求 点击页面，判断点击的是哪个键
$(function() {
        $(document).mousedown(function(event) {
            //1：鼠标左键；2：鼠标中建；3：鼠标右键  
            alert(event.which);
        });
    });

1. 表单事件

1.1 onsubmit ：点击提交按钮(submit)在数据提交之前触发的事件
$("form").sumit(function(){})
1.2 onfocus ：获取焦点事件
作用：获取焦点时，清空value属性值
现在通常用css3的placeholder占位符
1.3 onblur ：失去焦点事件
作用：验证写入的数据是否合法
1. 客户端验证：验证写入的数据是否合法(符合一定规则)
2. 服务器端验证：验证用户名是否能够注册(是否在数据库中存在)
1.4 onchange ：表单内容改变触发的事件
通常用于：单选框多选框下拉框

jQuery自定义事件类型

1.自定义事件
什么叫自定义事件
在jQuery内部没有的事件类型可以通过trigger()自己自定义

2.实现自定义事件的步骤（三步）

找到最接近的原生事件
触发原生事件，在事件里面判断，在特定情况使用jQuery的触发器trigger() 自定义一个事件类型（触发注册一个自定义事件类型）
绑定使用自定义事件

    <button id="btn">点我 用右键</button>
    <script>
        // a) 找到最接近的原生事件
        $('#btn').on('mousedown', function (e) {
            // b) 触发原生事件 在事件里面判断 如果 e.which === 3 就是点击右键
            if (e.which === 3) {
                // c) 在特定情况 使用jQuery的触发器 trigger() 
                //自定义一个事件类型（触发 注册一个自定义事件类型）
                $(this).trigger('rightClick')
            } else if (e.which === 2) {
                $(this).trigger('centerClick')
            }
        })
        // d) 绑定使用自定义事件
        $('#btn').on('rightClick', function () {
            alert('我是自定义的右击事件！')
        })
        $('#btn').on('centerClick', function () {
            alert('我是自定义滚轮点击事件！')
        })
    </script>