jQuery事件处理机制(4)

最新推荐文章于 2023-11-17 22:13:38 发布
最新推荐文章于 2023-11-17 22:13:38 发布
阅读量1.1k 收藏 3
点赞数 2
分类专栏： jquery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45466959/article/details/130972608
版权

1.常用事件

在前端开发中，经常使用事件来完成一些交互操作。

举例： 文本框获得焦点、鼠标滑过改变样式等。
jQuery提供的一些事件：

  • 页面加载事件；
  • 鼠标事件；
  • 焦点事件等；

1.1 jQuery事件方法

jQuery中事件方法一般与事件名称相同。

例如： 单机事件click，对应的事件方法是click()方法。

常用事件方法：

分类事件方法描述
鼠标click()单击鼠标左键时触发
dbclick()双击鼠标左键时触发
键盘keypress()键盘按键(Shift、CapsLock等非字符键除外)被按下时触发
keydown()键盘按键被按下时触发
keyup()键盘按键被松开时触发
焦点focus()获取焦点时触发
blur()失去焦点时触发
改变change()元素的值发生改变时触发
其它submit()当表单提交时触发
select()当文本框(包括<input>和<textarea>中的文本被选中的时触发)
scroll()当滚动条发生变化时触发
resize()当调整浏览器窗口大小时触发

click()事件： 为元素绑定事件处理函数后，还可以手动触发事件。

例如：

//点击事件
$('#btn').click();
扩展

与JavaScript中的“DOM对象.onclick = function() {};”这种方式不同的是，jQuery允许为同一个对象的同一个事件绑定多个事件处理函数。

//点击事件
//当触发事件时，其执行顺序与绑定时的顺序相同。
$('#btn').click(function(){
   console.log('text1'); 
});
$('#btn').click(function(){
   console.log('text2'); 
});

1.2 页面加载事件

在网页开发中，操作DOM时，会因为页面元素还没有加载而执行失败，因此引入事件处理函数；

解决办法：

  • jQuery提供了ready事件作为页面加载事件；

  • Javavascirpt提供了onload页面加载事件；

区别： ready事件只需页面DOM元素加载完全后便可触发。

好处： 提高页面的响应速度与onload相比ready事件语法比较灵活；

语法： document参数可以省略，写法2比较简洁。

//写法1
$(document).ready(function(){
    //页面加载后要执行的代码
})；

//写法2
$(function(){
    //页面加载后要执行的代码
})

(1)描述： 一个页面只能编写一个onload的事件，并且只能执行一次。

window.onload = function(){
    console.log('text1');
};
window.onload = function(){
    console.log('text2');
};
//执行结果只输出“text2"

(2)描述： 一个页面中可以包括多个ready事件，多个事件按照编写顺序依次执行。

$(function(){
    console.log('text1');
});
$(function(){
    console.log('text2'); 
});
//在控制台依次输出”text1“和”text2“
扩展：jQuery的load()方法

jQuery提供的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个事件处理函数，对于不同的元素对象，事件触发的时机也不同。

(1)非window对象

​ 如果事件函数绑定在一般元素对象上，则会在元素的内容加载完毕后触发。

$('img').load(function(){
   //元素内容加载完毕后要执行的代码 
});

(2)window对象

​ 如果事件处理函数绑定在window对象上，则与onload事件的使用效果相同。例如，”window.onload =function(){}“,可用如下代码实现：

$(window).load(function(){
    //元素内容加载完毕后要执行的代码 
});

1.3 鼠标事件

鼠标事件是指： 用户在点击鼠标或者移动鼠标时触发的事件。

事件描述
click单击鼠标左键时触发的事件
dblclick双击鼠标左键时触发的事件
mousedown按下鼠标时触发的事件
mouseup松开鼠标时触发的事件
mouseover鼠标指针移入被选元素或其子元素，都会触发的事件
mouseout鼠标指针移出被选元素或任何子元素，都会触发的事件
mouseenter鼠标指针移入被选元素时，才会触发的事件
mouseleave鼠标指针移出被选元素时触发的事件
1.mouseout()和mouseleave()方法
<style>
    div {
        background-color: pink;
        padding: 20px;
        margin: 30px;
        width: 350px;
        height: 100px;
    }
</style>

<body>
    <div class="dv">
        <h3 style="background-color: white;">
            mouseout事件被触发<span id="mOut">0</span>次<br>
            mouseleave事件被触发<span id="mLeave">0</span>次
        </h3>
    </div>
    <script>
        var x = 0;
        var y = 0;
        $('.dv').mouseout(function () {
            $('#mOut').text(x += 1);
        });
        $('.dv').mouseleave(function () {
            $('#mLeave').text(y += 1);
        })
    </script>
</body>

在这里插入图片描述

2.click()、dblclick()、mousedown()和mouseup()方法
<body>
    <ul>
        <li id="btn1">click事件触发<span id="click">0</span></li>
        <li id="btn2">dblclick事件触发<span id="dblclick">0</span></li>
        <li id="btn3">mousedown事件<span id="mousedown">0</span></li>
        <li id="btn4">mouseup事件<span id="mouseup">0</span></li>
    </ul>
    <script>
        var a = 0;
        var b = 0;
        var c = 0;
        var d = 0;
        //单击事件
        $('#btn1').click(function () {
            $('#click').text(a += 1);
        });
        //双击事件
        $('#btn2').dblclick(function () {
            $('#dblclick').text(b += 1);
        });
        //鼠标按下事件
        $('#btn3').mousedown(function () {
            $('#mousedown').text(c += 1);
        });
        //鼠标按下松开事件
        $('#btn4').mouseup(function () {
            $('#mouseup').text(d += 1);
        });
    </script>
</body>

在这里插入图片描述

3.mouseover()和mouseenter()方法
<div class="dv1">
        <h3 style="background-color: white;">
            mouseover事件被触发<span id="mOver">0</span>次<br>
            mouseenter事件被触发<span id="mEnter">0</span>次
        </h3>
    </div>
    <script>
        var x = 0;
        var y = 0;
        $('.dv1').mouseover(function () {
            $('#mOver').text(x += 1);
        });
        $('.dv1').mouseenter(function () {
            $('#mEnter').text(y += 1);
        })
    </script>

在这里插入图片描述

扩展：hover()方法

jQuery中提供了hover()语法对鼠标的移入和移出操作进行处理。

语法：

$(selector).hover(inFunction, outFunction);

hover()方法在jQuery中源代码：

hover: function( fnOver, fnOut ) {
	return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

<!--案例-->
<body>
    <p>你好！</p>
    <script>
        $('p').hover(function () {
            $('p').css('background', 'red');
        }, function () {
            $('p').css('background', 'blue');
        });
    </script>
</body>

在这里插入图片描述

1.4焦点事件

jQuery中元素获得焦点时，触发 focus事件，元素失去焦点时触发blur事件。

<body>
    输入框：<input type="text">
    <script>
        //获取焦点
        $('input').focus(function () {
            $('input').css('background-color', 'gray');
        });
        //失去焦点
        $('input').blur(function () {
            $('input').css('background-color', 'white');
        });
    </script>
</body>

在这里插入图片描述

1.5 改变事件

jQuery提供的change()事件监控表单中元素内容是否改变。

仅适用于： input、textarea、select元素控件。

例如： 文本框、单选按钮、下拉列表等。

<body>
    <P>名称：<input type="text" class="info"></P>
    <P>密码：<input type="password" class="info"></P>
    <P>
        <select class="info" name="male">
            <option value="boy">男</option>
            <option value="girl">女</option>
        </select>
    </P>
    <script>
        //注册改变事件
        $('.info').change(function () {
            $(this).css('background', 'pink');
        });
    </script>
</body>

在这里插入图片描述

2. 事件的绑定与解绑

  • 事件绑定方式，分别是on()、bind()和delegate()方法。

  • 用off()、unbind()和undelegate()方法来解除绑定。

2.1 绑定事件

使用on()方法绑定事件不仅适用于当前元素，也适用于动态添加的元素。

语法：

$(selector).on(event, childSelector, data, function)；
参数描述
event必须。事件类型，如click、change、mouseover等
childSelector可选。要绑定事件的一个或多个子元素
data可选。传入事件处理函数的数据，可通过“事件对象.data”获取参数值
function必须。事件被触发运行的事件处理函数
1.on方法绑定事件

on()方法在不设置任何可选参数时，表示为指定的元素绑定指定的事件。

//on()
$('#btn').on('click',function(){
   alert('我被单击了')； 
});
2.多个事件使用相同的事件处理函数

当多个事件处理函数相同时可以利用on方法依次为多个事件绑定相同处理函数。

//on(events,function(){})
$('#btn').on('mouseover mouseout',function(){
    console.log('事件被触发')；
})
3.绑定多个事件

为on方法传递对象型的参数时，可以为指定元素绑定多个事件。

//on({})
$('#btn').on({'click':function(){
    alert('我被单击了')；
},'mouseover':function(){
    $(this).css('backgroundColor','red');
}});
4.事件委托

为on方法设置可选参数chidSelector时，表示将子元素的事件委托给了父元素进行进行监控。

//on(event,childSelecter,function(){})
$('#dv').on('click','p',function(){
    $(this).css('backgroundColor','red');
})

<!--案例-->
<body>
    <input type="button" id="btn" value="添加两个p元素">
    <div id="dv"></div>
    <script>
        //为div中p元素绑定事件
        $('#dv').on('click', 'p', function () {
            $(this).css('background', 'pink');
        });
        //单击按钮通过on()方法为div中添加一个元素
        $('#btn').on('click', function () {
            //创建两个p标签，添加到div中
            $('<p>这是第一个p</p>').appendTo('#dv');
            $('<p>这是第二个p</p>').appendTo('#dv');
        });
    </script>
</body>

在这里插入图片描述

on()方法–扩展[了解]
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 200px;
        height: 400px;
        border: 2px solid black;
        margin: 50px auto;
    }

    #box p {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 50px auto;
    }
