事件绑定

页面渲染

eventName(fn)

on(eventName, fn)

事件移除

定义和用法

语法

$(selector).off(event,selector,function(eventObj),map)

实例

事件冒泡&&默认行为

页面渲染

事件冒泡

1.什么是事件冒泡?

事件冒泡demo

2.如何阻止事件冒泡

默认行为

3.什么是默认行为?

标签a小demo实例

4.如何阻止默认行为

事件绑定

页面渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<button>我是按钮</button>
</body>
</html>

jQuery中有两种绑定事件方式：eventName(fn)，on(eventName, fn);

eventName(fn)

编码效率略高/ 部分事件jQuery没有实现,所以不能添加

点击事件

$("button").click(function () {alert("hello first");
});

鼠标监听

$("button").mouseleave(function () {alert("hello mouseleave");
});
$("button").mouseenter(function () {alert("hello mouseenter");
});

鼠标移入：

鼠标移出：

on(eventName, fn)

编码效率略低/ 所有js事件都可以添加

同样实现上述效果:

$("button").on("click", function () {alert("hello click2");
});
$("button").on("mouseleave", function () {alert("hello mouseleave");
});
$("button").on("mouseenter", function () {alert("hello mouseenter");
});

效果与上述一致。

注意点:
可以添加多个相同或者不同类型的事件,不会覆盖

事件移除

定义和用法

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

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法

$(selector).off(event,selector,function(eventObj),map)

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

实例

使用上面事件绑定时的demo:

        $(function () {function test1() {alert("hello yjk");}function test2() {alert("hello world");}// 编写jQuery相关代码$("button").click(test1);$("button").click(test2);$("button").mouseleave(function () {alert("hello mouseleave");});$("button").mouseenter(function () {alert("hello mouseenter");});$("button").off("click", test1);});

运行之后，界面中只出现鼠标移入和鼠标移除的事件发生，对于点击事件并没有发生。

注意：

off方法如果不传递参数, 会移除所有的事件
$("button").off();
off方法如果传递一个参数, 会移除所有指定类型的事件

$("button").off("click");
off方法如果传递两个参数, 会移除所有指定类型的指定事件

事件冒泡&&默认行为

页面渲染

<body>
<div class="father"><div class="son"></div>
</div>
<a href="https://blog.csdn.net/Ms_yjk/article/details/88856118">注册</a>
<form action="http://www.jigndong.com"><input type="text"><input type="submit">
</form>
</body>

事件冒泡

之前有写过原生JS里面的事件冒泡相关内容：Mr.J--JS事件监听(捕获&冒泡)

1.什么是事件冒泡?

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

事件冒泡demo:

            $(".son").click(function (event) {alert("son");});$(".father").click(function () {alert("father");});

当点击蓝色的div时，会弹出 father 和 son

2.如何阻止事件冒泡

event.stopPropagation()

            $(".son").click(function (event) {alert("son");event.stopPropagation();});$(".father").click(function () {alert("father");});

调用返回值

            $(".son").click(function (event) {alert("son");//return false;});$(".father").click(function () {alert("father");});

默认行为

3.什么是默认行为?

javascript中的默认行为是指javascript中事件本身具有的属性，如<a>标签可以跳转，文本框可输入文字、字母等，右键浏览器会出现菜单等行为便被称为浏览器的默认行为。

标签a小demo实例

$("a").click(function (event) {alert("弹出注册框");});

弹出注册框后进行页面的跳转。

4.如何阻止默认行为

event.preventDefault()

$("a").click(function (event) {alert("弹出注册框");event.preventDefault();
});

调用返回值

$("a").click(function (event) {alert("弹出注册框");return false;
});

运行结果：只进行了弹窗的弹出，对于标签a的默认事件进行了阻止。

Mr.J-- jQuery学习笔记(九)--事件绑定移除冒泡相关推荐

[JQuery 学习笔记] 解除事件绑定 unbind()
unbind() : 解除事件绑定 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
jQuery学习笔记：事件
一.页面载入 1.ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对 ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
JavaScript 学习笔记 - 挂载事件 Demo
JavaScript 学习笔记 - 挂载事件 Demo 例子 addEventListener 监听事件挂载事件的同时带上参数 dispatchEvent 触发事件 removeEventListe ...
jQuery学习笔记之unbind()
jQuery学习笔记之.unbind() 本文目标 1 了解.unbind()的几种调用方式及其参数含义 2 了解通过函数名解绑事件 3 了解利用命名空间解绑事件学习资料官方描述文档: http: ...
jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...

Mr.J-- jQuery学习笔记(九)--事件绑定移除冒泡

事件绑定

页面渲染

eventName(fn)

on(eventName, fn)

事件移除

定义和用法

语法

$(selector).off(event,selector,function(eventObj),map)

实例

事件冒泡&&默认行为

页面渲染

事件冒泡

1.什么是事件冒泡?

事件冒泡demo:

2.如何阻止事件冒泡

默认行为

3.什么是默认行为?

标签a小demo实例

4.如何阻止默认行为

Mr.J-- jQuery学习笔记(九)--事件绑定移除冒泡相关推荐

最新文章

热门文章