jQuery基础使用（三）

最新推荐文章于 2024-09-03 01:23:13 发布

WihauShe

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量96

点赞数

分类专栏： Web 文章标签： jQuery 基础

本文链接：https://blog.csdn.net/qq_39376697/article/details/84075632

版权

Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

(个人经验，仅供参考，错误之处，敬请谅解)

事件操作

一、鼠标事件

click() 与dbclick()事件，点击与双击
mousedown() 与 mouseup() 事件，鼠标单击按下与松开
mouseover() 与 mouseout() 事件，鼠标移进与移出
mousemove() 事件，鼠标移动
mouseenter() 与 mouseleave() 事件，与over、out不同点在于只对绑定的元素有效
hover() 事件，enter 与 leave 的结合
focusin() 与 focusout() 事件，得到和失去焦点

二、表单事件

focus() 与 blur() 事件，触发时，父元素产生focusin() 和 focusout() 事件
change() 事件，用于 input、select、textarea元素
select() 事件，只用于select 和textarea 元素
submit() 事件，监听提交，可以return false 阻止提交行为（e.preventDefault)

三、键盘事件

keydown() 与 keyup() 事件，键盘按下与松开
keypress() 事件，只能捕获单个字符，不能捕获组合键，无法响应系统功能键如（delete，backspace）不区分小键盘和主键盘的数字字符

四、事件绑定与解绑

on(）绑定事件

$("#elem").on(‘click’,function(){}) 单事件绑定
$("#elem").on(“mouseover mouseout”,function(){ }); 多事件绑定同一函数
$("#elem").on({mouseover:function(){}, mouseout:function(){} });多事件绑定不同函数
也可以进行委托绑定：
$(‘body’).on(‘click’, ‘a’, function(e) {
alert(e.target.textContent)
})

off() 事件，解除绑定多事件以空格隔开，不加参数解绑所有事件

五、事件对象

event.target 接受事件的目标元素（不可变，而this可变）
event.type 事件类型
event.pageX event.pageY 获取鼠标当前相对于页面的坐标
event.preventDefault() 阻止默认行为
event.stopPropagation() 阻止事件冒泡
event.which
event.currentTarget 冒泡中当前的元素

六、自定义事件

trigger() 事件，根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

    $("button:first").click(function(event,bottonName) {
        bottonName = bottonName || 'first';
        update($("span:first"),$("span:last"),bottonName);
    });

    //通过自定义事件调用，更新次数
    $("button:last").click(function() {
        $("button:first").trigger('click','last');
    });

    function update(first,last,bottonName) {
        first.text(bottonName);
        var n = parseInt(last.text(), 10);
        last.text(n + 1);
    }