</style>

<body>
    <div id="box">
        <p></p>
        <p></p>
    </div>
    <script>
        //on()方法
        //第一个参数为事件名，多个事件用空格隔开
        //第二个参数为选择器，筛选后代元素（可选，用的少）
        //第三个参数传递数据给事件处理函数（可选，用的少）
        //第四个参数事件函数function
        $(function () {
            // 1.最常用的方法
            $('#box').on('click', function () {
                console.log('单机事件');
            });

            // 2.一个元素绑定多个事件
            $('#box').on("mouseenter mouseleave", function () {
                console.log('鼠标移入移出事件');
            });

            // 3.第二个参数
            /* $('#box p').on('dblclick',function(){
                console.log('鼠标双击事件');
            }); */
            //和上面注释一样
            $('#box').on('dblclick', 'p', function () {
                console.log('鼠标双击事件');
            });

            // 4.传递数据给事件处理函数
            $('#box').on('click', { dome: 'green' }, function (e) {
                $('#box p').css('backgroundColor', e.data.dome);
            });

            //绑定多个不同事件，并且执行不同函数
            $('#box').on({
                'mouseover': function () {
                    alert('移入事件');
                }, 'mouseout': function () {
                    alert('移出事件');
                }
            });
        });
    </script>
</body>
扩展:bind()和delegate()绑定方法

在jQuery中还有bind()和delegate()方法也可以完成事件绑定，但在jQuery新版本中已经由on()方法替代。

bind()和delegate()这两个方法都是利用on()方法实现的。两者的区别在于，bind()方法将on()方法的第2个参数设为null，而delegate()方法传递了selector参数。

bind()和delegate()在jquery中的源代码：

bind:function(types,data,fn){
    return this.on(types,null,data,fn);
}

delegate:function(selector,types,data,fn){
    return this.on(types,selector,data,fn);
}
扩展：one()方法绑定单次事件

使用jQuery绑定事件时，如果事件只需要在页面中执行一次，便可以使用one()方法绑定事件。该事件在触发一次后就会失效，不需要手动解绑事件。

$('div').one('click',function(){
   console.log('1次单击就失效'); 
});

2.2 事件解绑

元素上绑定的事件，在不需要使用时，可以利用jQuery提供的方法进行事件解绑。

**off()方法：**适用于解绑事件方法（如click()事件）或on()方法绑定的事件。

$(selector).off(); //解绑匹配元素的所有事件
$(selector).off('click');//解绑匹配元素的指定事件，如click

off()方法还可以在第2个参数中传入特殊值“**”，用于解绑被委托的事件。

//li元素将click事件委托给父元素ul监听
$('ul').on('click','li',function(){
    console.log('哈哈')；
})

//解绑ul元素上被委托的click事件
$('ul').off('click','*');
扩展：jQuery中的bing()和delegate()方法

