jq事件

Posted 2022-12-26 zhaodz

1.jq对象.on(‘事件名‘,事件处理函数）

$(‘p‘).on(‘click‘,function()
  console.log(‘on注册的事件‘)
)

2.父元素.on(‘事件名‘,‘子元素‘,事件处理函数）

（1）

   $(‘button‘).click(function()
      $(‘ <p>创建的p元素</p>‘).appendTo(‘.box‘)
    )

$(‘.box‘).on(‘click‘,‘p‘,function()
  console.log(‘on注册的事件委托‘)
)

（2）.e.stopPropagation() 阻止事件冒泡

   $(‘.box‘).on(‘click‘, function () 
        console.log(‘父级元素本身的点击事件‘)
      )
      $(‘.box‘).on(‘click‘, ‘p‘, function (e) 
        console.log(‘on注册的事件委托‘)
        e.stopPropagation()
      )

 

3.jq对象.事件名（事件处理函数）

$(‘.box‘).click(function()
  console.log(‘click注册事件‘)
)

 4..off()  事件解绑

（1）.jq对象.off()    解绑所有事件

   $(‘button‘).click(function () 
        $(‘.box‘).off()
      )

      $(‘.box‘).on(‘click‘, function () 
        console.log(‘父级元素本身的点击事件‘)
      )
      $(‘.box‘).on(‘click‘, ‘p‘, function (e) 
        console.log(‘on注册的事件委托‘)
        e.stopPropagation()
      )

（2）父元素.off("事件名"，"子元素")   解绑子元素的 指定事件

     $(‘button‘).click(function () 
        $(‘div‘).off(‘click‘,‘p‘)
      )

      $(‘.box‘).on(‘click‘, function () 
        console.log(‘父级元素本身的点击事件‘)
      )
      $(‘.box‘).on(‘click‘, ‘p‘, function (e) 
        console.log(‘on注册的事件委托‘)
        e.stopPropagation()
      )
      $(‘.box‘).on(‘mouseenter‘, ‘p‘, function (e) 
        console.log(‘on注册的事件委托‘)
        e.stopPropagation()
      )

（3）jq对象.off(‘事件名‘)   解绑指定事件

      $(‘button‘).click(function () 
        $(‘p‘).off(‘click‘)
      )
      $(‘p‘).on(‘click‘, function (e) 
        console.log(‘on注册的事件委托‘)
       
      )
      $(‘p‘).on(‘mouseenter‘,function (e) 
        console.log(‘on注册的事件委托‘)
      )

5.触发事件

（1）jq对象.click()   

  $(‘div‘).on(‘click‘,function()
    console.log(‘div的点击事件‘)
  )
$(‘button‘).on(‘click‘,function()
  $(‘div‘).click()
)

 （2）jq对象.trigger(‘click‘)

      $(‘div‘).on(‘click‘, function () 
        console.log(‘div的点击事件‘)
      )
      $(‘button‘).on(‘click‘, function () 
        $(‘div‘).trigger(‘click‘)
      )