标签：div 自定义 tips 语法 nload sel 命名 窗口 on()
在js事件中,事件绑定分为两种:
1.赋值式事件绑定(又称为DOM0级事件绑定)
//以点击事件为例 obox.onclick = function(){} //无兼容问题,但是不允许重复绑定
2.监听式事件绑定(又称为DOM2级事件绑定)
//可以重复绑定,但是有兼容
obox.addEventListener("click",function(){}) //有兼容问题(ie不支持) obox.attachEvent("onclick",function(){}) //仅ie9支持
在jq事件中,事件绑定只有 监听式绑定一种
$("#box").click(function(){})
元素.事件名(函数名)
$("#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") //删除命名的事件
$("#btn").bind("click.a",function(){console.log(1)})
$("#btn").bind("click.b",function(){console.log(2)}) //支持事件命名
$("#btn").unbind("click.a") //删除命名的事件
$("#btn").one("click",function(){console.log(1)})
one绑定是一次性绑定,执行事件后立即删除
$("#btn").hover(function(){console.log("进入")},
function(){console.log("离开")})
鼠标经过执行第一个函数,鼠标离开执行第二个函数
Tips:在js中有两种鼠标经过离开的事件
由此可见jQuery封装的是js中的onmouseenter和onmouseleave
$("#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绑定第二个参数是元素时,变为事件委托,该元素为真正执行事件的元素
在jq当中，基本上所有的js事件都有一个对应的jq事件，下面是jq当中常用的事件。
鼠标事件:
键盘事件:
表单事件:
文档/窗口事件:
键盘事件的差异:
全部事件方法可以访问W3C文档： https://www.w3cschool.cn/jquery/jquery-ref-events.html
标签：div 自定义 tips 语法 nload sel 命名 窗口 on()
原文地址：https://www.cnblogs.com/yad123/p/11561562.html
