jQuery 事件

@

目录


1. jQuery 事件注册

普通事件注册

语法:

element.事件(function(){
    //事件处理程序
})

可以注册多个事件,不用担心事件覆盖等问题。

普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法(暂未知,待补充)。

其他事件和原生基本一致。
比如mouseover、 mouseout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll

演示代码

<body>
    <div></div>
    <script>
        $(function() {
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

on() 事件注册

因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()

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

语法:

element.on(events,[selector],fn)
  1. events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。
  2. selector: 元素的子元素选择器 "selector"
  3. fn:回调函数 即绑定在元素身上的侦听函数。

多事件绑定

可以绑定多个事件,多个不同的相对应处理事件处理程序,事件与侦听函数包装成一个对象作为参数传进on(),如下:

$("div").on({
	mouseover: function(){
        //事件处理程序
    },
	mouseout: function(){
        //事件处理程序
    },
	click: function(){
        //事件处理程序
    }
});

如果事件处理程序相同,可以绑定多个事件并共用一个侦听函数。如下:

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

事件委托

因为 on() 方法支持事件冒泡,所以可以事件委派操作 。

事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

可以通过指定子元素来触发父元素事件,且一旦指定了这个子元素,就只能是这个子元素来促发,其他子元素无法触发父元素的事件。 如果没有指定,子元素们都可触发父元素事件。

<ul>
    <li class="one">1</li>
    <li class="two">2</li>
    <li class="three">3</li>
</ul>
<script>
    /*
    $("ul").on("click",function() {
		alert("hello world!");
	});
	点击 1 , 2, 3都会执行监听函数
    */
	$("ul").on("click", "li", function() {
		alert("hello world!");
	});
    //点击 1 , 2, 3都会执行监听函数
    
    /*
    $("ul").on("click", ".one", function() {
		alert("hello world!");
	});
	只有点击1 才会执行监听函数
	*/
</script>

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


动态创建的元素的事件绑定

动态创建的元素, $("selector").click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件

<div></div>
<script>
    /*
    动态元素不可直接绑定事件
    $("div p").click(function(){
        alert("无法给子元素p绑定事件")
    })
    $("div p").on("click",function(){
    	//...
    })
    */
	$("div").on("click","p", function(){
		alert("俺可以给动态生成的元素绑定事件")
	});
	$("div").append($("<p>我是动态创建的p</p>"));
</script>

one() 绑定事件

用one() 绑定的事件被触发后指挥执行一次监听函数,下次触发不再执行。

$(selector).one("click",function(){
    //事件处理程序
})


2. jQuery 事件处理

off() 解绑事件

事件解绑:当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。

jQuery 提供了多种事件解绑方法:die() / undelegate() / off()

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

  • 解绑元素所有事件处理程序

    $(selector).off();
    //eg:
    $("p").off();
    
  • 只解绑元素上面的指定的事件

    $(selector).off(event);
    //eg:
    $("p").off("click");
    
  • 解绑事件委托

    $(selector).off(event, selector)
    //eg:
    $("ul").off("click", "li");
    

trigger() / triggerHandler() 自动触发事件

在有些情景下,需要自动触发事件,有如下三种方式,都为一次性的

$(selector).event(); // 第一种简写形式
//eg:
$("div").on("click", function() {
	alert(11);
});
$("div").click();
$(selector).trigger(event) // 第二种自动触发模式
//eg:
$("div").on("click", function() {
   alert(11);
});
$("div").trigger("click");
$(selector).triggerHandler(event) // 第三种自动触发模式
//eg:
$("input").on("focus", function() {
	$(this).val("表单控件光标会闪烁");
});
$("input").triggerHandler("focus");

triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别。



3. jQuery 事件对象

​ jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

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

注意:jQuery中的 event 对象使用,可以借鉴 API 和 DOM 中的 event 。




上一篇:jquery重点基础知识更新(完结)第Ⅲ篇


下一篇:015-jQuery HTML-获取并设置CSS类