<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" id="btn" value="点击">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</body>
<script src="../jquery.js"></script>
<script>
// 赋值：不允许重复绑定，没有兼容。
// 监听：可以重复绑定，有兼容
$("#btn").click(fn)
function fn(){
console.log("hello")
}
$("#btn").click(function(){
console.log(2)
})
// 总结：jq中只有监听式绑定事件，没有赋值式
// 注意：jq中只有监听式绑定事件
// 1.事件名绑定
// 元素.事件名(函数)
$("#btn").mousedown(function(){
console.log(1)
})
// 2.on绑定,可做事件委托
$("#btn").on("click.a",function(){
console.log(1)
})
$("#btn").on("click.b",function(){
console.log(2)
})
// off删除on绑定的方法
$("#btn").off("click.a")
// 事件委托,click后面写上委托的元素
$("ul").on("click","li",function(){
console.log(this)
})
// 3.bind绑定，不能时间委托
$("#btn").bind("click.a",function(){
console.log(1)
});
$("#btn").bind("click.b",function(){
console.log(2)
});
// unbind删除bind绑定的方法
$("#btn").unbind("click.a")
// 4.one绑定,执行一次之后就结束这个事件
$("#btn").one("click",function(){
console.log(1)
})
// 5.hover绑定：没有事件冒泡，第一个函数是进入，第二个函数是出来。只写一个就只有进入事件
// mouseover
// mouseout
// 没有事件冒泡
// mouseenter
// mouseleave
$("#btn").hover(function(){
console.log("进入")
},function(){
console.log("离开")
})
// 6.模拟事件执行
//每隔一秒会console.log一个1
setInterval(() => {
// 有事件冒泡
$("#btn").trigger("click")
// 没有事件冒泡
// $("#btn").triggerHandler("click")
}, 1000);
</script>
</html>
jq的事件对象
点击按钮，会出现点击的这个事件的全部信息
$("#btn").click(fn)
function fn(){
console.log(event) //MouseEvent {isTrusted: true, screenX: 30, screenY: 91, clientX: 30, clientY: 20, …}
}