对于jQuey中bind()方法和delegate()方法，jQuery也提供了相应解绑事件的方法unbind()和undelegate()，但在jQuery新版本中已经由off()方法替代。

jQuery中的bing()和delegate()方法的源代码：

//unbind()
unbind:function(types,fn){
 return this.off(types,null,fn);   
}

//undelegate()
undelegate:function(selector,types,fn){
    //(namespace) or (selector,types [,fn])
    return arguments.length === 1 ?
        this.off(selector,'**'):
    	this.off(types,selector || '**',fn);
}

<!--案例-->
<!--无论是单击div元素或p元素都会弹出当前元素被单击的提示框。-->
<!--
点击解绑事件”按钮后，div元素和p元素的click事件都会被解绑。
	分析：父元素调用off()方法，父元素和子元素上的相同事件都会被解绑。
	需要注意：点击p元素后，其父元素上的click事件也会被触发。
-->
<style>
    div {
        width: 200px;
        height: 100px;
        border: 1px solid black;
    }

    p {
        background-color: aqua;
    }
</style>

<body>
    <input type="button" value="绑定事件" id="btn1">
    <input type="button" value="解绑事件" id="btn2">
    <div id="dv">
        <p>这是div中的p元素</p>
    </div>
    <script>
        //单击第一个按钮为div和div中p元素绑定单击事件
        $('#btn1').click(function () {
            $('#dv').on('click', function () {
                alert('div元素被单击了');
            });
            $('#dv').delegate('p', 'click', function () {
                alert('p元素被单击了');
            });
            alert('事件绑定成功');
        });

        //单击第二个按钮为div中p元素解除绑定事件
        $('#btn2').click(function () {
            $('#dv').off('click');
        });
    </script>
</body>

在这里插入图片描述

3.事件触发

<!--HTML代码-->
<!--案例：单击事件触发后，id值为btn1的按钮会将背景色改为red-->
<input type='button' value='第一个按钮' id='btn1'>
<input type='button' value='第二个按钮' id='btn2'>
<script>
    //单击事件
    $('#btn1').click(function(){
        $(this).css('backgroundColor','red')
    })
</script>

1.使用普通事件方法触发事件

//调用匹配元素click()事件来触发事件
//click()
$('#btn2').click(function () {
	$('#btn1').click();
});

2.使用trigger()方法触发事件

//调用对象是待触发事件对象，参数是要触发的事件名称
//trigger()
$('#btn2').click(function () {
    $('#btn1').trigger('click');
});

3.使用triggerHandler()方法触发事件

//不会触发浏览器的默认行为
//triggerHandler()
//文本框获取焦点后的光标闪烁行为
$('#btn2').click(function () {
    $('#btn1').triggerHandler('click');
})；

在这里插入图片描述

<!--示例-->
<body>
    <input type="button" value="触发事件1" id="btn1">
    <input type="button" value="触发事件2" id="btn2">
    <input type="text" id="txt">
    <span id="sp"></span>
    <script>
        $('#txt').focus(function () {
            $('#sp').text('输入框获取到到焦点了');
        });
        $('#btn1').click(function () {
            //触发输入框的获取焦点的事件
            $('#txt').trigger('focus');
        });
        $('#btn2').click(function () {
            $('#txt').triggerHandler('focus');
        });
    </script>
</body>

在这里插入图片描述

4.事件冒泡

1.什么是事件冒泡

事件传播的两种策略： 事件捕获和事件冒泡。

事件捕获： 当页面触发一个事件，事件传播的顺序是最外层元素向触发事件的元素传递。

在这里插入图片描述

事件冒泡： 当元素中嵌套（一层或多层）元素，一旦最里层元素的事件被触发，那么此事件会向该元素的父级对象传播，并触发父对象上定义的同类事件。 事件传播顺序是从触发事件元素向最外层元素传递。jQuery中注册的事件默认拥有事件冒泡的特点。

在这里插入图片描述

2.如何实现事件冒泡

<style>
    div,
    p,
    span {
        border: 1px solid black;
        margin: 0 auto;
    }

    div {
        width: 200px;
        height: 150px;
        background-color: pink;
    }

    p {
        width: 150px;
        height: 100px;
        background-color: chartreuse;
    }

    span {
        width: 80px;
        margin-top: 25px;
        background-color: antiquewhite;
        display: inline-block;
    }
