前端学习-jQuery事件操作

jQuery 事件操作

简单方式注册事件

• 语法:jQuery 对象.事件名(事件处理程序);

// 简单注册事件的方式
$("input").click(function () {
     alert(1)
})

on 方法注册事件

• 注册简单事件语法:jQuery 对象.on('事件名',事件处理程序);
• 事件委托的实现:jQuery 对象.on('事件名','选择器',事件处理程序);
  选择器:子孙元素
  注意:在事件处理程序中，this 代表的是子孙元素(所点最先触发的)

// 使用 on 方法注册简单事件
// on() 方法的封装的底层实际是 addEventListener()
$("input").on("click",function () {
    alert(2)
})

// jQuery 中的事件委托
// on() 方法传递三个参数
// 参数1： 事件类型
// 参数2： 进行委托的子元素的选择器
// 参数3： 事件处理程序
$("ul").on("click", "li", function () {
    // 在事件委托过程中，事件函数的内部 this 不是指向事件源，而是指向触发事件的 委托子元素
    alert($(this).text())
})

off 方法移除事件

• 解绑简单的事件:jQuery 对象.off('click',事件处理程序名称)
• 解绑事件委托注册的事件:jQuery 对象.off('click',‘选择器’,事件处理程序名称)

 // 解绑简单的事件
var fun1 = function () {
    alert(2)
}; 
var fun2 = function () {
    alert(3)
};
// 绑定简单事件
$("input").on("click",fun1)
$("input").on("click",fun2)

// 解绑事件
$("input").off("click",fun2)

var fn1 = function () {            
    alert($(this).text())
};
var fn2 = function () {            
    alert($(this).index())
};
// 绑定事件委托的事件
$("ul").on("click", "li", fn1)
$("ul").on("click", "li", fn2)

// 解绑事件委托
$("ul").off("click", "li", fn2)

触发事件

• 语法:jQuery 对象.trigger('事件名');

jQuery 事件对象

事件对象

• 事件处理程序的第一个形参 e

鼠标事件对象相关的属性

• 事件对象.clientX/Y 参照浏览器
• 事件对象.pageX/Y 参照文档
• 事件对象.offsetX/Y 参照元素

键盘事件对象相关的属性

• 事件对象.keyCode 返回键码数字
• 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。 检测是否按下(true)

公共的属性或方法

• 属性
  事件对象.target 最初触发事件的DOM元素
  事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
• 方法:
  事件对象.preventDefault(); 阻止默认行为
  事件对象.stopPropagation(); 阻止事件冒泡