jQuery 事件绑定 和 JavaScript 原生事件绑定

总结一下: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. 原生函数

1 <input onclick="alert('谢谢支持')" type="button" value="点我" />

2. 自定义函数

 1 <input onclick="myAlert()" type="button" value="点我" />
 2 
 3 <script type="text/javascript">
 4 
 5   function myAlert(){
 6 
 7     alert("谢谢支持");
 8 
 9   }
10 
11 </script>

二. 在JavaScript代码中onXXX绑定

在JavaScript代码中绑定事件的语法为:

elementObject.onXXX=function(){

    // 事件处理代码

} 其中:

  • elementObject 为DOM对象,即DOM元素。
  • onXXX 为事件名称。

例如,为 id="demo" 的按钮绑定一个事件,显示它的 type 属性:

 1 <input id="demo" type="button" value="点击我,显示 type 属性" />
 2 
 3 <script type="text/javascript">
 4 
 5     document.getElementById("demo").onclick=function(){
 6 
 7         alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素,这里是<div>标签
 8 
 9 }
10 </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() 来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。 下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:

 1 function addEvent(obj,type,handle){
 2 
 3     try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
 4 
 5         obj.addEventListener(type,handle,false);
 6 
 7     }catch(e){
 8 
 9         try{ // IE8.0及其以下版本
10 
11             obj.attachEvent('on' + type,handle);
12 
13         }catch(e){ // 早期浏览器
14 
15             obj['on' + type] = handle;
16 
17         }
18 
19     }
20 
21 }                    

这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。 例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出对话框:

1 var obj = document.getElementById("demo");
2 addEvent(obj ,"click",myAlert);
3 
4 function myAlert(){
5 
6     alert("我是对话框");
7 
8 }

jQuery 事件绑定和 JavaScript 事件绑定的区别

jQuery 中的事件绑定具有叠加性,JavaScript 的事件绑定则是可覆盖的。

看一下示例代码:

 1  /* jQuery 绑定事件 */ 
 2  $(".cnd").click(function(){  
 3     console.log("first")}  
 4   );  
 5  $(".cnd").click(function(){  
 6     console.log("second")}  
 7   );  
 8     
 9  $(".cnd").click(function(){  
10     console.log("3rd")}  
11   );  
12     
13  /* js 绑定事件 */
14  var cm2 = document.getElementById("me2");  
15  cm2.onclick=function(){  
16       console.log("first");  
17  };  
18   cm2.onclick=function(){  
19       console.log("second");  
20   };  
21   cm2.onclick=function(){  
22       console.log("3rd");  
23   };  

执行 jQuery 的 .cnd 点击事件,控制台打印的是:

执行 js 的 cm2 点击事件,控制台打印的是:

可以发现:

使用 jQuery 的事件绑定方法,对同一个元素的 click 事件先后绑定了三个处理函数,结果按顺序都输出了,说明了 jQuery 的事件处理函数是叠加的;

而使用 JavaScript 原生的事件绑定,可以发现只执行了最后一个相同的绑定事件,后面绑定的事件处理函数覆盖了前面的事件处理函数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

javascript 事件基础

一:事件流       事件流描述的是从页面中接收事件的顺序。 ? ?  事件冒泡 <div id="one"> <div id="tw...

3675
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性

一般 val() 是获取表单的 value 属性; val(值); 设置表单的 value 属性。

1403
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

2310
来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

8711
来自专栏我分享我快乐

WEB布局代码初学者常见问题整理

1、 单词写错 ? ? 2、 用中文符号 ? ? 3、 标签未结束 ? ? 4、 引号未结束 ? ? 5、 尖括号未结束 ? ? 6、 标签属性之间...

3226
来自专栏超然的博客

CSS 居中

给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实...

1121
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

我们把 html 文件看成一个文档,因为万物皆对象,所以这个文档也是一个对象。这个文档中所有的标签都可以看成一个对象,比如 div 标签,p 标签等。

1222
来自专栏LIN_ZONE

js 画布与图片的相互转化(canvas与img)

//将图片对象转化为画布,返回画布 function ImageToCanvas(image) { var canvas = document.createE...

2002
来自专栏前端说吧

JS-DOM对象知识点汇总(慕课)

3027
来自专栏Java后端技术

细谈CSS布局方式

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而...

1182

扫码关注云+社区

领取腾讯云代金券