码迷,mamicode.com
首页 > 其他好文 > 详细

jq事件

时间:2019-10-05 18:37:39      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:click   注册   color   cti   mouse   ndt   div   class   事件委托   

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)
      })

 

jq事件

标签:click   注册   color   cti   mouse   ndt   div   class   事件委托   

原文地址:https://www.cnblogs.com/zhaodz/p/11625100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!