在做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. jenkins+svn+tomcat部署war包

    svn是版本控制器,是提供一个版本库让程序员把项目提交上去,每一次更新代码提交后都会记录 jenkins是持续部署的工具,是让项目自动部署发布出去的工具,当项目代码发生改变时就需要重新打包成war包, ...

  2. PHP和zookeeper结合实践

    Zookeeper 简单介绍 Apache Zookeeper是开发和维护开源服务器的服务,它能够实现高度可靠的分布式协调. 安装Zookeeper(无需安装) wget http://mirror. ...

  3. （34）Spring Boot的启动器Starter详解【从零开始学Spring Boot】

    Spring Boot应用启动器基本的一共有N(现知道的是44)种:具体如下: 1)spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. 2 ...

  4. （11）Spring Boot配置ContextPath【从零开始学Spring Boot】

    Spring boot默认是/ ,这样直接通过http://ip:port/就可以访问到index页面,如果要修改为http://ip:port/path/ 访问的话,那么需要在Application ...

  5. D - Mayor's posters

    D - Mayor's posters POJ - 2528 思路:线段树+离散化. 离散化时注意特殊情况,如果两个数相差大于一,离散时也应该差1.比如 1 3 离散后应该为 1 2. 错因: 1.二 ...

  6. Android 源代码解析 之 setContentView

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41894125,本文出自:[张鸿洋的博客] 大家在平时的开发中.对于setCont ...

  7. Python面向切面编程-语法层面和functools模块

    1,Python语法层面对面向切面编程的支持(方法名装饰后改变为log) __author__ = 'Administrator' import time def log(func): def wra ...

  8. eclipse导入myeclipse中的web项目

    场景:在myeclipse编写的一个简单的电信计费系统项目,后面公用到eclipse,想把它给导入到eclipse中 操作:eclipse中在packag explorer空白处右键>impor ...

  9. 2014.9.20Hashtable概述

    hashtable叫哈希表,用于表示键值的集合,这些键值对根据键的哈希代码进行组织,其每个元素都存储于DictionaryEntry对象中的键值对.键不能为空引用. count:获取包含在hashta ...

  10. [专辑] 也晒晒我的RBAC系统 ——行一山人的博客

    也晒晒我的RBAC系统(一):概述 也晒晒我的RBAC系统(二):系统实现原理简介 也晒晒我的RBAC系统(三):后台管理程序源码及使用演示 也晒晒我的RBAC系统(四):框架源代码(超值奉献,请勿拍 ...