jQuery事件

最新推荐文章于 2021-11-05 14:56:22 发布

JD强子

最新推荐文章于 2021-11-05 14:56:22 发布

阅读量148

点赞数

分类专栏： js(JavaScript)

本文链接：https://blog.csdn.net/m0_53698336/article/details/119199596

版权

本文详细介绍了jQuery中的事件处理，包括鼠标事件、键盘事件和其他常见事件的绑定、触发和取消。jQuery简化了跨浏览器事件处理，如click、mouseenter、keydown等，并提供了事件参数、事件触发条件和安全限制的说明。示例代码展示了如何有效使用jQuery进行事件操作。

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

因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。

浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。

由于不同的浏览器绑定事件的代码都不太一样，所以用jQuery来写代码，就屏蔽了不同浏览器的差异，我们总是编写相同的代码。

举个例子，假设要在用户点击了超链接时弹出提示框，我们用jQuery这样绑定一个click事件：

HTML:

<html>
<!-- 一定要先引入jQuery -->
  <head>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>
  <body>
  <p>
   <a id="test-link" href="#0">点我试试</a>
  <p>
  <body>
<html>

// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
   
    alert('Hello!');
});

on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。

另一种更简化的写法是直接调用click()方法：

a.click(function () {
   
    alert('Hello!');
});

两者完全等价。我们通常用后面的写法。

完整html代码:

<html lang="en">
  <!--根标签,用于包裹所有的网页内容(不包括文档声明)-->
  <!--头部分, 用于存放网页的基本属性信息(编码,标题,引入的css/js文件等-->
  
  <head>
  <!-- 一定要先引入jQuery -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>
  <body>
    <script>
      $(function () {
     
      /*这是JQuery的语法，$表示JQuery对象，
      可以有好几种用法。
      比如传递选择器字符串、页面对象等，如果直接传函数体进去
      表示当页面加载完毕时执行这个函数*/
        $('#test-link').click(function () {
     
        //这是document对象的ready事件处理函数。
          alert('Hello!')
        })
      })
    </script>
    <p>
      <a id="test-link" href="#0">点我试试</a>
    </p>
  </body>
</