迷人的JQuery之JQuery中的事件

最新推荐文章于 2021-08-13 16:38:04 发布

星海拾遗

最新推荐文章于 2021-08-13 16:38:04 发布

阅读量343

点赞数

分类专栏：生命不息，填坑不止

本文链接：https://blog.csdn.net/qq_38280242/article/details/104316673

版权

生命不息，填坑不止专栏收录该内容

47 篇文章 1 订阅

订阅专栏

我们知道，如果在html文档的<head>中编写JavaScript代码时,如果不将代码写入window.onload(){}函数中可能会报错。原因是浏览器先执行JavaScript代码，而代码中涉及到的节点操作还未被浏览器加载出来。所以如果我们要在html页面的<head>里使用JavaScript代码时一定要将代码写在window.onload函数中。window.onload函数的作用是让浏览器完全加载文档所需的DOM结构以及加载的资源之后再执行JavaScript代码。

一、加载DOM

1.1、加载DOM原生JavaScript和JQuery的区别

二、事件绑定

2.1、模拟事件操作

一、加载DOM

1.1、加载DOM原生JavaScript和JQuery的区别

说回正题。Jquery代码也是JavaScript代码。Jquery中的一个类似的方法是

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

说是类似，是因为他们不完全相等。

其一在于，原生JavaScript代码中的window.onload函数需要在页面结构完全加载完成和所需要的资源加载完成后才能执行。而Jquery中的$(window).ready方法只需要在页面结构完全加载完成则可以执行。简单的来说，如果一个页面全部是图片。window.onload方法需要在图片全部加载成功之后才能执行。而$(window).ready只需要在image标签加入文档之后就能够执行。

区别二在于

     window.onload = function () {
        console.log(1)
    }

    window.onload = function () {
        console.log(2)
    }

如果像这样编写的JavaScript代码，那么第一个window.onload方法是无效的，在页面加载完成之后控制只会输出2，原因是JavaScript之后的同名变量会覆盖掉之前的同名变量。

而等价的Jquery代码

    $(window).ready(function () {
        console.log(1)
    })
    $(window).ready(function () {
        console.log(2)
    })

则两个都有效

我们在真正的项目中往往使用的是$(window).ready的简写模式

    $(function () {
        console.log(1)
    })

此方法是$(window).ready的简化函数

二、事件绑定

Jquery中的事件绑定函数是bind()

bind函数一共有三个参数，第一个参数为绑定的触发事件类型。第二个为作为event.data值传给事件对象的额外数据，第三个是绑定的触发函数。

一个简单的绑定函数的栗子

    $(window).bind('click',function () {
        console.log(1)
    })

简写形式

    $(window).click(function () {
        console.log(1)
    })

一个使用的函数，如果我们想在鼠标进入目标时执行函数，移出时执行另一个，代码应该这么写

    $('div ul li').bind('mouseenter',function () {
        $(this).hide()
    }).bind('mouseout',function () {
        $(this).show()
    })

现有一个实用的函数，hover函数，他接受两个参数，第一个mouserenter函数，第二个是mouseleave函数。以上函数用hover改写为

    $('div ul li').hover(function () {
        $(this).hide()
    },function () {
        $(this).show()
    })

还有一个实用的toggle函数，它可以接受任意个参数，目标元素按照接受参数的顺序依次执行。

Jquery不支持事件捕获。

Jquery实现阻止事件冒泡的代码是stopProgration，阻止事件的默认行为是，preventDefault。

移除事件函数unbind。该函数在没有参数是解绑所有函数。在只有事件类型作为参数时候，解绑该事件类型的所有参数。

如果某些函数只需要执行一次。Jquery也有对应的方法one()函数。

2.1、模拟事件操作

讲到模拟事件操作，我们来顺便说一下JavaScript原生的模拟事件操作。

    var btn = document.getElementById('btn')
    var clickEvent = document.createEvent("MouseEvent")
    clickEvent.initEvent('click')
    btn.dispatchEvent(clickEvent)

第一步获取标签节点，第二步创建鼠标事件，鼠标事件初始化为点击事件，在按钮上应用此事件。

相比之下在JQuery中实现模拟事件要方便的多。使用trigger函数，trigger英文原意是触发。我们用trigger函数来实现一下JavaScript按钮点击事件

$('#btn').trigger('click')

一行足以，如果仅仅只是点击事件，也可以写成以下形式要更加方便

 $('#btn').click()

JQuery中的模拟事件可以用来触发自定义的事件

$('#btn').bind('MyClick',function () {
       console.log(1)
   })
    
    $('#btn').trigger('click')

如果我们只需要执行函数而不需要浏览器触发默认行为，比如我们在input输入框中绑定了focus函数，但是我们不需要input获得焦点，只需要执行函数，那么则使用trigerehander方法

   $('input').bind('focus',function () {
       console.log(1)
   })
   $('input').triggerHandler('focus')

最后一个重要的知识点，添加事件命名空间。

    $("#btn").bind('click',function () {
        console.log(1)
    }).bind('click.nameSpace',function () {
        console.log(2)
    })
    $("#btn").trigger('click!')

在事件小数点后面的就是命名空间。《锋利的JQuery》上说点击按钮两个函数都会触发，trigger后面加上感叹号！后就只会匹配不在命名空间的事件函数。但是我的chrome浏览器两个都没有输出，不知道为什么