jQuery jQuery事件

2020-06-01

◆jQuery事件注册

单个事件注册

语法:

1 2	element.事件(function() {}) $("div").click(function() {事件处理程序 })

其他事件和原生基本一致。比如mouseover、mouseout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll等。但是单个事件的注册每次有时候需要给同一个元素多次注册事件，比较麻烦，我们可以通过下面的绑定事件解决这个问题。

◆jQuery事件处理

2.1事件处理on()绑定定事件

on()方法在匹配元素上郷定一个多个事件的事件处理函数:

1	element.on(events, [selector] , fn)

events:一个或多个用空格分隔的事件类型,如” click’或”keydown”。
selector:元素的子元素迭拝器。
fn:回调函数，即绑定在元素身上的侦听函数。

1）优势1 :可以绑定多个事件,多个处理事件处理程序。

$ ("div").on({
    mouseover: function() {},
    mouseout: function() {},
    click: function() {}
}) ;

如果事件处理程序相同:两个时间都会执行这个函数

1
2
3

$("div").on("mouseover mouseout", function() {
	$(this).toggleClass ("current") ;
}) ;

2）优势2 :可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

//click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
$('ul').on('click', 'li', function() {
	alert( 'hello world!') ;
}) ;

在此之前有bind(), live(),delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。

3）优势3 :动态创建的元素, click()没有办法绑定事件, on()可以给动态生成的元素绑定事件.

//click()没有办法绑定事件
$("ol li").click(function() {
	alert(11);
})
//on()可以绑定事件
$("ol").on("click", "li", function() {
	alert(11);
})
//创建元素
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

案例:发布微博案例

①点击发布按钮,动态创建一个小li（prepend） ,放入文本框的内容和删除按钮,并且添加到ul中。

②点击的删除按钮,可以删除当前的微博留言。

  //事件委派，ul绑定事件，但是a触发事件         
$("ul").on("click", " a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })

2.2 事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。

1
2
3

$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") // 解绑p元素上面的点击事件
$("ul").off("click","li"); // 解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件。

// one() 但是它只能触发事件一次
$("p").one("click", function() {
	alert(11);
})

1.3 自动触发事件trigger()

有些事件希望自动触发比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

元素.事件(),会触发元素的默认行为
元素.trigger("事件"),会触发元素的默认行为

1
2
3

element.click() // 第一种简写形式
element.trigger ("type") //第二种自动触发模式
element.trigger ("click") //第二种自动触发模式

元素.triggerHandler("事件")就是不会触发元素的默认行为

$("input").on("focus", function() {
                $(this).val("你好吗");
            });
$("input").triggerHandler("focus");
//这里input被focus时，默认会有蓝色外边框，使用triggerHandler就不会出现外边框。

◆jQuery 事件对象

事件被触发,就会有事件对象的产生。

element.on(events,[selector],function(event) {})

阻止默认行为 : event.preventDefault() 或 return false；

阻止冒泡：event.stopPropagation（）。