3jQuery内容总结(三)事件

最新推荐文章于 2023-05-29 22:00:00 发布

辛跃

最新推荐文章于 2023-05-29 22:00:00 发布

阅读量116

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_47735503/article/details/115368590

版权

jQuery 内容总结

事件注册
事件处理
事件对象event

1. 事件注册

单个事件注册
```
//element.事件(function(){})
$('div').click(function(){事件处理程序})
```
其他事件和原生基本一致：比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

2. 事件处理

事件处理 on() 绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

//element.on(events,[selector],fn)
//1. events：一个或多个用空格分隔的事件类型，如‘click’或‘keydown’
//2. selector：元素的子元素选择器
//3. fn：回调函数，即绑定在元素身上的侦听函数
$('div').on({
    mouseenter:function(){},
    click:function(){},
    mouseleave:function(){}
})

$('div').on('mouseenter mouseleave',function(){
    //mouseenter mouseleave 两个事件都会触发函数
})

on() 方法优势1：可以绑定多个事件处理程序

on() 方法优势2：可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派个父元素

//click 是绑定在ul身上的 但是触发的对象是小li
$('ul').on('click','li',function(){});

on() 方法优势3：动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

//微博发布案例
  <style>
    li {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box" id="weibo">
    <span>微博发布</span>
    <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
    <button class="btn">发布</button>
    <ul>
    </ul>
  </div>
  <script src="../jQuery.js"></script>
  <script>
    $('.btn').on('click', function () {
      var li = $('<li></li>')//动态添加元素
      var txt = $('.txt')//获取文本域
      li.html(txt.val() + '<a>删除</a>')//赋值文本域内容
      $('ul').prepend(li)//在元素内部最前面插入
      li.slideDown()//下滑出现
      txt.val('')//清空文本域
    })
    $('ul').on('click', 'a', function () {
       $(this).parent().slideUp(function () {
       $(this).remove();//上滑后删除
      })
    })
  </script>
</body>

事件处理 off() 解绑事件

off() 方法可以移除通过on()方法添加的事件处理程序

$('div').off();//解绑div身上所有事件
$('div').off('click');//解绑div身上所有click事件
$('ul').off('click','li');//解绑事件委托

如果有的事件只想触发一次，可以用one()来绑定事件

$('p').one('click',function())

自动触发事件 trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

$('div').on('click',function(){})
//1.自动触发事件第一种方式，会触发元素的默认行为
$('div').click()
//2.自动触发事件第二种方式，会触发元素的默认行为
$('div').trigger('click')
//3.自动触发事件第三种方式,不会触发元素的默认行为
$('div').triggerHandler('click')

3. 事件对象event

事件被触发，就会有事件对象的产生

//element.on(events,[selector],function(event){})
//作用
//1. 阻止默认行为
event.preventDefault()或者return false
//2. 阻止冒泡
event.stopPropagation()

辛跃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3jQuery内容总结(三)事件

jQuery 内容总结事件注册事件处理事件对象event1.事件注册单个事件注册//element.事件(function(){})$('div').click(function(){事件处理程序})其他事件和原生基本一致：比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等2.事件处理事件处理 on() 绑定事件on()方法在匹配元素上绑定一个或多个事件的事件处理函数//elemen
复制链接

扫一扫