[JavaScript知识库]jQuery第三篇

JQuery事件

jQuery事件注册

element.事件(function(){})

$("div").click(function(){事件处理程序})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

jQuery事件处理

事件处理 on()绑定事件

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

events ：一个或多个空格分隔的事件类型，如 “click” 或 “keydown”
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数

$("div").on({
    mouseenter: function(){
        $(this).css("background","skyblue");
    },
    click: function(){
        $(this).css("background","purple");
    }
})

on绑定多个事件，多个处理事件处理程序

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

如果事件处理程序相同

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

on实现事件委派

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

事件是绑定在ul身上，只有一个ul 添加了点击事件，但是触发对象是li，会发生事件冒泡，冒泡到父亲身上，父亲就会执行这个函数

$("ul").on("click","li",function(){
    alert("hello world!");
});

on动态元素绑定事件

动态创建的元素，click()没有办法绑定事件，on() 可以给未来动态生成的元素绑定事件
例如：

	<script>
			$(function(){
				$("ul li").click(function(){
					alert("点击了~")
				})
				var li="<li>我是2</li>"
				$("ul").append(li);
			})
		</script>
		<ul>
			<li>1</li>
		</ul>

这样我如果点击 第二个li 他会无法触发点击事件
而on可以解决

	$(function(){
				$("ul").on("click","li",function(){
				alert("点击了~")
				})
				var li="<li>我是2</li>"
				$("ul").append(li);
			})