jQuery事件

最新推荐文章于 2023-01-07 11:07:03 发布

我，休伯利安舰长

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量110

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_49757916/article/details/116208144

版权

本文介绍了jQuery事件与JavaScript事件的区别，重点讲解了jQuery的鼠标事件、页面载入事件、表单事件、键盘事件以及事件的绑定和解绑。通过示例代码展示了jQuery如何实现多事件绑定，并解释了on()和off()方法的使用。

摘要由CSDN通过智能技术生成

jQuery事件

一、jQuery绑定事件与javas绑定事件的区别：

下面是我用 Visual Studio 2015 编写的代码：

当JavaScript只有一个绑定事件时；

如下：

<body>
    <button id="btn">JavaScript事件</button>
  
    <script src="~/Content/js/jquery-3.2.1.min.js"></script>
    <script>
        document.getElementById("btn").onclick = function () {
            alert(123);
        }
        
    </script>
</body>

当点击button按钮时，显示结果如下：

它显示就没问题；

如果它同时有多个绑定事件呢，

body>
    <button id="btn">JavaScript事件</button>
  
    <script src="~/Content/js/jquery-3.2.1.min.js"></script>
    <script>
        document.getElementById("btn").onclick = function () {
            alert(123);
        }
        document.getElementById("btn").onclick = function () {
            alert(321);
        }
    </script>
</body>

它就出问题了，因为JavaScript只能显示一个绑定事件，而且还是最后一个绑定事件

这便是JavaScript的绑定事件的劣势；

刚刚好，这便是JavaScript绑定事件和jQuery绑定事件的差别！

jQuery能同时显示多个绑定事件！

jQuery的绑定事件，代码如下：

<body>
    <button id="btn">jQuery事件</button>
  
    <script src="~/Content/js/jquery-3.2.1.min.js"></script>
    <script>
        $("#btn").click(function () {
            alert("123");
        })
        $("#btn").click(function () {
            alert("213");
        })
        $("#btn").click(function () {
            alert("321");
        })
    </script>
</body>

结果如下：

因为录像不好弄，我就不弄了，我就以截图的效果给大家看了，感兴趣的朋友可以尝试一下；

jQuery的绑定事件可以同时显示多个，而JavaScript的绑定事件一次只能显示一个；

由此可见，jQuery的绑定事件与JavaScript的绑定事件之间的差别

二、jQuery事件

1、jQuery的鼠标事件有：

①click 单击事件 ②dbclick 双击事件

③mousedow 鼠标按入事件 ④mouseup 鼠标弹起事件

⑤mouseenter 鼠标进入事件 ⑥mouseleave 鼠标离开事件

它们的效果就不一一说明了，比如click单击事件在上面就有演示了，其它的鼠标事件你们可以去查看资料等等；

2、页面载入事件：ready()

它是当DOM载入就绪可以查询及操纵时绑定一个要执行的一个函数；

ready()事件类似于onload事件

但ready()事件只要页面的DOM结构加载后便可以触发，而onload事件必须在页面全部元素加载成功才触发；

还有ready()事件可以在同一个页面中无限次的使用；

3、表单事件：

jQuery表单事件之 focus 事件 与 blur 事件；

focus事件获取焦点；

blur事件失去焦点

jQuery鼠标事件之 focusin事件与 focusout 事件

jQuery鼠标事件与jQuery表单事件的区别：

focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况；

focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况

jQuery表单事件之 change 事件

比如<input>元素， <textarea> 和<select> 元素的值都是可以发生改变的，

而我们可以通过change事件去监听这些改变的动作，如：

input元素：

监听value值得变化，当有所改变时，失去焦点触发change事件；

sleep元素：

对于下拉选择框，当用户用鼠标做出选择时，该事件立即触发change事件；

textarea元素：

多行文本输入框，当有所改变时，失去焦点后触发change事件

jQuery表单事件之 select 事件

select 事件：当一个函数调用执行时绑定到select事件的所有函数，可以通过在这个绑定的函数中返回false来防止触发游览器的默认行为

select 事件只能用于<input>元素和<textarea>元素

……

4、键盘事件

jQuery键盘事件之 keydown() 与 keyup()事件

keydown()事件，键盘或者按钮按下触发的事件；

keyup()事件，键盘或者按钮松开触发的事件

body>
<input type="text" id="inputEle" />

<script src="~/Content/js/jquery-3.2.1.min.js"></script>
<script>

//jQuery键盘事件

/*$("#inputEle").keydown(function () {
console.log($(this).val);//当键盘按被钮按下就会触发keydown事件
})*/
/* $("#inputEle").keyup(function () {
console.log($(this).val); //当键盘按钮被按下后，松开才会触发keyup事件
})*/
$("#inputEle").keypress(function () {
console.log($(this).val); //每输入一个字符，都会触发keypress事件
})
</script>
</body>

我都有例举在上面

三、jQuery事件的绑定和解绑

1、on()的多事件绑定

之前学的鼠标事件、表单事件、与键盘事件都一个共同的特点，就是直接给元素绑定一个处理函数，所有这类事件都属于快捷事件；由源码可知，所有快捷事件在底层的处理都是通过一个基本用法：on（events，[selector]，[data]，fn）在选择元素上绑定一个或者多个事件的事件处理函数。

events 事件的字符串 [selector]与[data]可选参数 fn函数

常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同；

<button id="elem">jQuery事件绑定</button>
<script src="~/Content/js/jquery-3.2.1.min.js"></script>
<script>
$("#elem").click(function (){}) //快捷方式
$("#elem").on(function () { }) //on方式

/*而on方式与快捷方式的最大不同点就是：on方式可以自定义事件名，当然不仅仅如此，比如：*/
/*多个事件绑定同一个函数
$("#elem").on("mouseover moouseout click", function () { });
通过空格（或者换行）分离，传递不同的事件名，可以同时绑定多个事件*/

$("#elem").on({
mouseover: function () { alert(123); }, //鼠标移入运行这个函数内容
mouseout: function () { alert(321); }, //鼠标移出运行这个函数内容

click: function () { alert(231); } //点击按钮运行这个函数
}) //给同一个元素绑定多个事件，而且每个事件执行的代码不一样

</script>

上面代码都有说明；

2、卸载事件off()方法

先通过 .on() 绑定的事件处理程序，然后再通过 off() 方式移除该绑定；

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

好了，以上就是我现在对jQuery事件的总结，还没完全，以后有机会再补！！！

如有不对或者有另外见解，还望多多指点！！！

我，休伯利安舰长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件

jQuery事件一、jQuery绑定事件与javas绑定事件的区别：下面是我用Visual Studio 2015 编写的代码：当JavaScript只有一个绑定事件时；如下：<body> <button id="btn">JavaScript事件</button> <script src="~/Con...
复制链接

扫一扫