jQuery 入门 -- 事件 事件绑定与事件委托
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