jQuery---关于事件的运用

最新推荐文章于 2022-07-13 10:45:23 发布

chen_晨风

最新推荐文章于 2022-07-13 10:45:23 发布

阅读量286

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_37674616/article/details/82781418

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

事件绑定

bind(type,[,data],fn)

type:事件类型

data:作为event.data属性值传递给事件对象的额外数据对象

function greet(event){
    alert("hello"+event.data.name);    
}
$('button').bind('click',{name:'cc'},greet);

fn：处理函数

on(event,[,selector][,data],handler)

//打印tbody-->tr的文本信息
$('#table tbody tr').on('click',function(){
        console.log($(this).text());
});
//和上面的等价
$('#table tbody').on('click','tr',function(){
        console.log($(this).text());
});

事件解绑

unbind()

unbind('click');

删除元素的所有绑定click的事件

unbind('click',handle1)

移除handle1的绑定事件

off()

没有参数，则删除所有绑定的事件

有参数，则删除该类型的绑定事件

交互事件

hover()

用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个fn，当光标移出这个元素时，会触发指定的第2个函数。

移入移出触发的是mouseenter和mouseleave.

$('.ulList').hover(function(){
    $(this).css('background','orange');
},function(){
$(this).css('background','');
});
<ul class="ulList">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

toggle()

用于模拟鼠标连续单击事件。第一次点击会触发指定的第一个fn，第二次点击会触发指定的第2个函数。如果有更多的函数则依次执行。随后每次点击则重复对这些函数轮番调用。该事件在jQuery1.9版本后被删除,实现切换该用方法。


$(function(){
    $('button').click(function(){
	    $p=$(this).next('p');

        if($p.is(":visible")){
            $p.hide();
        }else{
            $p.show();
        }
    });
       //将上面的用toggle改写
    $('.more').click(function(){
         $(this).next('div.content').toggle();
    });

});

<body>
    <button class="more">查看更多</button>
    <div class="content">
        这是一个关于...
    </div>
</body>

事件冒泡

冒泡是指在子元素和父元素都绑定同一个事件，当子元素触发时，父元素的此事件也会触发。js冒泡相关操作请看DOM事件

事件对象

jQuery中对事件进行了兼容处理，能够轻松获取事件对象以及对象的属性。

$('element').bind('click',function(event){

    //event 事件对象

})

阻止冒泡

event.stopProagation()

阻止默认

event.preventDefault()

**:阻止默认也可以写成 return false

事件对象的属性

event.type()

该方法作用是可以获取事件类型

event.target()

获取触发事件的元素

event.pageX()，event.pageY()

该方法获取点击页面的x坐标和y坐标。

event.which()

获取鼠标单击事件中获取到鼠标的左、中、右键分别返回1、2、3

模拟操作

trigger()


$('btn').click()
//和上面等价
$('btn').trigger('click')

加载DOM

$(document).ready()方法

该方法是在DOM载入就绪时就对其进行操作并调用执行他它所绑定的函数。

绑定多个事件则移除执行。

window.onload

是页面所有的元素(包括所关联文件)完全加载后才执行。若多次绑定则只执行最后一次绑定的事件。

chen_晨风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery---关于事件的运用

目录事件绑定事件解绑交互事件事件冒泡事件对象阻止冒泡阻止默认事件对象的属性模拟操作加载DOM事件绑定bind(type,[,data],fn)type:事件类型data:作为event.data属性值传递给事件对象的额外数据对象function greet(event){ alert("hello"+event.data.nam...
复制链接

扫一扫

专栏目录