jQuery事件进阶

13 篇文章 0 订阅
12 篇文章 0 订阅

在jQuery中,如果想要为元素添加事件,我们有两种方法:一种是“基本事件”(如click()等);另外一种是“绑定事件”(如on(“click”,function(){}))。

绑定事件

$().on(type, fn)

type是必选参数,它是一个字符串,表示事件类型。例如单击事件是"click"。
fn也是必选参数,它是一个匿名函数,即function(){}。

on()方法不仅可以为“已经存在的元素”添加绑定事件,还可以为“动态创建的元素”添加绑定事件。

$(function () {
            //动态创建元素
            var $btn = $('<input id="btn" type="button" value="按钮">');
            $($btn).appendTo("body");
            //绑定事件
            $("#btn").on("click",function(){
                alert("绿叶,给你初恋般的感觉")
            })
        })

解绑事件

$().off(type)

type是可选参数,它是一个字符串,表示事件类型。例如单击事件是"click"。

合成事件

jQuery为我们提供hover()方法一次性定义鼠标移入mouseenter和鼠标移出mouseleave两个事件。

$().hover(function(){}, function(){})

 $(function () {
            $("h3").hover(function(){
                $("div").css("display", "block");
            }, function(){
                $("div").css("display", "none");
            })
        })

CSS的:hover伪类只限于改变CSS样式,而对于更复杂的操作就没法了
区别mouseover与mouseenter
mouseenter:当鼠标移入元素之内时,事件被触发。而鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素,再次移入才能触发。并且移入子元素不会触发事件。
mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡过程。
也就是说:mouseover支持事件冒泡,而mouseenter不支持事件冒泡。

什么是冒泡,如何阻止冒泡
https://www.cnblogs.com/micro-chen/p/5453870.html
区别visible:hidden与display:none
https://blog.csdn.net/qq_38128179/article/details/80794397

一次事件

$().one(type, fn)

使用one()方法为元素添加一个“只触发一次”的事件。
type是必选参数,表示事件类型。fn也是必选参数,表示事件的处理函数。

自定义事件

用户自己定义的事件。在jQuery中,我们可以使用on()方法来自定义一个事件,然后使用trigger()`方法来触发自定义事件。

$(function () {
            $("#btn").on("delay", function(){//自定义delay事件
                setTimeout(function(){
                    alert("欢迎来到绿叶学习网!")
                },1000)
            })
            $("#btn").click(function(){
                $("#btn").trigger("delay");
            })
        })

$("#btn").on("click" ,function(){
    alert("欢迎来到绿叶学习网!");
}).trigger("click");
//实现自动触发按钮

事件对象

当一个事件发生的时候,这个事件有关的详细信息都会临时保存到一个指定的地方,这个地方就是event对象。每一个事件,都有一个对应的event对象。

type 事件类型
target 事件元素
which 鼠标左、中、右键
pageX、pageY 鼠标坐标
shiftKey 是否按下shift键
ctrlKey 是否按下ctrl键
altKey 是否按下alt键
keyCode 键码值

event.type
 $(function () {
            $("#btn").click(function(e){
                alert(e.type);    //click
            })
        })

return:click

event.target

使用event对象的target属性来获取触发事件的元素。
在JavaScript中,事件是冒泡的,所以this是可以变化的。但是event.target不会变化,它永远都是触发当前事件的元素。一般来说,(this)和(event.target)是等价的。

$("a").click(function(e){
                var result = $(e.target).attr("href");
                alert(result);
                return false;   //阻止超链接跳转
            })
event.which

可以使用event对象的which属性来获取单击事件中鼠标的左、中、右键。
event.which会返回一个数字,其中1表示左键,2表示中键,3表示右键。

 $("a").mousedown(function(e){
                switch(e.which){
                    case 1: alert("你点击的是左键");break;
                    case 2: alert("你点击的是中键");break;
                    case 3: alert("你点击的是右键");break;
                }
            })
event.pageX和event.pageY
event.pageX
event.pageY

使用event对象的pageX和pageY这两个属性来分别获取鼠标相对于页面左上角的坐标。该坐标是以页面作为参考点,不随滚动条移动而变化。
$(document).mousemove(function(e){
var result = “鼠标坐标为:(” + e.pageX + “,” + e.pageY + “)”;
$(“body”).text(result);
})




KeyCode
event.keyCode

获取按下键盘的是哪个键,可以使用event对象的keyCode属性来获取。
event.keyCode返回的是一个数值,对应的键码。

 $(document).keydown(function(e){
                if (e.shiftKey || e.altKey || e.ctrlKey) {
                    alert("禁止使用Shift、Ctrl、Alt键!")
                }
            })

e.keyCode返回的是一个数字,而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值(true或false)。

this

this始终指向触发当前事件的元素

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值