在做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. win10、win7 使用centos配置网络，可以让Xshell进行连接，虚拟机进行上网；

    系统:window 10 虚拟机VMware® Workstation 15 Pro Linux版本:CentOS-6.3 前提:关闭防火墙 如果是win7 系统可以不用第八步,如果不行可以试一下第八 ...

  2. 39.exact value and full text

    主要知识点 1.exact value 2.full text     在es中有两种搜索方式,exact value(精确匹配),full text(全文检索) 一.exact value 比如有一 ...

  3. 使用pm2启动nodejs+express+mysql管理系统步骤

    背景: 由于个人兴趣,了解了一下nodejs+express+mysql项目.在项目搭建完成并开发完成并部署时,遇到一个尴尬的问题,就是后台的servive服务启动问题.日常开发时,打开2个cm窗口, ...

  4. myquant平台搭建及使用

    1.主页 http://myquant.cn/ 点击“我要申请试用”,进入如下页面:http://myquant.cn/news/2015/03/25/try-gmsdk-v2.0/ 点击“试用注册” ...

  5. 【ACM】hdu_1106_排序_201308071928

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

  6. spring-logback

    <?xml version="1.0" encoding="UTF-8"?><!-- 说明: 1.日志级别及文件 日志记录采用分级记录,级别与 ...

  7. HDU 3537

    翻硬币游戏,纯.. 注意要判重 #include <iostream> #include <cstdio> #include <cstring> #include ...

  8. TensorFlow 便捷的实现机器学习 三

    TensorFlow 便捷的实现机器学习 三 MNIST 卷积神经网络 Fly Overview Enabling Logging with TensorFlow Configuring a Vali ...

  9. ruby for in 循环中改变i的值无效

    ruby for in 循环中改变i的值无效 for j in 1..5 puts "#{j}hehe" j = j + 2 #break end 在循环中,使用j = j + 2 ...

  10. 判断是否是pc，获取屏幕宽度

    $(function(){ var w=document.documentElement?document.documentElement.clientWidth:document.body.clie ...