JQuery(绑定事件/ 解除事件/触发事件/事件对象)
绑定事件
1.简单事件绑定: $(selector) .click(handler)
2.bind方式绑定: 1. bind(“click mouseenter”, function(){}) //绑定多个相同事件
2.bind(\{ click:function () \{\} , mouseenter ()\{ \} \})
优点:可以同时绑定多个事件
缺点:仍然无法给动态创建的元素绑定事件
(js中解决动态创建 是在元素创建完成插入到父级元素后 ,给元素绑定事件)
那么该如何给动态创建的元素也绑定事件?事件委托。
3.delegate方式绑定(即事件委托): $(父元素selector) .delegate (子元素selector ,event,handler)
第一个参数:要触发事件的子元素。
第二个参数:事件类型
第三个参数:事件处理函数
优点:可以给动态创建的元素绑定事件
缺点:
事件委托:委托它们父级代为执行事件。指定父级委托事件 去处理程序,用来管理某一类型的所有事件。
4.on的方式来绑定事件:
jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法
on注册事件的语法: $(selector). on(events ,[selector] ,[data] ,handler);
第一个参数: events, 绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
第二个参数: selector, 触发事件的后代元素(可选), 如果没有后代元素,那么事件将有自己执行。
第三个参数: data, 传递给处理函数的数据,事件触发的时候通过event . data来使用(不常使用)
第四个参数: handler, 事件处理函数
on注册简单事件:
$(selector).on( "click", function()\{ \}) (); //表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
on注册委托事件:
$(selector).on( "click", "span”, function() \{ \}));
表示给$(selector )绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
优点:包括了上面所有绑定事件方式的优点。
事件解绑
1.简单事件解绑: .onclick() = null ;
2.unbind() 方式 不传参数,解除所有事件
传参数,解绑特定事件
3.undelegate() 方式
不传参数,解除所有事件
传参数,解绑特定事件
- .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:既能阻上事件冒泡,又能阻止浏览器默认行为。
还没有评论,来说两句吧...