jQuery 入门 -- 事件 事件绑定与事件委托

Posted 2022-11-16 yad123

jQuery事件与js事件

在js事件中,事件绑定分为两种:

1.赋值式事件绑定(又称为DOM0级事件绑定)

//以点击事件为例
obox.onclick = function()    //无兼容问题,但是不允许重复绑定

2.监听式事件绑定(又称为DOM2级事件绑定)

//可以重复绑定,但是有兼容

obox.addEventListener("click",function()) //有兼容问题(ie不支持)

obox.attachEvent("onclick",function())  //仅ie9支持

在jq事件中,事件绑定只有 监听式绑定一种 

$("#box").click(function())

事件绑定的语法

 元素.事件名(函数名)

绑定方式

1.on绑定(支持事件委托)

$("#btn").on("click.a",function()console.log(1))
$("#btn").on("click.b",function()console.log(2))   //重复绑定

tip:在on绑定的过程中,存在一个命名空间,可以给绑定的事件自定义命名,使用点语法,例如:click.a

off()方法可以删除由on()绑定的事件

$("#btn").off("click.a")   //删除命名的事件

2.bind绑定(不支持事件委托  语法与on绑定一致)

$("#btn").bind("click.a",function()console.log(1))
$("#btn").bind("click.b",function()console.log(2))   //支持事件命名

 unbind()方法可以删除由bind绑定的事件

$("#btn").unbind("click.a")  //删除命名的事件

3.one绑定

 $("#btn").one("click",function()console.log(1))

one绑定是一次性绑定,执行事件后立即删除

4.hover绑定(不会触发事件冒泡)

$("#btn").hover(function()console.log("进入"),
function()console.log("离开"))

鼠标经过执行第一个函数,鼠标离开执行第二个函数

 

Tips:在js中有两种鼠标经过离开的事件

• onmouseover和onmouseout   ----  会触发事件冒泡
• onmouseenter和onmouseleave   ----    不会触发事件冒泡

由此可见jQuery封装的是js中的onmouseenter和onmouseleave

 

5.模拟事件执行

$("#btn").trigger("click")    //会触发事件冒泡
$("#btn").triggerHandler("click")  //不会触发事件冒泡

该方法执行后,会立即执行绑定的事件

 setInterval(() => 
        $("#btn").trigger("click")
    , 1000);     //每一秒执行一次点击事件

事件委托

在js中事件委托就是,利用事件冒泡的原理,将事件加到父元素身上,配合事件源,找到真正执行事件的元素

<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
</ul>

var oul = document.querySelector("ul");     
    
    oul.addEventListener("click",function(eve)   //给父级元素添加事件
        var e = eve || window.event;
        if(e.target.nodeName == "LI")   //事件冒泡过程中当事件源节点名与真正的元素相等时,执行事件
            console.log(e.target)
        
    )

在jq中,我们有了更加方便的事件委托方式

$("ul").on("click","li",function()console.log(this))

//选中父级,给父级添加on绑定,如果on绑定第二个参数是元素时,变为事件委托,该元素为真正执行事件的元素

 

jQuery事件

在jq当中，基本上所有的js事件都有一个对应的jq事件，下面是jq当中常用的事件。

鼠标事件:

• click
• dblclick
• mouseenter
• mouseleave

键盘事件:

• keypress
• keydown
• keyup

表单事件:

• submit
• change
• focus
• blur

文档/窗口事件:

• load
• resize
• scroll
• unload

键盘事件的差异:

• keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
• keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
• keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码.

 

全部事件方法可以访问W3C文档：

https://www.w3cschool.cn/jquery/jquery-ref-events.html