jQuery——事件篇( 鼠标、表单、键盘、事件绑定和解绑、事件对象、自定义事件)

亦凉 2022-07-14 12:59 259阅读 0赞

## 鼠标事件 ##

### click()与dbclick()事件 ###

<div id="test">点击触发<div>
    $("ele").click(function(){
        alert('触发指定事件')
    })
    $("#test").click(function(){
         $("ele").click()  //手动指定触发事件 
    });
    
    <div id="test">点击触发<div>
    $("#test").click(function() {
        //this指向 div元素
    });
    
    <div id="test">点击触发<div>
    $("#test").click(11111,function(e) {
        //this指向 div元素
        //e.date  => 11111 传递数据
    });

--------------------

### mousedown与mouseup事件 ###

<div id="test">点击触发<div>
    $("ele").mousedown(function(){
        alert('触发指定事件')
    })
    $("#test").mousedown(function(){
         $("ele").mousedown()  //手动指定触发事件 
    });
    
    <div id="test">点击触发<div>
    $("#test").mousedown(function() {
        //this指向 div元素
    });
    
    <div id="test">点击触发<div>
    $("#test").mousedown(11111,function(e) {
        //this指向 div元素
        //e.date  => 11111 传递数据
    });

--------------------

### mousemove事件 ###

<div id="test">点击触发<div>
    $("ele").mousemove(function(){
        alert('触发指定事件')
    })
    $("#test").click(function(){
         $("ele").mousemove()  //指定触发事件 
    });
    
    <div id="test">滑动触发<div>
    $("#test").mousemove(function() {
        //this指向 div元素 
    });
    
    <div id="test">点击触发<div>
    $("#test").mousemove(11111,function(e) {
        //this指向 div元素
        //e.date  => 11111 传递数据
    });

--------------------

### mouseover与mouseout\\ mouseenter与mouseleave事件 ###

> mouseenter事件和mouseover的区别
> 
> 关键点就是：冒泡的方式处理问题

<div id="test">点击触发<div>
    $("ele").mouseover(function(){
        alert('触发指定事件')
    })
    $("#test").click(function(){
         $("ele").mouseover()  //指定触发事件 
    });
    
    <div id="test">滑动触发<div>
    $("#test").mouseover(function() {
        //this指向 div元素 
    });
    
    <div id="test">点击触发<div>
    $("#test").mouseover(11111,function(e) {
        //this指向 div元素
        //e.date  => 11111 传递数据
    });

--------------------

### hover事件 ###

$(ele).mouseenter(function(){ 
         $(this).css("background", '#bbffaa');
     })
    $(ele).mouseleave(function(){ 
        $(this).css("background", 'red');
    })
    ||
    $(selector).hover(handlerIn, handlerOut)

--------------------

### focusin事件 ###

<div id="test">点击触发<div>
    $("ele").focusin(function(){
        alert('触发指定事件')
    })
    $("#test").mouseup(function(){
         $("ele").focusin()  //指定触发事件 
    });
    
    <div id="test">点击触发<div>
    $("#test").focusin(function() {
        //this指向 div元素
    });
    
    <div id="test">点击触发<div>
    $("#test").focusin(11111,function(e) {
        //this指向 div元素
        //e.date  => 11111 传递数据
    });

--------------------

### focusout事件 ###

<div id="test">点击触发<div>
    $("ele").focusout(function(){
        alert('触发指定事件')
    })
    $("#test").mouseup(function(){
         $("ele").focusout()  //指定触发事件 
    });
    
    <div id="test">点击触发<div>
    $("#test").focusout(function() {
        //this指向 div元素
    });
    
    <div id="test">点击触发<div>
    $("#test").focusout(11111,function(e) {
        //this指向 div元素
        //e.date  => 11111 传递数据
    });

--------------------

## 表单事件 ##

### blur与focus事件 ###

--------------------

### change事件 ###

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件

--------------------

### select事件 ###

