总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别
jQuery 事件绑定
jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on,
对应的解除监听的函数分别是 unbind、die、undelegate、off。
live、delegate 不多用,在Jquery1.7中已经移除,这里不多说
重点介绍 bind、on
bind(event,[data],function)
bind 是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,参数的含义如下:
event:事件类型,如 click、change、mouseover 等
data:传入监听函数的参数,通过 event.data 取到。可选
function:监听函数,可传入event对象,这里的event是 jQuery 封装的 event 对象,与原生的event对象有区别,使用时需要注意
使用:$("
#div li"
).bind("
click"
,myFun);
on(event,childSelector,data,function)
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。最常用的一种
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:如需移除事件处理程序,请使用 off() 方法。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
event:必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值,也可以是数组。必须是有效的事件。
childSelector:可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data:可选。规定传递到函数的额外数据。
function:可选。规定当事件发生时运行的函数。
使用:$(selector).on(event,childSelector,data,function);
.click()、.trigger() 也有事件绑定效果
JavaScript 原生事件绑定
1.在DOM元素中直接绑定:这里的DOM元素,可以理解为HTML标签。JavaScript支持在标签中直接绑定事件
2.在JavaScript代码中onXXX绑定:在JavaScript代码中绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。
3.绑定事件监听函数:绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
一. 在DOM元素中直接绑定
1. 原生函数
<input onclick="alert('谢谢支持')" type="button" value="点我" />
2. 自定义函数
<input onclick="myAlert()" type="button" value="点我" /> <script type="text/javascript"> function myAlert(){ alert("谢谢支持"); } </script>
二. 在JavaScript代码中onXXX绑定
在JavaScript代码中绑定事件的语法为:
elementObject.onXXX=function(){
// 事件处理代码
}
其中:
- elementObject 为DOM对象,即DOM元素。
- onXXX 为事件名称。
例如,为 id="demo" 的按钮绑定一个事件,显示它的 type 属性:
<input id="demo" type="button" value="点击我,显示 type 属性" /> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素,这里是<div>标签 }
</script>
三. 绑定事件监听函数
addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);
参数 | 说明 |
---|---|
elementObject | DOM对象(即DOM元素)。 |
eventName | 事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。 |
handle | 事件句柄函数,即用来处理事件的函数。 |
useCapture | Boolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,后续章节将会详细讲解。 |
attachEvent()函数语法:(兼容IE)
elementObject.attachEvent(eventName,handle);
参数 | 说明 |
---|---|
elementObject | DOM对象(即DOM元素)。 |
eventName | 事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。 |
handle | 事件句柄函数,即用来处理事件的函数。 |
注意:事件句柄函数是指“ 函数名 ”,不能带小括号。
addEventListener() 是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;
但是,IE8.0及其以下版本不支持该方法,它使用 attachEvent() 来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:
function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期浏览器 obj['on' + type] = handle; } } }
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。
例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出对话框:
var obj = document.getElementById("demo");
addEvent(obj ,"click",myAlert); function myAlert(){ alert("我是对话框"); }
jQuery 事件绑定和 JavaScript 事件绑定的区别
jQuery 中的事件绑定具有叠加性,JavaScript 的事件绑定则是可覆盖的。
看一下示例代码:
/* jQuery 绑定事件 */
2 $(".cnd").click(function(){
console.log("first")}
);
$(".cnd").click(function(){
console.log("second")}
); $(".cnd").click(function(){
console.log("3rd")}
); /* js 绑定事件 */
var cm2 = document.getElementById("me2");
cm2.onclick=function(){
console.log("first");
};
cm2.onclick=function(){
console.log("second");
};
cm2.onclick=function(){
console.log("3rd");
};
执行 jQuery 的 .cnd 点击事件,控制台打印的是:
执行 js 的 cm2 点击事件,控制台打印的是: