领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

jQuery的事件绑定

nixiaole 2024-12-03 17:11:25 知识剖析 18 ℃

jQuery绑定事件

  • on()
  • one()
  • hover()
  • 事件常用函数

1.on()

1-1基础绑定
语法：元素集合.on( ‘事件类型’ , 事件处理函数)

  <style>
    div{
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
    p{
      width: 300px;
      height: 300px;
      background-color:slateblue;
    }
  </style>
</head>
<body>
  <div>我是div标签
    <p>我是div内的p标签</p>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $('div').on('click',function(){console.log('点击')})
  </script>
</body>

1-2事件委托
语法：元素集合.on(‘事件类型’ , 选择器 , 事件处理函数)
ps：把 p 元素的事件委托给了 div 元素来绑定，此时只有点击 p 标签才会触发

    $('div').on('click','p',function(){console.log('点击')})

1-3批量绑定
语法：元素集合.on( { 事件类型1：处理函数, 事件类型2：处理函数} )
ps：不能进行事件委托

$('div').on({
      click:function(){console.log('点击事件')},
      mouseover:function(){console.log('鼠标移入')},
      mouseout:function(){console.log('鼠标移出')}
    })

2.one()

共同点：和on()方法绑定的方式是一样的
不同点：one()方法绑定的事件只能执行一次

这里我就不做演示

3.hover()

语法：元素集合.hover( 移入时触发的函数，移出时触发的函数)
当只传递一个参数时会在移入移出时都触发

    $('div').hover(
      //移入
      function(){console.log('函数1')},
      //移出
      function(){console.log('函数2')}
    )

4.常用事件函数

  • click()
  • mouseover()
  • mouseout()
  • change()
  • …
    $('div').click(function(){console.log('点击')})

以上就是jQuery对事件的常用绑定方法

Tags：

猜你喜欢

最近发表
标签列表