JQuery(绑定事件/ 解除事件/触发事件/事件对象)

曾经终败给现在 2024-04-19 09:41 156阅读 0赞

绑定事件

1.简单事件绑定: $(selector) .click(handler)

2.bind方式绑定: 1. bind(“click mouseenter”, function(){}) //绑定多个相同事件

  1. 2.bind\{ clickfunction () \{\} , mouseenter ()\{ \} \}
  2. 优点:可以同时绑定多个事件
  3. 缺点:仍然无法给动态创建的元素绑定事件

(js中解决动态创建 是在元素创建完成插入到父级元素后 ,给元素绑定事件)

那么该如何给动态创建的元素也绑定事件?事件委托。

3.delegate方式绑定(即事件委托): $(父元素selector) .delegate (子元素selector ,event,handler)
第一个参数:要触发事件的子元素。
第二个参数:事件类型
第三个参数:事件处理函数

  1. 优点:可以给动态创建的元素绑定事件
  2. 缺点:

事件委托:委托它们父级代为执行事件。指定父级委托事件 去处理程序,用来管理某一类型的所有事件。

4.on的方式来绑定事件:

  1. jQuery1.7版本后,jQueryon统一了所有的事件处理的方法

on注册事件的语法: $(selector). on(events ,[selector] ,[data] ,handler);

  1. 第一个参数: events, 绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
  2. 第二个参数: selector, 触发事件的后代元素(可选), 如果没有后代元素,那么事件将有自己执行。
  3. 第三个参数: data, 传递给处理函数的数据,事件触发的时候通过event . data来使用(不常使用)
  4. 第四个参数: handler, 事件处理函数

on注册简单事件:

  1. $(selector).on( "click", function()\{ \}) (); //表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。

on注册委托事件:

  1. $(selector).on( "click", "span”, function() \{ \}));
  2. 表示给$(selector )绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定

优点:包括了上面所有绑定事件方式的优点。

事件解绑

1.简单事件解绑: .onclick() = null ;

2.unbind() 方式 不传参数,解除所有事件

  1. 传参数,解绑特定事件

3.undelegate() 方式

  1. 不传参数,解除所有事件
  2. 传参数,解绑特定事件
  1. .off 解绑 on方式绑定的事件
    $(selector).off(); 不传参数,解除所有事件

$(selector).off(“click”); 传参数,解绑特定事件

事件触发

简单事件触发 $(selector).click(); //触发 click事件

trigger方法触发事件 $(selector).trigger(“click”);

事件对象:

本质:对 js事件对象的封装,处理了兼容性

screenX和screenY 对应屏幕最左 上角的值

clientx和clientY 页面可视区域的X.Y

pagex和pageY距离页面最 顶部的左上角的位置(会计算滚动条的距离)

e. keyCode 按下的键盘代码

e data 存储绑定事件时传递的附加数据

e . stopPropagation()阻止事件冒泡行为

e. preventDefault() 阻止浏览器默认行为(阻止a跳转)

return false:既能阻上事件冒泡,又能阻止浏览器默认行为。

发表评论

表情:
评论列表 (有 0 条评论,156人围观)

还没有评论,来说两句吧...

相关阅读

    相关 jQuery--解除事件

    解除事件绑定 在元素绑定事件之后,当在某个时刻不再需要该事件处理时,可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法,分别用于解

    相关 JqueryEnter键触发事件

    当我们在使用搜索功能时,输入搜索内容后,总希望向某些网站一样,点击enter键之后就自动触发搜索按钮,不用去手动点击.其实实现这一功能很简单。 首先我们需要知道的是,ente