$("input").select();
    
    <input id="test" value="文字选中"></input>
    $("#test").select(function() { //响应文字选中回调
        //this指向 input元素 
    });
    
    <input id="test" value="文字选中"></input>
    $("#test").select(11111,function(e) {//响应文字选中回调
        //this指向 div元素 
       //e.date  => 11111 传递数据
    });

--------------------

### submit事件 ###

<div id="test">点击触发<div>
    $("ele").submit(function(){
        alert('触发指定事件')
    })
    $("#text").click(function(){
         $("ele").submit()  //指定触发事件 
    });
    
    <form id="target" action="destination.html">
      <input type="submit" value="Go" />
    </form>
    $("#target").submit(function() { //绑定提交表单触发
        //this指向 from元素 
    });
    
    <form id="target" action="destination.html">
      <input type="submit" value="Go" />
    </form>
    $("#target").submit(11111,function(data) { //绑定提交表单触发
        //data => 1111 //传递的data数据
    });
    
    <script> $("#target").submit(function(data) { return false; //阻止默认行为，提交表单 }); </script>

--------------------

## 键盘事件 ##

### keydown()与keyup()事件\\keypress()事件 ###

//直接绑定事件
    $elem.keydown( handler(eventObject) )
    //传递参数
    $elem.keydown( [eventData ], handler(eventObject) )
    //手动触发已绑定的事件
    $elem.keydown()

--------------------

## 事件绑定和解绑 ##

### on() ###

基本用法：.on( events ,[ selector ] ,[ data ] )
    $("#elem").click(function(){ })  //快捷方式
    $("#elem").on('click',function(){ }) //on方式
    //最大的不同点就是on是可以自定义事件名
    
    
    $("#elem").on("mouseover mouseout",function(){  });
    //通过空格分离，传递不同的事件名，可以同时绑定多个事件
    
    
    $("#elem").on({
        mouseover:function(){ },  
        mouseout:function(){ },
    });//通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
    
    
    function greet( event ) { 
      alert( "Hello " + event.data.name ); //Hello 慕课网
    }
    $( "button" ).on( "click", {
      name: "慕课网"
    }, greet );

### on()的高级用法 ###

.on( events ,[ selector ] ,[ data ], handler(eventObject) )
    $("div").on("click","p",fn)
    //事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

### 卸载事件off()方法 ###

//通过.on()绑定的事件处理程序
    //通过off() 方法移除该绑定
    //绑定2个事件
    $("elem").on("mousedown mouseup",fn)
    
    //删除一个事件
    $("elem").off("mousedown")
    
    //删除所有事件
    $("elem").off("mousedown mouseup")
    
    //快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
    $("elem").off()

--------------------

## 事件对象 ##

//事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
    //event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
    <script type="text/javascript"> //多事件绑定一 $("ul").on('click',function(e) { alert('触发的元素是内容是: ' + e.target.textContent) }) </script>

### 属性和方法 ###

$("a").click(function(event) {
      alert(event.type); // "click"事件
    });
    
        确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
    
    浏览器不会跳转到新的 URL 去了
    
    事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
    
    左键报告1，中间键报告2，右键报告3
    
    冒泡前的当前触发事件的DOM对象, 等同于this
    
    
    js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素
    
    如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用

--------------------

## 自定义事件 ##

### trigger事件 ###

$('#elem').on('click', function() { 
        alert("触发系统事件")
     });
    必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢
    $('#elem').trigger('click');
    简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
    trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数
    $('#elem').on('Aaron', function(event,arg1,arg2) { 
        alert("自触自定义时间")
     });
    $('#elem').trigger('Aaron',['参数1','参数2'])

--------------------

### triggerHandler事件 ###

jQuery自定义事件之triggerHandler事件  
trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替

triggerHandler与trigger的用法是一样的，重点看不同之处：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( “submit” )将不会调用表单上的.submit()  
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素  
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理  
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined