这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战

jQuery 事件操作

简单方式注册事件

• 语法：jQuery 对象.事件名(事件处理程序);

on 方法注册事件

on() 方法的封装的底层实际是 addEventListener(), 不同于onclick, 可以给同一个元素注册多次同种事件.

• 注册简单事件语法：jQuery 对象.on('事件名',事件处理程序);

• 事件委托的实现：jQuery 对象.on('事件名','选择器',事件处理程序);

选择器：子孙元素

注意：在事件处理程序中，this 代表的是子孙元素（所点最先触发的）

        $("input").on("click",function () {
            alert(2)
        })

事件委托

        $("ul").on("click", "li", function () {
            // 在事件委托过程中，事件函数的内部 this不是指向事件源，而是指向触发事件的委托子元素
            alert($(this).text())
        })

off 方法移除事件

• 解绑简单的事件：jQuery 对象.off('click',事件处理程序名称)

• 解绑事件委托注册的事件：jQuery 对象.off('click',‘选择器’,事件处理程序名称)

解绑简单事件

        // 定义事件处理函数
        var fun1 = function () {
            alert(2)
        }; 
        var fun2 = function () {
            alert(3)
        };
        // 绑定简单事件
        $("input").on("click",fun1)
        $("input").on("click",fun2)

        // 解绑事件
        $("input").off("click",fun2)

解绑事件委托

        var fn1 = function () {            
            alert($(this).text())
        };
        var fn2 = function () {            
            alert($(this).index())
        };
        // 绑定事件委托的事件
        $("ul").on("click", "li", fn1)
        $("ul").on("click", "li", fn2)

        // 解绑事件委托
        $("ul").off("click", "li", fn2)

触发事件

• 语法：jQuery 对象.trigger('事件名');

自动触发某个事件, 比如说触发轮播图的自动轮播.

    // 可以利用 JQ 中的 trigger 方法，自动执行右按钮事件
    function autoPlay() {
      $(".arrow-right").trigger("click");
    }
    var timer = setInterval(autoPlay,1000);

    // 鼠标移上停止定时器
    $(".slider").on("mouseenter", function () {
      clearInterval(timer);
    })
    // 鼠标离开重新开启定时器
    $(".slider").on("mouseleave", function () {
      timer = setInterval(autoPlay,1000)
    })

jQuery 事件对象

事件对象

• 事件处理程序的第一个形参 e

鼠标事件对象相关的属性

• 事件对象.clientX/Y 参照浏览器

• 事件对象.pageX/Y 参照文档

• 事件对象.offsetX/Y 参照祖先级元素

键盘事件对象相关的属性

• 事件对象.keyCode 返回键码数字

• 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。检测是否按下（true）

        // 键盘按下事件中，获取键码的数字
        $(document).keydown(function (e) {
            console.log(e.keyCode)
        })

公共的属性或方法

• 属性

事件对象.target 最初触发事件的DOM元素

事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素

• 方法：

事件对象.preventDefault(); 阻止默认行为 (比如a标签)

事件对象.stopPropagation(); 阻止事件冒泡

多库共存问题

关于 $ 冲突的问题

解决方案1：jQuery 中不使用 $,使用 jQuery

解决方案2：jQuery 库释放 $ 符合的使用权，用其他简单的符号代替

jQuery.noConflict(); 释放 $,把$ 代表的函数返回给用户，用户可以用其他变量接收

    // 解决方法2：释放 $ 符号
    var $1 = jQuery.noConflict();
    // console.log($1)
    $1("button").click(function () {
      alert(1);
    })

jQuery(五) - 事件操作和插件