</style>

<body>
    <div>
        div元素
        <p>
            p元素
            <span>span元素</span>
        </p>
    </div>
    <script>
        $('span').click(function () {
            console.log('span元素被单击了');
        });
        $('p').click(function () {
            console.log('p元素被单击了');
        });
        $('div').click(function () {
            console.log('div元素被单击了');
        });
    </script>
</body>

在这里插入图片描述

**案例演示：**事件冒泡的事件传播的方向是从触发事件的元素到顶层。

在这里插入图片描述

3.如何阻止事件冒泡

单击子元素，会向上触发其父元素，祖先元素的单击事件。

1.使用event.stopPropagation()方法阻止事件冒泡

事件的使用会涉及到一个事件对象，即HTML DOM Event对象。

//event.stopPropagation()
$('span').click(function () {
    console.log('span元素被单击了');
    event.stopPropagation();
});
2.使用return false语句阻止事件冒泡

在p元素的单击事件程序完成之后，调用return false语句。

//return false
$('p').click(function () {
    console.log('p元素被单击了');
    return false;
});

5.事件对象

1.什么是事件对象

通过事件对象可以获取事件的状态。

举例： 触发事件的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

//封装
$('element').on('click',function(event){
    //event:事件对象
});
属性/方法描述
type事件类型，如果使用一个事件处理函数来处理多个事件，可以使用此种属性获得事件类型，比如click
data传递给事件处理程序的额外数据(即事件方法中的data参数)
pageX/Y鼠标事件中，鼠标相对于页面原点的水平/垂直坐标
keyCode键盘事件中，键盘按键代码
delegateTarget当前调用的jQuery事件处理程序的元素对象
currentTarget当前触发事件的DOM对象，等同于this
target事件源，也叫做事件触发者DOM对象，不一定等同于this
stopPropagation()阻止事件冒泡
preventDefault()阻止默认行为，例如a元素的href链接加载、表单提交以及click引起复选框的状态切换

注意：

delegateTarget、curentTarget和target属性的使用。通过调用事件本身的方法（如click()）为元素绑定事件，并且不通过事件冒泡触发事件时，3个属性返回的元素是相同的。使用事件委托的方式（例如使用on()方法）绑定事件，或者通过事件冒泡触发事件时，3个属性返回的元素便有所不同。

对象属性delegateTarget/currentTarget/target的不同使用情况：

<!--HTML代码-->
<style>
    div,
    span {
        border: 1px solid black;
        margin: 0 auto;
    }

    div {
        width: 200px;
        height: 100px;
        background-color: antiquewhite;
    }

    span {
        width: 80px;
        margin-top: 25px;
        background-color: aqua;
        display: inline-block;
    }
</style>

<body>
    <div>
        <span>span元素</span>
    </div>
</body>
1.使用普通方法绑定事件
$('span').click(function (event) {
    console.log('delegateTarget:' + event.delegateTarget);
    console.log('currenTarget:' + event.currentTarget);
    console.log('target:' + event.target);
});

在这里插入图片描述

2.通过事件委托绑定事件
$('div').on('click', 'span', function (event) {
    console.log('delegateTarget:' + event.delegateTarget);
    console.log('currenTarget:' + event.currentTarget);
    console.log('target:' + event.target);
})

在这里插入图片描述

3.通过事件冒泡触发事件
$('span').click(function(){
    console.log('span元素被单击了');
});
$('div').click(function(event){
    console.log('div元素被单击了');
    console.log('delegateTarget:' + event.delegateTarget);
    console.log('currenTarget:' + event.currentTarget);
    console.log('target:' + event.target);
});

在这里插入图片描述

Li丶XiaoYao
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery事件方法
wen0627的博客
05-16 5737
1、首先了解一下什么是事件，页面对不同访问者的响应叫做事件，事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 2、最常见的事件是在某元素上移动鼠标触发事件，选取单选按钮触发事件，点击元素触发事件，在事件中经常使用触发术语，比如当按下按键时触发keypress事件，以下是常见Dom事件。 3、了解jQuery事件以及方法语法，在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法，例如：在页面中指定一个点击事件。 4、接下来是常用jQuery事件方法.
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 7711
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
jQuery
qq_50748038的博客
08-26 6316
jQuery事件的基本使用绑定和解绑，事件委托和jQuery中插入内容、克隆节点的方法，了解jQuery静态方法在数组和对象上的操作以及字符串操作
jQuery鼠标点击事件
热门推荐
柯晓楠
01-16 2万+
概念 个人理解： jQuery鼠标点击事件是最常用的事件之一，当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件，都属于鼠标点击事件的范围。常见的鼠标操作有：单击、双击、右键等等。 click() 事件函数 说明： 当用户单击鼠标左键时触发click()函数，每触发一次匹配元素的click事件，该事件函数就会被调用。 语法： 触发被选元素的click事件： $(selector...
Jquery中事件
m0_73030012的博客
09-17 1384
事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。jquery是为事件处理特别设计的语法：$(selector).toggle(fun1, fun2,fun3-----)第一个方法和第二个方法是必须的，后面是可选的。注意：这个方法在1.8之前可以使用的，目前已经不支持！！
15.前端jQuery之【jQuery事件】
放纵kf的博客
11-28 1274
1.引入jQuery事件方法（绑定id） 2.常用jQuery事件 3.常用jQuery模型
jQuery事件处理的特征(事件命名机制)
10-21
主要给大家介绍jquery事件处理的一些特征，jquery事件命名机制的相关知识，介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看下吧
完善的jquery处理机制
10-22
主要为大家详细介绍了完善的jquery处理机制的相关资料，感兴趣的小伙伴们可以参考一下
jQuery 处理页面的事件详解
10-24
通过这些方法，jQuery 提供了一套强大的事件处理机制，使得开发者能够更加高效地管理页面上的事件，而不受浏览器差异的影响。无论是在处理用户交互、响应用户动作还是实现复杂的逻辑，jQuery 的事件处理功能都能大大...
jquery事件机制扩展插件 jquery鼠标右键事件
10-28
为了简化这个过程，我们可以创建一个jQuery插件来扩展其事件机制，专门处理鼠标右键点击。 首先，我们来看一下如何编写这样一个插件。jQuery插件的编写通常分为几种类型，包括封装对象方法、封装全局函数和选择器...
【jquery常见事件】Jquery常见事件应用汇总【附应用场景】
赏樱看雪撸代码
05-29 1280
jquery双击事件、jquery单击事件、jquery派发事件、阻止冒泡、jquery绑定与解绑事件、jquery鼠标移动事件等。
jQuery中的双击事件
weixin_44260504的博客
03-08 8977
jQuery中的双击事件 当双击元素时，会发生 dblclick 事件。 当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click，在很短的时间内发生两次 click，即是一次 double click 事件。 但是如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(db...
JQuery事件的基本使用
m0_48041877的博客
08-29 3366
JQuery的基本使用以及网站推荐
jQuery 事件详解
黑马程序员官方博客
03-15 459
可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件。off() 方法可以移除通过 on() 方法添加的事件处理程序。如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
jQuery实现点击事件的四种方法
juejiangjianchi的博客
07-31 1715
1、 <button id="but" onclick="but()"></button> function but() { alert("but") } 2、 <button id="but"></button> $("#but").click(function(){ alert("but") }); 3、 <button ...
jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件
cheng1a的博客
09-05 8592
jQuery绑定点击事件和及监听改变事件的几种方式以及多个元素绑定多个事件
jq点击事件(jq点击事件)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-10 2338
用的HTML5里video标签，用jq怎么点击全屏之后自动横屏播? 可以自己设置的 js如何获取class的元素不能用jq<br/1br/>2 2.var classElements = [],allElements = document.getElementsByTagName('*'); jqu...
jQuery三种自动触发事件的写法
qq_51387458的博客
04-09 1898
jQuery三种自动触发事件的写法
【Java 进阶篇】深入浅出：JQuery 事件绑定的奇妙世界
最新发布
繁依Fanyi的博客
11-17 568
事件绑定是指在特定的 HTML 元素上设置一个监听器，用于捕捉用户触发的事件（比如点击、输入、鼠标移动等），并执行相应的操作。在 JQuery 中，事件绑定通常使用on方法来完成。
jQuery事件处理机制
05-24
jQuery事件处理机制是通过绑定事件处理程序来实现的。jQuery提供了一些方法来绑定事件处理程序，例如`on()`、`click()`、`keydown()`等等。 当事件被触发时，jQuery会将事件对象作为第一个参数传递给事件处理程序。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值