1. 事件注册
- 单个事件的注册:
element.事件(function () { ... } )
$(“div”).click(function () { … })
其他事件和原生 js 基本一致。比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。
- 使用 on() 方法在匹配元素上绑定一个或多个事件的事件处理程序。
语法:element.on(events, [selector], fn);
events: 一个或多个用空格分隔的事件。
selector: 将要传递给事件处理函数的数据映射,元素的子元素选择器,其实是触发事件的元素。
fn: 回调函数(即绑定在元素身上的监听函数)。
- 使用 on() 方法注册事件的优势:
// 优势1:可以绑定多个事件和多个事件处理程序。
$("div").on({
mouseover:function(){ ... },
mouseout:function(){ ... },
click:function(){ ... }
});
// 如果处理程序相同则可以不适用对象的形式传参
$("div").on("mouseover mouseout",function() {
$(this).toggleClass("current");
});
// 优势2:可以直接实现事件委派(将子元素触发的事件绑定在父元素身上)
$("ul").on("click","li",function() {
console.log(this); // 返回的是触发事件的 li 而不是 ul(与原生不一样)
})
/* 优势3:动态创建的元素,on() 可以提前给它绑定事件。即还没有创建该元素时就可以给它注册相应的事件。(其实原理同第二个优势,因为实质是给ul注册了事件,不过由li 触发的),也因此这里 on() 的第二个参数必须传递。*/
var i = 0;
var li = null;
// 在 li 创建之前就绑定的事件
$("ul").on('click', 'li', function() {
console.log($(this).text());
});
// 在点击按钮后才创建 li
$("button").on("click", function() {
i++;
li = $("<li>后来创建的第" + i + "个li</li>");
$("ul").append(li);
})
2. 事件解绑
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$(“div”).off(); // 解绑 div 元素所有事件处理程序。
$(“div”).off(“click”); // 解绑 div 元素上的点击事件。
$(“div”).off(“click”,“span”); // 解绑事件委托。
3. 自动触发事件
有些事件希望能够自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动促发右侧按钮事件实现。
// 第一种形式
$("div").click();
// 第二种形式
$("span").on("click",function(){
console.log("hi~");
});
$("span").trigger("click");
// 第三种形式,该方法不会触发元素事件的默认行为。
$("span").triggerHandler("click");
4. 一次性事件
one()
方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
5. 事件切换
- hover([over, ] out)
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件。
over: 鼠标移到元素上要促发的函数(相当于 mouseenter)。
out: 鼠标移出元素时要促发的函数(相当于 mouseleave)。
如果只写一个函数,则鼠标经过和离开都会触发它。
6. 事件对象
跟元素 js 一样,事件促发就会有事件对象产生。
element.on(events, [selector], function (event) { … })
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡:event.stopPropagation()