当前位置：首页 > 资讯 >

jQuery从入门到熟练(18)

2023-04-24 来源:飞速影视

5、事件

(1) 事件处理
绑定事件eventName(function(){})：绑定对应事件名的监听, 例如：$("#div").click(function(){});on("eventName", function(){})：通用的绑定事件监听, 例如：$("#div").on("click", function(){})常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用
解绑事件off("eventName")
<style type="text/css"> * { margin: 0px; } .out { position: absolute; width: 200px; height: 200px; top: 20px; left: 10px; background: blue; } .inner { position: absolute; width: 100px; height: 100px; top: 50px; background: red; } .divBtn { position: absolute; top: 250px; }</style><body style="height: 2000px;"><div class="out"> 外部DIV <div class="inner">内部div</div></div><div class="divBtn"> <button>取消绑定所有事件</button> <button>取消绑定mouseover事件</button> <button>测试事件坐标</button> <a href="http://www.baidu.com">百度一下</a></div><script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> //1. 给.out绑定点击监听(用两种方法绑定) /*$(".out").click(function () { console.log("click out") })*/ $(".out").on("click", function () { console.log("on click out") }) //2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定) /* $(".inner") .mouseenter(function () { // 进入 console.log("进入") }) .mouseleave(function () { // 离开 console.log("离开") }) */ /* $(".inner") .on("mouseenter", function () { console.log("进入2") }) .on("mouseleave", function () { console.log("离开2") }) */ $(".inner").hover(function () { console.log("进入3") }, function () { console.log("离开3") }) //3. 点击btn1解除.inner上的所有事件监听 $("#btn1").click(function () { $(".inner").off() }) //4. 点击btn2解除.inner上的mouseenter事件 $("#btn2").click(function () { $(".inner").off("mouseenter") }) //5. 点击btn3得到事件坐标 $("#btn3").click(function (event) { // event事件对象 console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角 console.log(event.clientX, event.clientY) // 原点为窗口的左上角 console.log(event.pageX, event.pageY) // 原点为页面的左上角 }) //6. 点击.inner区域, 外部点击监听不响应 $(".inner").click(function (event) { console.log("click inner") //停止事件冒泡 event.stopPropagation() }) //7. 点击链接, 如果当前时间是偶数不跳转 $("#test4").click(function (event) { if(Date.now()%2===0) { event.preventDefault() } })</script>

1 ...16 17 18 19 20 ...33 查看全文

jQuery从入门到熟练(18)

5、事件

石榴熟了之一拍到底

从宫本到你

从民工到明星

从爱情到幸福

从零到一的爱情

入地无门

破门而入

嫁入豪门