前端系列之jQuery(jQuery事件)

DOM事件模型

DOM 0级事件模型

<input type="button" onclick="doSomething()" />
input.onclick = function(){...}

//兼容性差异
event= event || window.event;
var target = event.target || event.srcElement;

这里写图片描述

这里写图片描述

只支持一个DOM事件处理函数

DOM 2级事件模型

addEventListener(eventType,listener,userCapture)

这里写图片描述

attachEvent(eventName,handler)

冒泡机制、捕获过程

这里写图片描述

jQuery的事件操作

提供了统一的事件处理方法
允许添加多个事件处理函数
使用标准的事件名称(不带on)
事件示例作为事件处理函数的第一个参数
标准化事件实例最常用的属性
提供了统一的事件取消和阻止默认行为的方法

jQuery的事件模型

添加事件处理

on(eventType[,selector][,data],hadler)
参数1:事件的名称
参数2:选择器
参数3:数据
参数4:事件处理函数

这里写图片描述

这里写图片描述

统一方法和属性

阻止冒泡:stopPropagation()

阻止默认行为:preventDefault()

阻止冒泡和默认行为:return false

这里写图片描述

所有支持的事件

这里写图片描述

这里写图片描述

一次性的事件处理

one(eventType[,selector][,data],handler)

这里写图片描述

移除事件处理

off(eventType[,selector][,handler])

这里写图片描述

事件实例对象

这里写图片描述

这里写图片描述

红色部分表示有浏览器兼容问题,但是jQuery做了兼容处理

事件实例对象的方法

preventDefault() 
stopPropagation()//阻止冒泡行为
stopImmediatePropagation()//立即阻止冒泡行为

这里写图片描述

触发事件

这里写图片描述

这里写图片描述

快捷方法

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

自定义事件

这里写图片描述

事件命名空间

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值