绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>我是一个li标签1</li>
<li>我是一个li标签2</li>
<li>我是一个li标签3</li>
<li>我是一个li标签4</li>
<li>我是一个li标签5</li>
<li>我是一个li标签6</li>
<li>我是一个li标签7</li>
<li>我是一个li标签8</li>
<li>我是一个li标签9</li>
</ul>
<script src="../js/jquery.min.js"></script>
<script>
/**
* 以下做法，浏览器的js引擎在解释该代码时，会针对每个li元素添加单击事件
* ，相当于在内存中遍历出每个li元素，依次给它们添加单击事件
*/
/*$("ul>li").click(function(){
console.log("被点击了，"+$(this).html());
})*/
/**
* 当需要批量的给多个相同元素添加事件时，建议使用绑定事件的语法
* $(selector).on(types, childSelector, data, handlerFunction)
* 其中，selector是选择器，是用来选择父元素的
* types:要添加的事件类型，可以是一个或多个事件，多个事件之间用空格隔开
* childSelector:子元素选择器，用来将一个或多个事件添加到哪个子元素上，由子元素来响应事件
* data:传递给响应函数的额外数据,数据格式为json格式，即key:value，获取数据时用event.data.key
* handlerFunction:事件发生时要调用的响应函数
*
* 执行机制：是将事件由父元素向下传播给子元素，与事件冒泡相反，浏览器的js引擎只选择了父元素
*
*/
$("ul").on("click mouseenter","li",{"city":"武汉"},function(event){
console.log("被点击了，"+$(this).html()+"，传过来的参数city:"+event.data.city);
})
</script>
</body>
</html>
off解绑事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 300px;height: 300px;background-color: yellow;">我是div</div>
<script src="../js/jquery.min.js"></script>
<script>
/**
* on():绑定事件，将父元素的事件由上向下传播给子元素
* off() 方法移除用.on()绑定的事件处理程序
* 语法：$(selector).off(types,childSelector)
* selector:父元素选择器，是用来选择父元素的
* types 可选。规定要从被选元素移除的一个或多个事件，多个事件之间用空格隔开
* childSelector 可选。指定对某个子元素进行解绑
* 注意：对于 body元素的选择，可以写$(document.body)或者$("body")
* 特殊： 如果off()不传任何参数，则表示移除所有子元素的所有事件
*/
/* $(document.body).on("click","div",function(){
console.log("子元素响应了事件,子元素内容"+$(this).html());
//对子元素解绑事件
$("body").off("click","div");
})*/
$("body").on("click mouseenter","div",function(){
console.log("子元素响应了单击和鼠标进入事件,子元素内容"+$(this).html());
//对子元素解绑所有事件
$("body").off();
})
</script>
</body>
</html>
1113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
