首页 > 作文

jq阻止冒泡和默认的事件(阻止冒泡事件的方法)

更新时间:2023-04-05 11:11:02 阅读: 评论:0

本教程时候有一定前端基础的人员学习.

常用方法:

parent():返回元素的直接父元素

parents():返回元素的所有父元素

children():返回所选元素的所有直接子元素.

siblings():返回所选元素的所有兄弟元素.

next():返回下一个兄弟元素

nextall():返回后面的所有兄弟元素.

prev():返请战书回上一个兄弟元素.

prevall():返回前面的所有兄弟元素.

eq():从多个选定元素中选择指定索引号的元素.

remove():删除所选元素及其子元素.

empty():删除所选元素的子元素.

常见事件:

鼠标事件:

click:单击事件

dbclick:双击事件

mouenter:鼠标进入事件

mouleave:鼠标离开事件

mouover:鼠标悬停事件

键盘事件:

keydown:按键按下事件

keyup:按键松开事件

表单事件:

submit:表单踩影子提交事件

ch商议ange:表单域改变事件

focus:表单元素获得焦点事件

blur:表单元素失去焦点事件

文档事件:

ready:dom加载完成事件

resize:浏览器窗口大小改变事件

scroll:滚动条触发事件

代码演示:

$(function(){//文档加载完之后执行jquery代码  $('#p1').click(function(){//id='p1'的元素的点击事件var p2=$('<p></p>').text(new date().tolocalestring());//创建一个内容为本地格式日期的段落$('#p1').after(p2);//新段落放在id='p1'的元素后面});})

执行后的效果:

点击 查看日期 在后面显示本地日期

on()方法绑定事件

$('p').on('click',function(){ 老龄化社会 alert('on方法将段落p绑定了点击事件');})       

on()方法用于将相同的处理函数绑定到多个事件中时很有用.多个事件之间用空格隔开.

$('p').on('click dbclick',function(){  alert('段落p绑定了点击和双击事件,多个事件之间用空格隔开');})

off()方法解除事件绑定

$('p').off('click')//删除点击事件

jquery的事件对象

每个事件处理函数都可以接收一个事件对象,其中包括与该事件相关的属性和方法:

pagex,pagey:事件发生时,相对于页面左上角的鼠标位置(x和y坐标)

type:事件类型

which:哪个按钮或键被按地和的的区别及用法下

data:绑定事件时,传入的任何数据

target:事件发生的对象

preventdefault():阻止事件的默认动作

stoppropagation():停止冒泡到其他元素的事件

事件对象

$('a').click(function(event){    //事件对象event作为参数传递给事件处理函数alert(event.pagex);      //弹出事件发生时,鼠标的x坐标event.preventdefault(); //阻止打开href属性中的链接})

trigger()方法以编程方式触发事件.

trigger()方法不能用来模仿本机浏览器事件,比如点击一个文件文本框.只能处理jquery事件系统中的事件.

例如:编程方式触发点击事件,而不需要用户实际点击一个元素.

$('a').click(function(event){alert(event.pagex);// event.preventdefault();})ttimeout(function(){//定时器,3s后执行        $('a').trigger('click')//编程触发a元素的点击事件      },3000)

本文发布于:2023-04-05 11:11:01,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/0b4428495aaeb4340aa966cea3c5d000.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:jq阻止冒泡和默认的事件(阻止冒泡事件的方法).doc

本文 PDF 下载地址:jq阻止冒泡和默认的事件(阻止冒泡事件的方法).pdf

标签:事件   元素   鼠标   方法
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图