jQuery 事件其他方法

Posted 2021-08-21 YuLong~W

tags:

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

文章目录

jQuery事件
jQuery其他方法

jQuery事件

事件注册

语法：element.事件(function(){})

$('div').click(function(){  事件处理程序 })

其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

事件处理

on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：element.on(events,[selector],fn)

参数说明：

events:一个或多个用空格分隔的事件类型，如"click"或"keydown"
selector: 元素的子元素选择器
fn:回调函数，即绑定在元素身上的侦听函数

好处：

可以绑定多个事件，多个处理事件处理程序

 $('div').on({
	  mouseover: function(){处理代码}, 
	  mouseout: function(){处理代码},
	  click: function(){处理代码}	
});

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click', 'li', function() {处理代码});
//事件绑定在ul身上，但触发对象是ul的子元素li

动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

 $('div').on('click','p', function(){处理代码});

一次性事件绑定： 如果有的事件只想触发一次，可以使用 one() 来绑定事件

语法：element.one(events,[selector],fn)

$("p").one("click", function() {
    alert('一次绑定');
})

off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序

语法：element.off(events,[selector],fn)

$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click")  // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li");   // 解绑事件委托

trigger() 自动触发事件

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

语法：element.事件()
语法：element.trigger(事件)
语法：element.triggerHandler(事件) 注意：不会触发元素的默认行为

$('p').on('click', function () {
  	alert('hi~');
}); 
$('p').trigger('click'); // 此时自动触发点击事件，不需要鼠标点击

事件对象

事件被触发，就会有事件对象的产生

语法：element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()

$(function() {
    $(document).on('click', function() {
        console.log('点击了document');

    })
    $('div').on("click", function(event) {
        // console.log(event);
        console.log('点击了div');
        event.stopPropagation();
    })
})

jQuery其他方法

jQuery对象拷贝

把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法

语法： $.extend([deep], target, object1, [objectN])

deep: 如果设为true 为深拷贝，默认为false 浅拷贝
target: 要拷贝的目标对象
object1: 待拷贝到第一个对象的对象
objectN: 待拷贝到第N个对象的对象

浅拷贝：是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝：完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象

$(function() {
    var targetObj = {
        id: 0,
        msg: {
            sex: '男'
        }
    };
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        }
    };
    // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
    $.extend(targetObj, obj);
  	targetObj.msg.age = 20;
    console.log(targetObj); //msg :{sex: "男", age: 20}
    console.log(obj); //msg :{sex: "男", age: 20}
    // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 
    $.extend(true, targetObj, obj);
    targetObj.msg.age = 20;
    console.log(targetObj); // msg :{sex: "男", age: 20}
    console.log(obj); //msg :{sex: "男", age: }
})

多库共存

jQuery使用 $ 作为标示符，随着jQuery的流行,其他 js 库也会用这 $ 作为标识符，这样一起使用会引起冲突

$(function() {
    function $(ele) {
        return document.querySelector(ele);
    }
    console.log($('div'));
    // 1. 如果 $ 符号冲突 使用 jQuery
    jQuery.each();
    // 2. 让jquery 释放对 $ 控制权 自己决定名字
    var zidingyi = jQuery.noConflict();
    console.log(zidingyi('span'));
    zidingyi.each();
})