jQuery学习笔记——事件相关

最新推荐文章于 2022-03-04 14:46:58 发布

LT_LeeTao

最新推荐文章于 2022-03-04 14:46:58 发布

阅读量195

点赞数

分类专栏： JavaScript 文章标签： jquery js

本文链接：https://blog.csdn.net/Lee_Cristina/article/details/103930120

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery事件发展历程

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定

简单事件绑定

简单事件注册
click（handler）：单击事件；
mouseenter（handler）：鼠标进入事件；
mouseleave（handler）：鼠标离开事件；
缺点：
不能同时注册多个事件

bind方式注册事件

bind()共有两个参数：
①第一个参数：事件类型；
②第二个参数：事件处理函数
缺点：
不支持动态事件绑定，即创建新元素时，不会有事件绑定
jQuery 3.x已删除，而使用了on( )方法代替

<body>
  <input type="button" value="按钮点击" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>
    // bind注册事件
    $('p').bind("click mouseenter",function(){
      $(this).css('background-color', 'skyblue');
    })
    $('<p>90</p>').appendTo($('#pnum'));  // 新添加的元素p没有注册事件
  </script>
  
</body>

delegate方式注册事件

参数：
①第一个参数：selector，事件最终由谁来执行；
②第二个参数：事件的类型
③第三个参数：要做什么
特点：
①动态创建的元素也有注册事件
②只用创建一个事件，然后进行分配
实质：
通过冒泡来观察，注册事件
缺点：
只能注册委托事件

<body>
  
  <input type="button" value="按钮点击" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>
    // delegate注册事件
    // 委托事件,最终执行的不是div，而是由p来执行
    $('div').delegate("p", 'mouseenter', function(){
      // alert('hhhhh');
      $(this).css('background-color', 'skyblue');
    });
    $('<p>90</p>').appendTo($('#pnum'));   // 新添加的p元素添加了注册事件
  </script>
</body>

on注册事件

jQuery3.x删除了bind( )和delegate( )而使用on( )方法来代替，用on统一了所有事件的处理方式

on注册简单事件
特点：
由自己触发，不支持动态绑定
语法：
$(selector).on(event，handler)

  <input type="button" value="按钮点击" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>
   
    // on注册事件
    // on事件注册简单事件
    $('p').on('mouseenter', function(){
      $(this).css('background-color', 'skyblue');
    });
    $('<p>90</p>').appendTo($('#pnum'));

  </script>
  
</body>

on注册委托事件
语法：
$(selector).on(event，selector，data，handler )
参数：
①events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或自定义事件）；
②selector，执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行
③data，传递给处理函数的数据，事件触发的时候函数handler通过event.data来使用（并不常用），形如{key1:value1,key2:value2}的对象
④handler，事件处理函数

事件执行顺序

<body>
  
  <input type="button" value="按钮点击" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>
 
    // 执行顺序
    // 点击div中的p时，显示顺序是 1 >> 3 >> 2
    $('p').on('click',function(){
      alert('1');
    });

    $('div').on('click', function(){
      alert('2');
    })

    $('div').on('click', 'p', function(){
      alert('3');
    })

  </script>
</body>

总结：
如果元素其有自己的注册事件，也有委托事件，则先执行委托事件，再执行自己的事件

绑定事件处理函数

ready(fn)

指定当jQuery所对应的DOM对象装载完成时执行fn( )函数
常见的场景：
入口函数：

$(document).ready(function(){ 
 //...
})

指定在页面装载完成后立即执行ready( )方法里指定的函数

on（events [，selector] [，data]，handler(eventObj)）

<body>
  
  <input type="button" value="按钮点击" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <p>56</p>
    <p>78</p>
  </div>

  <script src="./jquery-1.12.4.js"></script>
  <script>

    $('div').on('click', 'p', {reading: 'book', watching: 'movie'}, function(event){
      alert('data属性:\n' + event.data.watching);
    })

  </script>
  
</body>

off(events [，selector] [，handler(eventobj)])

one()方法的反向操作，用于删除绑定的事件处理函数
如果指定selector，则只删除匹配selector的DOM元素上的事件处理函数；
如果指定了handler，则只删除该事件处理函数；
但如果没有指定任何参数，则删除jQuery对象中所有DOM元素上的事件处理函数；

