在做1个简单功能的时候，行间事件这块发现了1个问题：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<a onclick="fn()">a标签</a>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

	function fn(obj){

	var t = $(this).text();

	console.log("t:"+t);

	}

</script>

</body>

</html>

　　

打印不出来t。事实上，这样做获取不到元素，也就是说$(this)为空。很奇怪了，这种写法也经常见：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body>

 <a>a标签</a>

 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

 <script>

 $('a').click(function(){

     var t = $(this).text();

     console.log(t);

     alert(t);

     })

 </script>

 </body>

 </html>

事实上，这种写法就能获取的到。

那行间事件怎么传this呢？如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<a onclick="fn(this)">a标签</a>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

    function fn(obj){

    var t = $(obj).text();

    console.log(t);

    alert(t);}

</script>

</body>

</html>

注意，函数的形参不能直接写this，因为this是一个关键字。$(obj)的作用是将原生的dom对象转换成jquery对象。这样可以很方便的进行操作了。

总结：第1种写法有问题，其他两种都可以。有时候事件写在行间方便点，因为动态语言生成页面的时候，传值很方便，除了this，我们还可以传后台的数据，jsp中比如：

<a onclick="createChild(${map2.id},${map2.parentid},'${map2.url}','${map1.menuname}')" >(修改)</a>。

这时候要在JavaScript要用到this，那么这样即可：

 <a  onclick="createChild(${map2.id},${map2.parentid},'${map2.url}','${map1.menuname}',this)" >(修改)</a>

不用this的时候把事件写在外面，本文中第二种写法。

行间事件传this的问题：的更多相关文章

  1. P21_事件传参与数据同步

    事件绑定 在事件处理函数中为 data 中的数据赋值 通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下: 事件传参 小程序中的事件传参 ...

  2. 【JS学习笔记】提取行间事件

    行间提取事件第一种方法: function 名字() { ... } oBtn.onclick=名字: 第二种方法: oBtn.onclick=function () { ... } 其实在JS当中, ...

  3. react事件绑定，事件传参，input单向数据绑定

    import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...

  4. wpf 用户自定义事件传参2

    public delegate void MenuButtonClickEventHandler(object sender, EventArgs e); public event MenuButto ...

  5. 微信小程序：bindtap等事件传参

    事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, data ...

  6. 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

    一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...

  7. wpf 用户自定义事件传参

    //自定义传参 ,对外联系的参数 public class ImageZoomChangedEventArgs : RoutedEventArgs { /// <summary> /// ...

  8. 微信小程序 - bindtap等事件传参

    什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...

  9. Vue 下拉框值变动事件传多个参数

    在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的. 其传参一般分为两种方式:默认传参和自定义传参. 默认传参 @change 默认会传选中项标识的参数,在传参处不用定义,在方法 ...

随机推荐

  1. linux下关闭键盘的重复击键

    https://askubuntu.com/questions/576421/disable-keyboard-repeat-from-command-line You can use the xse ...

  2. 08.Web服务器-5.深入理解HTTP协议(大图)

  3. mac Gitblit安装

    jdk下载传送门 gitBlit是java编写的的 第一步 需要安装java jdk 传送门 JDK6的下载地址: http://www.oracle.com/technetwork/java/jav ...

  4. 0316 【案例】MySQL count操作优化案例一则

      转自http://blog.itpub.net/22664653/viewspace-1791124/ 一 背景 某业务的数据库定期报 thread_runing 飙高,通定位发现一个慢查询sql ...

  5. 【ACM】hdu_1106_排序_201308071928

    排序Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissio ...

  6. UVA 1563 - SETI (高斯消元+逆元)

    UVA 1563 - SETI option=com_onlinejudge&Itemid=8&page=show_problem&category=520&probl ...

  7. iOS开发——远程消息推送的实现

    在我们使用App的过程中.总是会收到非常多的消息推送.今天我们就要来实现这个功能.首先消息推送分为本地消息推送和远程消息推送.而当中又以远程消息最为经常使用. 可是在推送远程消息之前.有两个前提条件. ...

  8. BIEE11G Rpd合并

    Rpd合并 如图,合并两个rpd须要用三个rpd文件来操作.一个是blank.rpd.这是一个空白rpd,在biee合并的时候作为"原始主资料档案库":另一个是modified.R ...

  9. HDU 1576 A/B（扩展欧几里德变形）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1576 Problem Description 要求(A/B)%9973,但因为A非常大,我们仅仅给出n ...

  10. nginx源代码分析--进程间通信机制 &amp; 同步机制

    Nginx源代码分析-进程间通信机制 从nginx的进程模型能够知道.master进程和worker进程须要通信,nginx中通信的方式有套接字.共享内存.信号.对于master进程,从外部接受信号, ...