JQuery专题(四)-JQuery事件操作

JQuery专题(四)-JQuery事件操作

文章目录

​​1.jQuery事件和传统js事件的区别​​​​2.jQuery的事件绑定和解除​​

​​2.1.使用jQuery的事件方法进行绑定​​​​2.2.使用事件处理方法bind()方式进行绑定​​

​​3.jQuery的事件委派和解除​​​​4.扩展​​​​5.事件默认动作和冒泡传播机制​​​​6.一次性事件和自动触发事件​​​​7.事件切换​​

1.jQuery事件和传统js事件的区别

【示例练习】

【需求】 分别使用传统方式和jQuery方式对按钮绑定多次单击事件，看事件是否会被覆盖

因此：传统js同名事件会有覆盖效果，但jquery不会，内部的机制不同

2.jQuery的事件绑定和解除

回顾传统DOM绑定事件：

写法一：

function clickme(){….}

写法二：

document.getElementById("mybtn").onclick= function(){….}

写法三：

document.getElementById("mybtn").onclick = clickme ;function clickme() {… }

前端开发原则：将html代码和js脚本代码分离

jQuery的事件绑定的几种方式：

2.1.使用jQuery的事件方法进行绑定

2.2.使用事件处理方法bind()方式进行绑定

提示：效果与事件方法实际是一样的。

3.jQuery的事件委派和解除

我们先不解释什么是事件的委派，先来设想一个场景：在页面加载完成之后，给页面上所有的div绑定一个单击事件，然后再在页面上添加一个div，那么当单击这个后来添加的div时，是否会触发单击事件？

我们按照上面设想的场景做一个简单测试：

总结： 普通方式（事件函数和bind）绑定的事件，只能绑定到页面中已存在的元素上； 通过事件委派的方式绑定，可以绑定到页面中本来不存在后来添加的元素上。

4.扩展

注意：如果指定可选参数selector(选择器)，表示委派绑定，否则相当于普通方式绑定

【示例】：

5.事件默认动作和冒泡传播机制

事件的默认动作：

事件的冒泡传播：

如果父元素注册一个事件，那么子元素也会拥有这个事件，原因就是事件的冒泡传播机制：当触发子元素自己的事件后，会自动逐级向上寻找其父辈、乃至祖宗的同类事件，继续执行，直到根元素。

【需求】

阻止表单元素的默认行为。阻止表单元素事件的冒泡传播。

preventDefault() 阻止默认行为但是允许事件的冒泡传播。stopPropagation() 阻止事件的冒泡传播但是允许默认行为。

重点：第二种方式！

6.一次性事件和自动触发事件

one(type, [data], fn) 绑定的事件只触发一次，一般用于防止表单重复提交trigger(type, [data]) 通过代码来触发指定的事件，元素的默认行为会执行，例如$("div"). trigger("click") $("div").click();triggerHandler(type, [data]) 通过代码来触发指定的事件，元素的默认行为被取消

【示例】

【需求】

7.事件切换

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。