<body>
  
  <input type="button" value="按钮点击" />
  <div id="pnum">
    <p>12</p>
    <p>34</p>
    <span>sp</span>
  </div>
  <br /> 
  <span>span</span>

  <script src="./jquery-1.12.4.js"></script>
  <script>

    $('div').on('click mouseenter', 'p', {reading: 'book', watching: 'movie'}, function(event){
      alert('data属性:\n' + event.data.watching);

    })
    var foo = function(){
      $(this).css('background-color', 'skyblue');
    }
    $('div').on('click mouseenter', 'p', {reading: 'book', watching: 'movie'}, foo)

    $('span').on('mouseenter', function(){
      $(this).css('background-color', 'pink');
      $(this).css('color', 'red');
    })

    // $('span').off('mouseenter');
    // $('div').off('mouseenter', 'p');
    $('div').off('mouseenter', 'p', foo);

    // $('div').off()

  </script>
</body>

one(type，data，fn)

这个事件处理函数只会执行一次，也就是说，使用one( )绑定的事件处理函数被激发一次后，jQuery将会解除one( )方法绑定的事件处理函数

trigger(type [，data])

以编程的方式触发当前jQuery对象包含的所有DOM对象上的type事件，该方法可以触发由bind( )绑定的自定义事件
除此外，该函数会导致DOM元素执行同名的事件动作

<body>
  
  <input type="button" value="按钮点击" id="btn" />
  <input type="checkbox" name="触发" id="check" />

  <script src="./jquery-1.12.4.js"></script>
  <script>
  
    // trigger触发事件
    $('#btn').on("click", function(){
      $('#check').trigger('click');
    })

  </script>
  
</body>

triggerHandler(type [，data])

该方法与trigger的作用基本相似，只是低昂用该方法来触发type事件时，不会导致DOM元素执行同名的事件动作。

hover(over，out)

其中over和out都是函数，分别绑定到onmouseover、onmouseout事件上作为事件处理函数

<body>

  <p id='hover'>颜色</p>
  
  <script src="./jquery-1.12.4.js"></script>
  <script>

    // hover
    $('#hover').hover(
      function(){$(this).css('background-color', 'skyblue')}, 
      function(){$(this).css('background-color', 'pink')}
    )

  </script>
</body>

toggle([speed]，[easing]，[fn])

切换jQuery对象包含的DOM元素的显示/隐藏状态。
其中：
speed参数指定“显示/隐藏”动画效果的速度，默认是0ms，可能的值包含slow、normal、fast；
easing参数指定切换效果，默认为swing，也可指定为linear；
fn为在动画完成时执行的函数，每个元素的动画完成后执行一次fn函数

<body>

  <input type="button" value="toggle" id='tbtn' />
  <div id="tog"></div>

  <script src="./jquery-1.12.4.js"></script>
  <script>

    // toggle
    $('#tbtn').on('click', function(){
      $('#tog').toggle("slow", "linear", function(){
      console.log("动画完成！")
      })
    })

  </script>
</body>

事件对象

jQuery事件大致包含以下几种属性和方法：

currentTarget：
表示在事件冒泡阶段中事件对象所处的DOM对象；
data:
表示通过bind()、on()、delegate()等方法绑定事件处理函数时传入的data参数；
delegateTarget：
返回在jQuery中绑定事件处理函数的对象
isDefaultPrevented( ):
判断是否调用了事件对象的preventDefault( )方法，即是否阻止了默认行为。
isPropagationStopped( )：
判断是否调用了事件对象的stopPropogation( )方法，即是否阻止事件传播。
pageX：
返回鼠标指针距离文档左边界的距离。
pageY：
返回鼠标指针距离文档上边界的距离。
preventDefault( ):
调用该方法阻止事件的默认行为。
which：
对于鼠标、键盘事件，该属性返回激发该事件的鼠标键或键盘键。
type：
返回事件的类型
relatedTarget：
返回参与该事件的所有其他DOM元素
result：
返回该事件触发的事件处理函数执行后的返回值
stopPropagation( ):
调用该方法停止事件传播
target：
返回触发该事件的初始事件源
timeStamp：
返回1970-01-01到浏览器创建该事件时的时间差，以ms为单位。

LT_LeeTao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记——事件相关

jQuery事件发展历程简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定简单事件绑定简单事件注册click（handler）：单击事件；mouseenter（handler）：鼠标进入事件；mouseleave（handler）：鼠标离开事件；缺点：不能同时注册多个事件bind方式注册事件bind()共有两个参数：...
复制链接

扫一扫