博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery的事件处理
阅读量:6403 次
发布时间:2019-06-23

本文共 1353 字,大约阅读时间需要 4 分钟。

原生

//html//jsdocument.getElementById('btn').onclick = clickCheckboxCallback;function clickCheckboxCallback(event) {    var e = event || window.event;    var target = e.target || e.srcElement;     alert(target.className);  //anniu    if (target.nodeName === 'BUTTON') {        alert('yuansheng ok');       }    else {        alert('yuansheng fail');    }}

此处 event、e 为 MouseEvent,target为button#btn

-----------------------------------------------------------------

jquery

//html//js$('#btn').on('click', clickCheckboxCallback);function clickCheckboxCallback(event) {    var target = event.target;     alert($(target).attr('class')); //anniu    if ($.nodeName(target, 'button')) {        alert('jquery ok');    }    else {        alert('jquery fail');    }}

此处 event为m.Event(jquery对象), target为button#btn

-------------------------------------------------------------

总结:jquery和原生js绑定事件的不同在于

  • 绑定方式  

   js为 dom.onclick = fn; jquery为$('#dom').on('click', fn);

  • 兼容处理

   js 要经过 兼容处理,如下

var e = event || window.event;var target = e.target || e.srcElement;

   jquery不用处理,只需要直接用event或者event.target,如下

var target = event.target;

      

   *jquery 和 原生js的event不一样,但target都是一样的

 

  • 对nodeName的判断,二者区别在上面的代码上可以看到 

---------------------------------------------------------------------------

 

* Q:如何理解$符号? 

   A:直接写在$上的函数都只支持dom对象

转载于:https://www.cnblogs.com/cjy1993/p/4077042.html

你可能感兴趣的文章
位运算符
查看>>
winform自定义控件
查看>>
C#编码好习惯
查看>>
避其锋芒,侧翼出击。——司马亮创业回忆录(一)
查看>>
scope
查看>>
删除链表中储存给定值的节点
查看>>
vCPU估算的几个基本概念
查看>>
DoraCMS 源码知识点备注
查看>>
一起谈.NET技术,晚绑定场景下对象属性赋值和取值可以不需要PropertyInfo
查看>>
一起谈.NET技术,.Net Framework源代码中的模式之Prototype(原型模式)
查看>>
[shell 命令] find 查找文件
查看>>
windows下启动mysql服务的命令行启动和手动启动方法
查看>>
VTK三维点集轮廓凸包提取
查看>>
【概率论与数理统计】小结9-3 - 区间估计
查看>>
Golang性能调优入门
查看>>
sqlloader外部表
查看>>
golang笔记——数组与切片
查看>>
屏蔽可忽略的js脚本错误
查看>>
散文分享
查看>>
【Vue】vue.js常用指令
查看>>